Skip to content
Get packs

Heading Hierarchy Checker

Reviews HTML pages for logical, accessible heading structure (one h1, no skipped levels).

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent gets guidance for reviewing web pages and components so their headings form a logical outline. It checks that a page has one main h1 title, that heading levels follow in order without skipping (h1 then h2 then h3), and that heading text describes the content beneath it. This matters because screen reader users jump between headings like a table of contents. The skill is a set of written instructions and does not itself run any code.

Great for

  • Front-end developers who want an accessibility review of page markup
  • Designers or QA reviewers checking heading structure before release
  • Teams using AI agents to audit HTML against an accessibility checklist

Skip it if

  • Full accessibility audits: the skill covers only heading structure, not keyboard, colour contrast or other rules, and the checks depend on the agent's judgement (no automated testing is included)
  • Sites that need legal compliance sign-off: the guidance is a checklist, not a certified test, so results should be confirmed with dedicated tools or an expert

Try asking

  • “Review this page's HTML and tell me if the headings skip any levels.”
  • “Generate a heading outline for my landing page and flag problems.”
  • “Check whether this React component uses headings correctly for screen reader users.”
  • “Explain to my team why we should not use h3 just to make text smaller.”
Step-by-step guide: how to use Heading Hierarchy CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    heading-hierarchy.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip heading-hierarchy.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip heading-hierarchy.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered HTML (or the component code) along with your request so the agent can inspect the actual heading elements.
  • Pair the review with a browser accessibility tool or heading outliner to confirm what the agent reports.
  • Ask for the fix as well as the problem, so the agent suggests exact element changes and how to verify them.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.