Guide · Agent skill
How to use the Avoid Autofocus Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Avoid Autofocus Checker is an agent skill that tells an AI agent how to review web pages, components and form markup for autofocus on form fields. This guide explains what the skill does, how to install it, how to ask for a review in plain language, and where its limits are. By the end you will know how to get a focused accessibility review of your forms from your agent.
Avoid Autofocus Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from the page for skills/autofocus-avoidance.
- 2Choose where to install. Use ~/.claude/skills/ for personal use, .claude/skills/ for a single project, or the Claude apps upload under Settings → Capabilities → Skills.
- 3Unzip the skill. Extract the archive so the autofocus-avoidance folder with SKILL.md and references/rule.md sits in the chosen skills folder.
- 4Ask for a review. Name the form, page or component file and ask the agent to check it for autofocus issues.
- 5Read the findings. Review each flagged element, its explanation and the suggested fix.
- 6Verify the fix. Confirm the change with browser accessibility tooling or assistive technology, as the skill recommends.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent reads when a task matches the skill's description. This one is named autofocus-avoidance and is in the accessibility category.
Once installed, the agent reviews rendered HTML, interactive components and form markup with an accessibility lens, looking for autofocus on form fields. It flags cases where page load would move focus past content users have not read yet, explains why this confuses screen reader users, and suggests setting focus after a user action instead.
- Searches for autofocus attributes on form elements
- Checks whether page load pulls focus away from the top of the page
- Explains the impact on screen reader users and unexpected scrolling
- Recommends removing autofocus, or using JavaScript focus after user interaction
Install the Avoid Autofocus Checker skill
Download the ZIP for this skill from the page. Then choose one of the following options.
For a personal install, unzip it into ~/.claude/skills/. For a project install, unzip it into the .claude/skills/ folder of your project. You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill's description covers reviewing rendered HTML, interactive components and design-system patterns related to autofocus on form fields, so ask for that kind of review in ordinary language. Naming the file or component helps the agent find the right code.
The skill is meant for reviewing, so phrase requests as checks on existing markup or components.
- Review the signup form in src/components/SignupForm.html for autofocus issues
- Check our login page markup for autofocus and tell me if it hurts screen reader users
- Does this modal's input field use autofocus in a way that affects focus flow?
- Audit the autofocus usage across our design-system form components
What to expect from a review
The source describes a checklist the agent follows. It searches for autofocus attributes on form elements, verifies that page load does not unexpectedly move focus away from the top of the page, and then explains the problem. Where content sits before the form, the skill treats autofocus as a likely issue.
The fix it recommends is to remove the autofocus attribute and, if focus management is needed, to set focus with JavaScript after the user acts. The skill also notes how to verify the fix with browser accessibility tooling or assistive technology.
- Flags the exact element and its attributes
- Explains the screen reader impact in plain terms
- Suggests a fix and how to check it
<input type="email" placeholder="Email">Know the limits and exceptions
The skill is a guided review checklist. It is not an automated testing tool: it guides the agent's reading of code and does not run a browser or scanner. For compliance work, you still need proper audit tooling and manual testing with assistive technology.
Login and search-only pages are listed as exceptions where autofocus may be acceptable, so expect the agent to weigh context rather than flag every autofocus.
- Not an automated compliance audit
- Does not run a browser or scanner
- Login and search-only pages may be acceptable exceptions
Safety notes: scripts and network access
This skill requires nothing listed, runs no scripts and uses no network access. It consists of instructions and a reference document (references/rule.md) that the agent reads.
Because it does not run code, the main thing to review is what you give the agent. Check the files you share, since the skill only guides how the agent reads them.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and references/rule.md
What people use it for
- Reviewing a signup form before release to find autofocus on the email field
- Checking a design-system input component for autofocus that would run on page load
- Working through an accessibility checklist across existing pages
- Deciding whether autofocus on a login or search page is an acceptable exception
Frequently asked questions
How do I install the Avoid Autofocus Checker skill?
Download the ZIP from the page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does this skill need anything else installed?
The source lists no requirements. It runs no scripts and uses no network access.
Is the Avoid Autofocus Checker free?
The skill is published under the MIT licence. The source does not state pricing beyond that.
Will it automatically scan my site for accessibility problems?
No. It is a guided review checklist that guides the agent's reading of code. It does not run a browser or scanner, so it is not an automated compliance audit.
Why is autofocus a problem for screen reader users?
Autofocus moves a screen reader user to a mid-page field without context, so they miss content above the form and do not know where they landed. The skill recommends setting focus with JavaScript after a user action instead.
When is autofocus acceptable?
The skill notes that login and search-only pages are exceptions where autofocus may be acceptable. Expect the agent to consider context before flagging these.
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 team who wants an accessibility-minded second read of forms and components for autofocus problems before release. Pick a dedicated audit tool or manual assistive technology testing if you need automated compliance results, since this skill only guides the agent's reading of code.
Download the skill