agentleFS
Sign inStart free
shreyam1008shreyam1008/shre-skills/skills/html/SKILL.md

html

Skill0 starsChanged 48 days agoMITView on GitHub

Implements semantic HTML, forms, document structure, and head metadata. Use for markup and native accessibility behavior, rather than general visual design or CSS layout.

We split this skill into the rules it gives an agent

6 rules. 0 are common, 2 are distinctive, and 4 are very specific to this project.

  • 0

    Common

    Most of the 17 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 4

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Every input has a <label for> (or wraps the input).

    line 21
  2. Very specific:

    Use correct type (email, tel, number, url, date) and inputmode/autocomplete — better keyboards and autofill.

    line 22
  3. Very specific:

    Use native validation (required, pattern, min/max) before JS.

    line 24
  4. Distinctive:

    Prefer native semantics over ARIA — "no ARIA is better than bad ARIA".

    line 39
  5. Distinctive:

    Keep a logical DOM/tab order.

    line 41
  6. Very specific:

    Use role="status" / aria-live="polite" for routine dynamic messages.

    line 42

“Common” is measured: kept by at least 6 in 10 of the 17 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

HTML

Semantic HTML is the cheapest accessibility and SEO win available — the browser gives you behavior, focus, and meaning for free when you use the right element. Reach for a <div> only when no semantic element fits.

Use the right element

  • Structure with landmarks: <header>, <nav>, <main> (one per page), <aside>, <footer>, <section>, <article>.
  • Headings describe outline order — one <h1> per page, never skip levels for styling.
  • Interactive = real elements: <button> for actions, <a href> for navigation. Never a clickable <div> (you lose focus, keyboard, and roles).
  • Lists for collections (<ul>/<ol>/<dl>); <table> only for tabular data (with <caption>, <th scope>).
  • <figure>/<figcaption>, <time datetime>, <details>/<summary> carry real semantics — use them.

Forms (where most bugs live)

  • Every input has a <label for> (or wraps the input). Placeholder is not a label.
  • Use correct type (email, tel, number, url, date) and inputmode/autocomplete — better keyboards and autofill.
  • Group related fields in <fieldset> + <legend> (radios, checkboxes).
  • Use native validation (required, pattern, min/max) before JS; associate errors with aria-describedby.
  • A submit control inside a <form> should be <button type="submit">.
<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" autocomplete="email" required
         aria-describedby="email-err" />
  <p id="email-err" role="alert"></p>
  <button type="submit">Subscribe</button>
</form>

Accessibility

  • Prefer native semantics over ARIA — "no ARIA is better than bad ARIA". Add roles/attributes only to fill genuine gaps.
  • Images: meaningful alt; decorative images get alt="".
  • Keep a logical DOM/tab order; visible focus must survive your CSS.
  • Use role="status" / aria-live="polite" for routine dynamic messages. Reserve role="alert" (assertive announcement) for urgent, time-sensitive information.

Document head & metadata

  • <!doctype html>, <html lang="…">, <meta charset="utf-8">, responsive <meta name="viewport" content="width=device-width, initial-scale=1">.
  • Per-page <title> and <meta name="description">; Open Graph/Twitter tags for sharing.
  • One canonical <link rel="canonical">; structured data (JSON-LD) where it helps search.

Performance-aware markup

  • <img> with explicit width/height (or aspect-ratio) to prevent layout shift; loading="lazy" for below-the-fold, and <picture>/srcset for responsive images.
  • <script defer> (or type="module", which defers by default); async only for independent scripts.
  • Preload critical fonts/assets sparingly (<link rel="preload">); preconnect to required origins.

Reference

  • GoogleChrome/modern-web-guidance-src (HTML/forms/accessibility guides).
  • MDN: HTML element reference; "HTML: A good basis for accessibility".
  • WHATWG HTML Living Standard; web.dev: "Learn HTML", "Learn Forms".
  • W3C WAI / ARIA Authoring Practices.

Download now (ZIP)

  • Other versions18 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 18

    1. plannotator/effective-html★ 3.8ksame name
    2. Mindrally/skills★ 275same name
    3. Surething-io/cockpit★ 44same name
    4. eliasstravik/skills★ 22same name
    5. julianoczkowski/html★ 9same name
    6. nsmith/html★ 9same name
    7. NazmusSayad/skills★ 3same name
    8. ffsshhttiikk/opencode-agents-skills★ 2same name
    9. Pawel-Kica/ai-coding-100★ 2same name
    10. Pawel-Kica/claude-code-100★ 2same name

    8 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use thermo-nuclear-code-quality-review, to-spec and 5 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • jaydubya818Skill

      thermo-nuclear-code-quality-review

      Use when the user requests an intentionally strict maintainability review.

      Also in 3 projects that use this

    • GoogleSkill

      to-spec

      Turn the current conversation into a spec and publish it to the project issue tracker — no interview, just synthesis of what you've already discussed.

      Also in 3 projects that use this

    • GoogleSkill

      prototype

      Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

      Also in 4 projects that use this

    • photon-groveSkill

      unslop

      Detects and rewrites generic, overly polished, or AI-sounding prose while preserving meaning. Use when the user asks to "unslop", humanize, de-AI, tighten, or review whether writing sounds generated.

      Also in 3 projects that use this

    • MicrosoftSkill

      handoff

      Compact the current conversation into a handoff document for another agent to pick up.

      Also in 4 projects that use this

    • +2 more from google
  • In this repository21 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free