Guide · Agent skill
How to use the Visible Focus Styles Checker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Visible Focus Styles Checker is an agent skill, a folder of instructions that an AI coding agent loads when a task matches its description. Its job is to review your stylesheets and component styles for places where the visible outline that keyboard users rely on has been removed. This guide explains what the skill does, how to install it, how to trigger it with plain requests, and what to check in its results.
Visible Focus Styles Checkerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the focus-styles ZIP file from the skill page on this site.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside your project for project use.
- 3Or upload in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill there instead.
- 4Ask for a stylesheet review. Paste or point the agent to the CSS for a component and ask it to check for removed focus outlines.
- 5Read the findings. Check each flagged selector or declaration and confirm whether a visible :focus-visible replacement exists.
- 6Test in a browser. Apply the suggested changes and tab through the interface with a keyboard to confirm the focus ring is visible.
What an agent skill is and what this one makes the agent do
An agent skill is a set of instructions and reference files that an AI agent can read when a request fits the skill's purpose. This one is named focus-styles and is about one rule: provide visible custom focus indicators.
When installed, the agent reviews your stylesheets and component styles for places that remove the visible outline shown when someone navigates with a keyboard. It flags outline: none or outline: 0 without a replacement, and suggests :focus-visible styles with adequate size and contrast. It can also explain why focus indicators matter for accessibility and check how focus rings behave across screen sizes and states.
- Finds outline: none, outline: 0, and :focus { outline: none } in the CSS you give it
- Checks whether a replacement visible focus indicator exists
- Looks for pseudo-element focus rings that overflow: hidden could clip or that lack correct positioning
- Explains the difference between :focus and :focus-visible
How do you install the focus-styles skill?
Download the ZIP file from the skill page on this site and unzip it into a skills folder. You can install it for yourself or for a single project.
For a personal install, unzip it into ~/.claude/skills/. For a project install, unzip it into the .claude/skills/ folder inside your project. If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger the skill with natural requests?
You do not need a special command. The skill is meant for requests about stylesheets, component styles, and responsive behavior related to focus indicators. Ask for a review in ordinary language and name the file or component you care about.
Be specific about scope. Asking the agent to check one component's CSS usually gives more useful results than asking it to audit a whole project.
- Review this stylesheet for outline: none and missing focus indicators.
- Check the focus styles on my button and form input components.
- Does this CSS remove focus rings on any breakpoint or interaction state?
- Explain why my focus ring is hidden and propose a :focus-visible fix.
What does an example finding look like?
The skill's reference material includes this pattern, which removes the focus indicator for keyboard users. A review should flag it and ask whether a visible replacement exists.
The agent's proposed fix should replace outline removal on :focus with :focus-visible styles that give a clearly visible ring with appropriate contrast. The guidance it draws on asks for a focus indicator with 3:1 contrast against adjacent colours and at least a 2px solid outline with an offset.
/* Removes focus indicator, keyboard users can't see where they are */
* { outline: none; }
*:focus { outline: none; }
button:focus { outline: 0; }What does it need, and what are the safety notes?
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. It works by reading the CSS you provide and reasoning about it.
The skill covers one rule only. Its own listing says a project that needs a full accessibility audit beyond focus styles needs a broader tool or an expert review. Proposed CSS changes should be tested in a real browser with keyboard navigation before you ship them. Only use the skill if you can read and verify the changes it suggests.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Always test suggested CSS in a browser by tabbing through the interface
Tips for getting useful results
Give the agent the actual stylesheet or component styles, plus any breakpoints or states that matter. The skill's guidance asks it to check focus rings across breakpoints and interaction states, so the more context you supply, the better the review.
If a focus ring is drawn with pseudo-elements, ask the agent to confirm it is anchored to the correct positioned element and is not clipped by overflow: hidden. If your component uses a stretched-link pattern, ask whether the ring follows the real interactive element or a parent wrapper.
- Include breakpoints and states (hover, focus, active) in your request
- Ask about pseudo-element rings and overflow clipping
- Ask about stretched-link components specifically
- Re-check with a keyboard after every change
What people use it for
- Reviewing a component library or design system for removed focus outlines
- Auditing legacy CSS that removed default browser outlines
- Checking that a custom focus ring stays visible across breakpoints
- Checking a stretched-link card or a pseudo-element ring for clipping or misplacement
Frequently asked questions
How do I install the focus-styles agent skill?
Download the ZIP from the skill page and unzip it into ~/.claude/skills/ for personal use or into .claude/skills/ in a project. In the Claude apps, you can upload it under Settings → Capabilities → Skills instead.
Is the focus-styles skill free?
The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms.
Does the skill need anything installed?
Its listing shows no requirements. It does not run scripts and does not use the network, so it works by reading the CSS you give the agent.
Is this skill a full accessibility audit?
No. It covers only the visible focus indicator rule. Projects that need a full accessibility audit should use a broader tool or an expert review.
Why isn't my skill triggering when I ask about CSS?
Make the request clearly about stylesheets, component styles, or focus rings, and name the file or component. Confirm the unzipped folder sits in the correct skills directory and contains SKILL.md.
What is the difference between :focus and :focus-visible?
The skill explains that :focus applies whenever an element is focused, while :focus-visible is designed to show indicators mainly during keyboard navigation. It recommends :focus-visible for custom rings so mouse users are not shown a ring on every click.
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 reviewing CSS or a component library for removed keyboard focus outlines. Pick a broader accessibility audit tool or an expert reviewer if you need coverage beyond focus styles, and do not rely on its suggestions without testing them with a keyboard in a real browser.
Download the skill