skills.rest
dylantarre
dylantarreCOMMUNITY
Explore all skills by this author →
Website𝕏@beatthetarGitHub

focus-states

Generate accessible focus indicators and configurable CSS tokens for UI elements.

38|3|Updated Dec 29, 2025
Search Tags:#a11y#WCAG#CSS#tokens#UI-accessibility#focus-visible
One-click install
npx skills add https://github.com/dylantarre/design-system-skills --skill focus-states
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: focus-states
Source: https://github.com/dylantarre/design-system-skills/tree/main/skills/accessibility/focus-states
Command: npx skills add https://github.com/dylantarre/design-system-skills --skill focus-states

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent focus visuals hinder keyboard users and accessibility audits.

Core Features & Use Cases

  • Focus token generation: Create a configurable focus ring across components (buttons, inputs, links).
  • Utility classes & tokens: Provide CSS variables and Tailwind utilities for consistent focus styling.
  • Use Case: Imagine a design system with a modal and navigation; apply the focus-states to ensure visibility across themes and contrasts.

Quick Start

Use the focus-states skill to generate accessible focus indicators and tokens for your project.

Frequently Asked Questions about focus-states

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate accessible focus indicators for keyboard navigation?▼

Generate accessible focus indicators by applying configurable CSS tokens and utility classes for consistent focus-visible styling. This ensures interactive UI elements like buttons and inputs maintain visible focus rings across keyboard navigation scenarios.

What is focus-visible styling and when do I need it for UI accessibility?▼

Focus-visible styling targets keyboard users specifically, displaying focus rings only during keyboard navigation rather than mouse clicks. You need it to meet WCAG 2.4.7 accessibility requirements and ensure consistent focus indicators across light and dark modes.

Does this approach support generating focus tokens for Tailwind utilities?▼

Yes, this approach provides CSS variables and Tailwind utilities for consistent focus styling. It generates configurable focus tokens that can be applied across components like buttons, inputs, and links within a design system.

How do I meet WCAG 2.4.7 and 2.4.11 requirements for focus states?▼

Meet WCAG 2.4.7 and 2.4.11 requirements by implementing configurable focus indicators that guarantee visibility across both light and dark modes. The generated tokens and utilities ensure focus rings remain clearly visible against varying theme contrasts.

Why does my focus ring disappear in dark mode and how can I fix it?▼

Focus rings often disappear in dark mode due to insufficient contrast between the ring and background colors. Fix this by using configurable focus tokens designed to maintain visibility across both light and dark mode themes, satisfying WCAG contrast requirements.

Related Skills

Explore More Design & Creative Skills→
ChoreShoreChoreShore

focus-states

Generate WCAG-compliant focus indicators with CSS variables and Tailwind utilities.

Official
Intermediate
erp-mafiaerp-mafia
209

swarm-a11y-agent

Audit Next.js/React frontend code for WCAG AA accessibility compliance.

Official
Advanced
markus41markus41
18

css-generation

Generate CSS variables, Tailwind configurations, and styled-components themes from design tokens.

Community
Intermediate
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate