Help us improve
Share bugs, ideas, or general feedback.
From fuse-tailwindcss
Tailwind CSS v4.1 accessibility utilities. focus-visible, sr-only, reduced-motion, WCAG enforcement, touch targets, contrast ratios.
npx claudepluginhub fusengine/agents --plugin fuse-tailwindcssHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tailwindcss:tailwindcss-accessibilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Accessible-by-default patterns using Tailwind CSS v4.1 utility classes.
Provides Tailwind CSS patterns for WCAG 2.2 accessibility including focus rings, skip links, focus traps, target sizes, and screen reader utilities like sr-only.
Ensures WCAG 2.2 AA web accessibility: color contrast ratios (4.5:1 body text), keyboard navigation, ARIA attributes, focus indicators, screen reader support, color independence, and axe-core testing.
Provides WCAG 2.2 AA accessibility patterns for keyboard focus management, React Aria components, screen reader support, ARIA usage, focus traps, reduced motion, and cognitive inclusion. Use for compliant web apps.
Share bugs, ideas, or general feedback.
Accessible-by-default patterns using Tailwind CSS v4.1 utility classes.
Before ANY implementation, use TeamCreate to spawn 3 agents:
After implementation, run fuse-ai-pilot:sniper for validation.
| Feature | Benefit |
|---|---|
focus-visible | Keyboard-only focus rings, no mouse clutter |
sr-only | Screen reader content without visual display |
motion-safe/reduce | Respects prefers-reduced-motion |
| Utility composition | Consistent a11y patterns across components |
| CSS-first config | Centralized a11y defaults via @theme |
focus-visible — Not focus for interactive elementssr-only instead of hiddenmotion-safe:min-h-11 min-w-11 (2.75rem)<button class="focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-primary rounded-md">
Accessible Button
</button>
<span class="sr-only">Open navigation menu</span>
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
Animated content
</div>
aria-label when visual text absent| Need | Reference |
|---|---|
| Focus rings, keyboard nav | focus-patterns.md |
| sr-only, contrast, touch targets | wcag-utilities.md |