Skip to the rows

agentsclimarketplace

Tailwindcss accessibility

Skill fusengine/agents/plugins/tailwindcss/skills/tailwindcss-accessibility

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill tailwindcss-accessibility

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, or WCAG 2.2 AA/AAA compliance.

SKILL.md

3.5 KB, as published. Nobody here has run it

<objective> Documents Tailwind CSS v4.1 accessibility utilities: `focus-visible` for keyboard-only focus rings, `sr-only` for screen-reader-only content, `motion-safe`/`motion-reduce` for `prefers-reduced-motion` support, and touch-target/contrast-ratio patterns for WCAG 2.2 AA/AAA compliance.

Covers focus-state patterns, minimum touch target sizing (44×44px via min-h-11 min-w-11), and the 4.5:1/3:1 contrast floors — semantic HTML first, Tailwind utilities enhance rather than replace it. </objective>

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 — Not focus for interactive elements
Never hide content from screen readers — Use sr-only instead of hidden
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-label when 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

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.