Skip to content
Get packs

Avoid Autofocus Checker

Reviews HTML forms and flags autofocus use that disrupts screen reader and keyboard users.

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

What it does

Once installed, the agent reviews web pages, components and form markup with an accessibility lens, looking for autofocus on form fields. It flags cases where page load would jump focus past content users have not read yet, explains why this confuses screen reader users, and suggests moving focus to a field only after a user action. It is a guided review checklist, not an automated testing tool.

Great for

  • Front-end developers reviewing forms before release
  • Accessibility-minded designers checking component patterns
  • Teams running an accessibility checklist on existing pages

Skip it if

  • Login or search-only pages where autofocus may be acceptable, since the skill itself notes these exceptions
  • Automated compliance audits, because the skill only guides the agent's reading of code and does not run a browser or scanner

Try asking

  • “Review this signup form HTML and tell me if any field uses autofocus in a way that hurts screen reader users.”
  • “Check my React contact page for focus behaviour on page load.”
  • “Explain to my team why autofocus should be removed from our checkout form.”
Step-by-step guide: how to use Avoid Autofocus 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.

    autofocus-avoidance.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip autofocus-avoidance.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip autofocus-avoidance.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 or component code, not just a description, so the agent can check exact attributes.
  • Ask the agent to suggest how to verify the fix with a screen reader or browser accessibility tools, since it cannot test this itself.
  • Combine with other accessibility skills for a broader review of the same page.

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.