Logical Focus Order Checker

What it does

This skill gives an AI agent a checklist for one accessibility rule: keyboard focus (what gets highlighted when someone presses Tab) should follow the same order the eye reads the page. When asked to review HTML or a UI component, the agent checks native HTML semantics first, then looks at tab order, focus traps in dialogs, focus return after closing a dialog, accessible names, and how a screen reader would announce things. It then reports specific elements that break the rule and how to fix them, such as avoiding positive tabindex values.

Try asking

• “Review this modal's markup and tell me if focus is trapped and returns to the button when it closes.”Copy
• “Check this form layout for focus order problems and explain which elements to move.”Copy
• “Why does pressing Tab jump around my product grid? Here is the HTML.”Copy
• “Audit this navigation component for tabindex misuse.”Copy

Get better results

• Paste the rendered HTML or the component code, not just a description, so the agent can trace the actual DOM order.
• Say whether the page uses CSS grid, flexbox ordering, or absolute positioning, since visual reordering is a common cause of mismatches.
• Confirm the agent's findings by tabbing through the page yourself in a browser and checking with an accessibility tool.

What's inside

• references/rule.md
• SKILL.md