skills.rest
jaredlander
jaredlanderCOMMUNITY
Explore all skills by this author →
Website𝕏@jaredlanderGitHub

html

Write semantic, accessible, and performant HTML following modern web standards.

Updated Jan 14, 2026
One-click install
npx skills add https://github.com/jaredlander/freshbooks-speed --skill html
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html
Source: https://github.com/jaredlander/freshbooks-speed/tree/main/.claude/skills/html
Command: npx skills add https://github.com/jaredlander/freshbooks-speed --skill html

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Write semantic, accessible, and performant HTML that adheres to modern web standards, reducing accessibility barriers and improving structural clarity.

Core Features & Use Cases

  • Semantic structure and meaningful markup for headers, sections, and landmarks.
  • Accessibility-by-default: proper labeling, ARIA when appropriate, and keyboard-friendly navigation.
  • Performance-conscious HTML: optimized meta tags, efficient form markup, accessible images, and responsive layout basics.
  • Use Case: Draft a complete HTML page for a product landing, ensuring proper headings, navigation, and a compliant form.

Quick Start

Provide a minimal accessible HTML snippet or prompt the AI to generate a well-structured HTML page that includes header, main, nav, and footer with a sample form.

Frequently Asked Questions about html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write semantic HTML that is accessible and performant?▼

Write semantic HTML by using meaningful elements like header, main, nav, and footer for structural clarity. This enforces accessible attributes, appropriate heading order, and performance optimizations to reduce accessibility barriers.

What is the best way to structure an HTML page for SEO and accessibility?▼

Structuring an HTML page for SEO and accessibility involves using semantic landmarks, proper heading order, and optimized meta tags. This ensures keyboard-friendly navigation and compliant forms, reducing accessibility barriers while improving search visibility.

How do I create accessible forms using modern web standards?▼

Create accessible forms using modern web standards by implementing proper labeling, ARIA attributes when appropriate, and efficient form markup. This ensures keyboard-friendly navigation and compliance across complex layouts and projects.

Does semantic HTML improve web page performance automatically?▼

Semantic HTML improves web page performance by enforcing optimized meta tags, accessible image attributes, and responsive layout basics. These performance-conscious HTML patterns reduce barriers and ensure efficient document rendering across projects.

When do I need ARIA attributes in an HTML document?▼

You need ARIA attributes in an HTML document when native semantic elements cannot fully convey dynamic behaviors or complex UI relationships. Use them appropriately alongside proper labeling to ensure keyboard-friendly navigation and accessibility compliance.

Related Skills

AIDotNetAIDotNet
84

pdf-generator

Generate PDF documents from HTML, Markdown, or plain text with Python.

Official
Intermediate
koralliskorallis
90

artifacts-builder

Generate interactive HTML/JavaScript web artifacts with Tailwind CSS styling.

Community
Basic
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
mgd34msumgd34msu
4

testing-library

Test UI components across React, Vue, and Svelte with Testing Library utilities.

Community
Intermediate