How do I install the Tailwindcss Accessibility skill?

Run npx skillmds@latest add fusengine/tailwindcss-accessibility-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwindcss Accessibility safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwindcss Accessibility?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwindcss Accessibility free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwindcss Accessibility?

fusengine (@fusengine) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwindcss Accessibility by fusengine

Name: Tailwindcss Accessibility
Author: fusengine

File contents

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.

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:

explore-codebase - Analyze existing a11y patterns
research-expert - Verify latest WCAG 2.2 guidelines
mcp__context7__query-docs - Check Tailwind CSS a11y utilities

After implementation, run 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

---name: tailwindcss-accessibility-2description: Use when implementing keyboard-accessible components, screen-reader-only content, prefers-reduced-motion support, or WCAG 2.2 AA/AAA compliance.---<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 AccessibilityAccessible-by-default patterns using Tailwind CSS v4.1 utility classes.## Agent Workflow (MANDATORY)Before ANY implementation, use `TeamCreate` to spawn 3 agents:1. **explore-codebase** - Analyze existing a11y patterns2. **research-expert** - Verify latest WCAG 2.2 guidelines3. **mcp__context7__query-docs** - Check Tailwind CSS a11y utilitiesAfter implementation, run **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 Rules1. **Always use `focus-visible`** — Not `focus` for interactive elements2. **Never hide content from screen readers** — Use `sr-only` instead of `hidden`3. **Respect motion preferences** — Wrap animations in `motion-safe:`4. **Minimum touch target 44x44px** — Use `min-h-11 min-w-11` (2.75rem)5. **Contrast ratios** — 4.5:1 for text, 3:1 for large text (WCAG AA)6. **Semantic HTML first** — Tailwind enhances, never replaces semantics---## Quick Reference### Focus States```html<button class="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-md"> Accessible Button</button>```### Screen Reader Only```html<span class="sr-only">Open navigation menu</span>```### Reduced Motion```html<div class="motion-safe:animate-bounce motion-reduce:animate-none"> Animated content</div>```---## Best Practices1. **Focus rings on all interactive elements** — Buttons, links, inputs2. **Skip links** — Add skip-to-content for keyboard navigation3. **ARIA labels** — Supplement with `aria-label` when visual text absent4. **Color is not the only indicator** — Use icons/text alongside color5. **Test with keyboard only** — Tab through entire UI flow6. **Test with screen reader** — VoiceOver (macOS), NVDA (Windows)## Reference Guide| Need | Reference ||------|-----------|| Focus rings, keyboard nav | [focus-patterns.md](references/focus-patterns.md) || sr-only, contrast, touch targets | [wcag-utilities.md](references/wcag-utilities.md) |

Frequently asked questions

Tailwindcss Accessibility