Guide · Agent skill
How to use the Logical Focus Order Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The focus-order skill is a checklist that an AI agent follows when reviewing a page or UI component for one accessibility rule: keyboard focus should move in the same order the eye reads the page. It is useful for front-end developers, teams auditing modals, menus and forms before release, and designers checking that visual order matches DOM order. After this guide you will know what the skill does, how to install it, how to ask for a review, and where its limits are.
Logical Focus Order Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the focus-order skill ZIP from the page where you found this guide.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 4Paste the markup. Give the agent the HTML or component code you want reviewed, including containers and dialog logic.
- 5Ask for a focus order review. Describe what to check, such as tab order, focus traps or focus return, in a natural sentence.
- 6Fix and verify. Apply the suggested fixes, then tab through the real page in a browser to confirm the order.
What the focus-order skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a request matches the skill's description. The focus-order skill covers the rule 'Ensure logical focus order'. When focus jumps unexpectedly, keyboard users get disoriented and cannot find content.
When you ask for a review of HTML or a UI component, the agent checks native HTML semantics first. It then looks at tab order, focus traps in dialogs, focus return after a dialog closes, accessible names, and how a screen reader would announce elements. It reports the specific elements that break the rule and how to fix them.
- Tab order should match visual reading order (left-to-right, top-to-bottom).
- DOM order determines tab order, so arrange the HTML to match the visual layout.
- Avoid positive tabindex values (1, 2, 3), which break the natural flow.
- Use CSS for visual positioning, not DOM reordering.
- Dialogs should trap focus while open and return focus to the triggering element when closed.
Install the focus-order skill
Download the ZIP of the focus-order skill from the page where you found this guide. Unzip it so the skill folder ends up in one of these locations: ~/.claude/skills/ for all your projects, or .claude/skills/ inside a specific project folder if you want the skill only there.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills. The skill folder contains SKILL.md and references/rule.md.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with natural requests
You do not need a special command. The skill is meant to load when your request is about reviewing rendered HTML, interactive components, or design-system patterns for focus order. Describe the thing you want checked and say that it concerns keyboard navigation or focus.
Give the agent the markup or component code. The skill says the agent reads markup and code, so paste the HTML, JSX or template, or point the agent at the files.
- Review this modal's HTML for focus order and focus trapping.
- Check the tab order of this navigation menu and flag any positive tabindex values.
- Does this form have a logical keyboard focus sequence? Check accessible names too.
- My layout uses CSS grid to reorder cards visually. Does the tab order still match what people see?
What to expect in the review
The skill asks the agent to flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule. It also notes how to verify each fix with browser accessibility tooling or assistive technology.
The skill's guidance for fixes is to order DOM elements to match the visual layout, avoid positive tabindex values, use tabindex='0' for custom interactive elements, and use tabindex='-1' for programmatic focus management. The reference file includes a bad and good example: buttons with tabindex 3, 1, 2 versus the same buttons in plain DOM order.
<!-- Bad: Positive tabindex breaks natural order -->
<button tabindex="3">Third</button>
<button tabindex="1">First</button>
<button tabindex="2">Second</button>
<!-- Good: DOM order matches visual order -->
<button>First</button>
<button>Second</button>
<button>Third</button>Safety notes: scripts and network
The skill runs no scripts and uses no network access, according to its listing. It needs nothing else to be installed. It only reads the content you give it and the files inside the skill folder.
The skill cannot see a live rendered page unless your setup provides tools for that. Its review is based on markup and code, so it cannot replace testing with keyboard users or assistive technology.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
Tips for better results
Include the full component, not a fragment, so the agent can see the DOM order and any tabindex attributes. If the visual layout comes from CSS, say so and include the stylesheet rules that position elements.
Treat the output as a checklist to act on, then confirm the fixes by tabbing through the real page in a browser and, where relevant, checking the screen reader output.
- Paste the complete component including its container and any dialog open/close logic.
- Mention whether layout comes from CSS grid, flexbox or absolute positioning.
- Ask specifically about focus return after a dialog closes if you have modals.
- Re-run the review after fixes and verify in a browser yourself.
What people use it for
- Reviewing a modal dialog for focus trapping and focus return to the button that opened it.
- Checking a navigation menu for positive tabindex values and mismatched visual order.
- Auditing a form before release for logical tab sequence and accessible names.
- Confirming that a CSS grid layout that reorders cards visually still has a sensible tab order.
Frequently asked questions
Is the focus-order skill free to use?
The skill is published under the MIT licence, as listed on its page. Check the licence file in the repository for the full terms before you redistribute it.
What do I need to install the focus-order skill?
The listing says it requires nothing else to be installed, runs no scripts and uses no network. You unzip the ZIP into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings, Capabilities, Skills in the Claude apps.
Can the agent test my page in a browser?
Not by default. The agent reads markup and code. It can only inspect a live rendered page if your setup provides tools for that, so you should still tab through the page yourself.
Does this replace an accessibility audit?
No. The skill is a checklist for an AI agent and is not a substitute for testing with keyboard users or assistive technology. Legal compliance sign-offs need a qualified human auditor.
Why does the skill say to avoid positive tabindex values?
Positive tabindex values override the natural order, so focus jumps in unexpected sequence. The skill recommends ordering the DOM to match the visual layout instead.
How does this compare with other accessibility checks?
This skill covers one rule: logical focus order. Other rules, such as accessible names or semantics, are separate. The skill itself does check accessible names and screen reader output as part of focus review, but it is not a full accessibility suite.
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 or team that wants an AI agent to review keyboard navigation in modals, menus and forms before release. Pick something else if you need a live browser test, a full accessibility audit, or a legal compliance sign-off, since this skill only reads markup and code.
Download the skill