fusengine/tailwindcss-accessibility
plugins/tailwindcss/skills/tailwindcss-accessibility/SKILL.md
Tailwind CSS v4.1 accessibility utilities. focus-visible, sr-only, reduced-motion, WCAG enforcement, touch targets, contrast ratios. Use when: implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, WCAG 2.2 AA/AAA compliance, or accessible touch targets.
$ install --global
skillsauthnpx skillsauth add fusengine/agents tailwindcss-accessibilityInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 17, 2026, 2:41 AM17.9s3 files scanned
SKILL.md
- name:
- tailwindcss-accessibility
- description:
- Tailwind CSS v4.1 accessibility utilities. focus-visible, sr-only, reduced-motion, WCAG enforcement, touch targets, contrast ratios. Use when: implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, WCAG 2.2 AA/AAA compliance, or accessible touch targets.
- user-invocable:
- true
- references:
- references/focus-patterns.md, references/wcag-utilities.md
- related-skills:
- tailwindcss-core, react-shadcn
Tailwind CSS Accessibility
Accessible-by-default patterns using Tailwind CSS v4.1 utility classes.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Analyze existing a11y patterns
- fuse-ai-pilot:research-expert - Verify latest WCAG 2.2 guidelines
- mcp__context7__query-docs - Check Tailwind CSS a11y utilities
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Implementing keyboard-accessible interactive elements
- Adding screen reader support to visual-only content
- Respecting user motion preferences
- Ensuring sufficient color contrast ratios
- Meeting WCAG 2.2 AA/AAA compliance requirements
- Creating accessible touch targets for mobile
Why Tailwind for Accessibility
| 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 |
Critical Rules
- Always use
focus-visible— Notfocusfor interactive elements - Never hide content from screen readers — Use
sr-onlyinstead ofhidden - Respect motion preferences — Wrap animations in
motion-safe: - Minimum touch target 44x44px — Use
min-h-11 min-w-11(2.75rem) - Contrast ratios — 4.5:1 for text, 3:1 for large text (WCAG AA)
- Semantic HTML first — Tailwind enhances, never replaces semantics
Quick Reference
Focus States
<button class="focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-primary rounded-md">
Accessible Button
</button>
Screen Reader Only
<span class="sr-only">Open navigation menu</span>
Reduced Motion
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
Animated content
</div>
Best Practices
- Focus rings on all interactive elements — Buttons, links, inputs
- Skip links — Add skip-to-content for keyboard navigation
- ARIA labels — Supplement with
aria-labelwhen visual text absent - Color is not the only indicator — Use icons/text alongside color
- Test with keyboard only — Tab through entire UI flow
- Test with screen reader — VoiceOver (macOS), NVDA (Windows)
Reference Guide
| Need | Reference | |------|-----------| | Focus rings, keyboard nav | focus-patterns.md | | sr-only, contrast, touch targets | wcag-utilities.md |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026