Name: html-standards
Author: grant-wilson

Imported from grant-wilson/agent-skills (skills/html-standards/SKILL.md). Install upstream with npx skills add grant-wilson/agent-skills --skill html-standards. Copyright stays with the author.

Use the element that names the content: <header>, <nav>, <main> (exactly one per page), <article>, <section>, <aside>, <footer>, <button> for actions, <a> for navigation. A <div> or <span> is a last resort for pure styling hooks, never for interactive behavior.
Reach for native semantics before ARIA — a <button> needs no role or key handlers. When ARIA is unavoidable, follow the APG pattern completely (role, states, and keyboard support together). Every page must be operable by keyboard alone, with a logical heading outline (one <h1>, no skipped levels) and visible focus indicators.

<button type="button" aria-expanded="false" aria-controls="filters">
  Filters
</button>

Every <img> has an alt attribute — descriptive for informative images, empty (alt="") for decorative ones. Set explicit width/height (or aspect-ratio in CSS) to prevent layout shift, and loading="lazy" on below-the-fold images.
Every control gets a programmatically associated <label>. Use the specific input type (email, tel, date, number) and autocomplete tokens so browsers and password managers can help. Surface validation errors in text associated via aria-describedby, never by color alone.

<label for="work-email">Work email</label>
<input id="work-email" type="email" name="email" autocomplete="work email"
  required
  aria-describedby="work-email-error" />
<p id="work-email-error" role="alert" hidden>Enter a valid email address.</p>

Prefer built-in behavior over JavaScript re-implementations: <dialog> with showModal() for modals, <details>/<summary> for disclosure, the popover attribute for popovers, and <datalist> for suggestions.
No style attributes, no inline <script> bodies, and no inline event handlers (onclick="…"). Keep markup CSP-compatible: styles live in stylesheets, behavior in external modules loaded with type="module" and defer semantics.
Every document declares <!doctype html>, <html lang="…">, <meta charset="utf-8">, a <meta name="viewport">, and a unique, descriptive <title>.

{ "ocm": "1", "id": "grant-wilson-agent-skills-html-standards", "kind": "skill", "name": "html-standards", "description": "HTML standards — semantic elements over divs, native semantics before ARIA with full keyboard operability, alt text and layout-shift-free images, labeled and correctly typed form controls with accessible error text, built-in behavior (dialog, details, popover, datalist) over JavaScript re-implementations, CSP-compatible markup with no inline style or handlers, and required document head elements. Use when writing or reviewing HTML or component templates.", "publisher": "grant-wilson", "version": "1.0.0", "capabilities": { "domains": [ "coding" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "HTML standards — semantic elements over divs, native semantics before ARIA with full keyboard operability, alt text and layout-shift-free images, labeled and correctly typed form controls with accessible error text, built-in behavior (dialog, details, popover, datalist) over JavaScript re-implementations, CSP-compatible markup with no inline style or handlers, and required document head elements. Use when writing or reviewing HTML or component templates." ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/grant-wilson/agent-skills", "path": "skills/html-standards/SKILL.md", "ref": "edfffbc7ccdf2bcd631843b64a9ba6fd87ad460e", "url": "https://github.com/grant-wilson/agent-skills/blob/edfffbc7ccdf2bcd631843b64a9ba6fd87ad460e/skills/html-standards/SKILL.md", "key": "grant-wilson/agent-skills/skills/html-standards/SKILL.md" } }, "instructions": "- Use the element that names the content: `<header>`, `<nav>`, `<main>` (exactly\none per page), `<article>`, `<section>`, `<aside>`, `<footer>`, `<button>` for\nactions, `<a>` for navigation. A `<div>` or `<span>` is a last resort for pure\nstyling hooks, never for interactive behavior.\n- Reach for native semantics before ARIA — a `<button>` needs no `role` or key\nhandlers. When ARIA is unavoidable, follow the APG pattern completely (role,\nstates, and keyboard support together). Every page must be operable by keyboard\nalone, with a logical heading outline (one `<h1>`, no skipped levels) and\nvisi", "cost": { "context_tokens": 530 } }

html-standards

About

Use it

Manifest

Reviews