Skip to content
Get packs

Focus Management Reviewer

Reviews pages and components for keyboard focus handling in modals, views and dynamic updates.

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

What it does

Once installed, the agent checks rendered HTML and interactive components for how keyboard focus moves during dynamic changes such as opening and closing modals, switching single-page app views, or updating content. It first checks whether native HTML elements already handle the behaviour, then looks at keyboard flow, accessible names, and screen reader output, and flags exact elements that break the rule. It is a review checklist rather than a code generator, though it can suggest fixes using tabindex, focus() and focus trapping.

Great for

  • Front-end developers reviewing modals, menus or single-page app navigation for accessibility
  • Designers or QA staff checking that keyboard users are not left stranded after an interaction
  • Teams wanting a consistent accessibility review step before release

Skip it if

  • Non-technical users who need an accessibility audit certified for legal compliance, since the skill gives guidance from a checklist, not a formal audit
  • Projects without any rendered UI, where focus behaviour does not apply

Try asking

  • “Review this modal component for focus return and focus trapping when it closes.”
  • “Check my single-page app's route change and tell me whether focus moves to the new content.”
  • “Flag any elements in this markup that use tabindex incorrectly or lose keyboard focus.”
  • “Explain how to verify this dropdown fix with browser accessibility tools.”
Step-by-step guide: how to use Focus Management ReviewerInstall, 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.

    focus-management.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip focus-management.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip focus-management.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 component's HTML and the JavaScript that opens and closes it so the agent can trace focus changes.
  • Ask for verification steps with browser accessibility tooling or a screen reader, since the agent cannot test real assistive technology output itself.
  • Consult references/rule.md for framework-specific examples when the review needs more detail.

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.