Guide · Agent skill
How to use the Heading Order Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The heading-order skill is a set of written instructions that teaches an AI agent to review a page's headings and flag levels that are skipped, such as an h3 placed directly after an h1. It is useful for front-end developers, designers and QA reviewers who want to check a page's heading outline before release. After this guide you will know what the skill does, how to install it, how to ask for it in plain language, and where its limits are.
Heading Order Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the heading-order skill ZIP from the page you are reading.
- 2Unzip into the skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- 4Paste your markup. Provide the rendered HTML or the component code whose headings you want checked.
- 5Ask in plain language. Request a heading order check, for example asking whether any levels are skipped.
- 6Apply the suggested changes. Review each flagged element and the suggested level change before editing.
- 7Verify in a browser. Confirm the outline with browser accessibility tooling or assistive technology.
What the heading-order skill makes the agent do
When the skill is active, the agent reviews rendered HTML or components and checks that heading levels (h1 to h6) follow a sequential, logical hierarchy. It flags violations, suggests changing heading levels, and explains why a clean outline helps screen reader users who jump between headings.
The skill is based on the rule that screen reader users often navigate by jumping from heading to heading, so a skipped level can confuse them. The skill works from written guidance only and contains no executable scripts.
- Checks that heading levels are used in sequential order
- Flags skipped levels, for example an h1 followed by an h3
- Suggests a fix, such as changing an h3 to an h2 when it follows an h1
- Explains how a consistent hierarchy aids navigation
Install the heading-order skill
Download the ZIP for this skill from the page you are reading. Unzip it into one of two locations: ~/.claude/skills/ to make it available across your projects, or a project's .claude/skills/ folder to limit it to that project.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then choose Skills and add the skill. The package includes two files: SKILL.md, which holds the main instructions, and references/rule.md, which has code examples and framework-specific detail.
- Option A: unzip into ~/.claude/skills/ for personal use
- Option B: unzip into a project's .claude/skills/ folder for a single project
- Option C: upload it in the Claude apps under Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be picked up when you ask the agent to review headings or rendered markup. Describe what you want in plain words and point the agent at the page or component.
Be specific about the input. Paste the HTML, share the component code, or describe the page outline. The more concrete the markup, the more exact the flagged elements will be.
- Check the heading order of this page's HTML and tell me about any skipped levels.
- Review this component for heading levels that skip from h1 to h4.
- Is the heading outline on this landing page logical for screen reader users?
- Suggest heading level changes so the outline goes h1, h2, h3 without gaps.
What the skill needs and how it runs safely
The skill lists no requirements. It does not run scripts and does not use the network. Because it is a set of instructions, it works by having the agent read the markup you provide and reason about the heading levels.
Review the agent's suggestions before you edit production code. Confirm the fix in a browser accessibility tool or with assistive technology, since the agent cannot verify how a real screen reader announces the page.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
Get the most useful results
Give the agent the rendered markup rather than only your source templates, because components can generate headings at runtime. Ask for the exact element and suggested level change so you can act on the output directly.
Remember the scope. The skill checks heading levels only. It does not judge how large text looks, so a heading styled small may still be correct, and a heading styled large may still be wrong. It also does not cover contrast, labels or keyboard support in general, so it is not a full accessibility audit.
- Paste rendered HTML, not only template fragments
- Ask for the exact element and its suggested new level
- Check visual size separately from semantic level
- Use a broader accessibility review for full coverage
What people use it for
- Reviewing a landing page's HTML for an h1 followed directly by an h3
- Checking a reusable component whose headings may skip levels when placed on different pages
- Preparing a QA checklist item for heading structure before release
- Teaching a team why skipped heading levels confuse screen reader users
Frequently asked questions
How do I install the heading-order agent skill?
Download the ZIP from the page you are reading and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Does the heading-order skill have requirements?
The skill lists no requirements. It runs no scripts and does not use the network, so it only needs an agent that can read the markup you provide.
Is the heading-order skill free?
The skill is published under the MIT licence, as stated on this page. Check the repository licence file for the full terms.
What does the skill check exactly?
It checks that heading levels from h1 to h6 follow a sequential order without skipping levels, such as an h3 directly after an h1. It flags violations and suggests a level change.
Can this skill replace a full accessibility audit?
No. It covers only heading order. It does not check contrast, labels or keyboard support in general, and automated checks cannot confirm the real screen reader experience.
Does the skill check how headings look on screen?
No. It checks semantic heading levels, not visual size. A heading styled small may still be correct, and a visually large heading may still use the wrong level.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, designer or QA reviewer who wants a quick, focused check that a page's heading levels make a logical outline. Pick a broader accessibility audit tool if you need coverage of contrast, labels, keyboard behaviour or real screen reader testing.
Download the skill