Skip to content
Get packs

Visible Focus Styles Checker

Finds CSS that hides keyboard focus outlines and proposes accessible focus rings

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

What it does

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.

Great for

  • Front-end developers who want to pass WCAG keyboard focus requirements
  • Designers and developers reviewing a component library or design system for accessibility
  • Teams auditing legacy CSS that removed default browser outlines

Skip it if

  • Projects that need a full accessibility audit covering more than focus styles, since this only covers one rule (a broader tool or expert review is needed)
  • Users who cannot read or verify the agent's CSS changes, because proposed fixes should be tested in a real browser with keyboard navigation

Try asking

  • “Review this stylesheet for outline: none declarations and suggest accessible focus rings”
  • “Check whether my custom focus ring on the nav buttons is clipped by overflow hidden”
  • “Explain the difference between :focus and :focus-visible with examples for my team”
  • “Audit our card component for focus indicators that break on mobile breakpoints”
Step-by-step guide: how to use Visible Focus Styles 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.

    focus-styles.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip focus-styles.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 or point the agent at the actual CSS files and component templates so it can find exact selectors rather than general advice.
  • Test any suggested focus ring by tabbing through the page in a browser, since the skill reasons from code and cannot see the rendered result unless you provide a screenshot.
  • Ask for the 3:1 contrast check against the adjacent background colours, using your real palette values.

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.