skills.rest
ChoreShore
ChoreShoreOFFICIAL
Explore all skills by this author →
GitHub

focus-states

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

Updated Feb 10, 2026
Search Tags:#accessibility#css#wcag#focus#tailwind#design-system#focus-ring
One-click install
npx skills add https://github.com/ChoreShore/Version1 --skill focus-states-choreshore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: focus-states
Source: https://github.com/ChoreShore/Version1/tree/main/.windsurf/skills/focus-states
Command: npx skills add https://github.com/ChoreShore/Version1 --skill focus-states-choreshore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Interactive elements often lack visible, consistent focus indicators which makes keyboard navigation and assistive use difficult and causes WCAG failures; this skill provides practical, design-aligned focus styles so users can always perceive and follow keyboard focus.

Core Features & Use Cases

  • WCAG-aligned guidance: Recommendations and safe color combinations mapped to WCAG 2.4.7 and 2.4.11 to ensure visible focus and sufficient contrast.
  • Style options & tokens: Produces focus tokens (color, width, offset, style) and guidance for ring, glow, underline, inset, and offset approaches to fit brand aesthetics.
  • Implementation patterns: Concrete CSS and Tailwind utility patterns, component-specific rules, and dark-mode adjustments for consistent cross-theme behavior.
  • Testing & fixes: Keyboard testing checklist and common fixes for problems like hidden rings, sticky headers, and modal focus management.

Quick Start

Generate WCAG-compliant focus styles by supplying your primary and background colors and selecting a preferred style (ring, glow, underline, or hybrid).

Frequently Asked Questions about focus-states

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

FAQPage Schema
How do I make accessible WCAG-compliant focus indicators in CSS?▼

Accessible focus indicators in CSS require a visible focus state with a minimum 2px perimeter and 3:1 contrast against backgrounds. You can implement these styles using ring, glow, underline, or hybrid approaches to meet WCAG 2.4.7 and 2.4.11 requirements.

Why are my focus rings invisible during keyboard navigation?▼

Invisible focus rings during keyboard navigation often stem from default outline removal without replacement or low contrast against backgrounds. You can fix this by applying focus tokens with sufficient offset and 3:1 contrast, or addressing sticky headers and modal focus management.

Can I generate Tailwind focus utilities for dark mode?▼

Yes, you can generate Tailwind focus utilities with dark mode adjustments by supplying primary and background colors. This produces component-specific rules and focus tokens that ensure consistent cross-theme behavior for keyboard navigation and interactive elements.

What is the minimum contrast ratio for focus indicators?▼

The minimum contrast ratio for focus indicators is 3:1 against adjacent colors, accompanied by a minimum 2px perimeter. These specifications align with WCAG 2.4.7 and 2.4.11 requirements to ensure visible focus for keyboard navigation and assistive use.

What's the best way to implement focus styles for a design system?▼

Implementing focus styles for a design system involves generating reusable focus tokens for color, width, offset, and style. You can map these tokens to safe color combinations and component-specific CSS rules to maintain brand aesthetics while resolving invisible focus issues.

How do I test keyboard navigation and focus management?▼

Testing keyboard navigation requires verifying that interactive elements maintain visible focus with 3:1 contrast and a 2px perimeter. You should use a keyboard testing checklist to identify hidden rings, sticky header obstructions, and modal focus management problems.

Related Skills

Explore More Design & Creative Skills→
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
lugassawanlugassawan
2

principle-accessibility

Apply WCAG 2.2 AA semantic HTML, ARIA, and keyboard focus requirements to UI code reviews.

Community
Basic
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate
fusenginefusengine
22

tailwindcss-borders

Style borders, outlines, rings, and dividers with Tailwind CSS v4.1 utilities.

Community
Intermediate