Skip to content
Get packs

Empty Heading Checker

Flags empty heading tags (h1-h6) and suggests accessible fixes for them

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

What it does

When installed, the agent reviews HTML or components for heading tags (h1 to h6) that have no visible text, since these create confusing empty stops for screen reader users navigating the page outline. It reports the offending elements and suggests adding descriptive text or removing the heading if it isn't needed. It also points to browser accessibility tools or assistive tech for checking the fix.

Great for

  • Front-end developers reviewing rendered markup for accessibility problems
  • Designers or QA reviewers checking component libraries for heading structure issues
  • Teams working through a front-end accessibility checklist

Skip it if

  • Automated accessibility auditing at scale, since it is a prompt-driven review rather than a validated scanner and may miss elements generated at runtime (reason: it only sees the code or output you give it)
  • Projects that need certified WCAG compliance evidence (reason: the skill gives guidance, not a formal audit)

Try asking

  • “Review this HTML and flag any empty h2 or h3 tags”
  • “Check my React component for headings with no text content and suggest fixes”
  • “Audit this page's heading outline for ghost stops that screen readers would announce”
Step-by-step guide: how to use Empty Heading 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.

    empty-heading.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip empty-heading.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 (after JavaScript runs) rather than source templates, so dynamically filled headings are visible to the review
  • Ask the agent to also check keyboard and screen reader behaviour for interactive components, as the skill description suggests
  • Verify the fixes with a browser accessibility tool such as the accessibility tree inspector after changes

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.