focus-states

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).