html_skill

Overview

This skill bundles 30 pragmatic rules for production HTML focused on semantic markup, WCAG 2.1 AA accessibility, performance, forms, and security. It is a compact checklist you can apply while authoring pages, components, and forms to improve usability, SEO, and Core Web Vitals. The rules emphasize semantics first, then accessibility, then performance optimizations.

How this skill works

The skill inspects structural choices (headings, landmarks, semantic elements), form patterns (labels, autocomplete, validation), accessibility helpers (alt text, skip links, ARIA usage), and performance techniques (lazy loading, resource hints, modulepreload). It also enforces layout stability (image dimensions, FOUC prevention) and gives concrete rules for web components and design token usage. Use the rules as prescriptive checks while writing HTML or reviewing markup for production.

When to use it

• Building page scaffolding and document outline (headings, landmarks)
• Creating accessible forms, validation, and field grouping
• Authoring web components that must avoid FOUC and respect container queries
• Optimizing images, scripts, and fonts for Core Web Vitals
• Preparing pages for SEO and social metadata (meta, canonical, og tags)

Best practices

• Prefer semantic elements (header, main, nav, article, aside, footer) over generic divs
• Never skip heading levels; maintain a logical hierarchy for screen readers
• Always provide meaningful alt text; use empty alt for decorative images
• Lazy-load below-the-fold images and preload critical fonts and modules
• Associate labels with inputs, use fieldset/legend to group related controls
• Use ARIA only to supplement native semantics and ensure keyboard accessibility

Example use cases

• Implementing a product or article card: article, h2/h3, img alt, time element
• Building a registration form with autocomplete, accessible errors, and validation
• Creating a site-nav web component with modulepreload and FOUC prevention CSS
• Optimizing a content-heavy page: preload critical CSS, lazy-load images, set image dimensions
• Preparing a marketing page with proper meta tags, canonical links, and OG images