skills.rest
Colten-Covington
Colten-CovingtonCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-accessibility-wcag

Implement accessible Tailwind CSS UI patterns following WCAG 2.2 AA guidelines.

Updated Feb 13, 2026
Search Tags:#accessibility#wcag#tailwind#focus management#ui patterns
One-click install
npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill tailwind-accessibility-wcag
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-accessibility-wcag
Source: https://github.com/Colten-Covington/Buzz-Stack/tree/main/.github/skills/tailwind-accessibility-wcag
Command: npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill tailwind-accessibility-wcag

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build accessible user interfaces using Tailwind CSS, ensuring compliance with WCAG 2.2 AA standards and proper focus management.

Core Features & Use Cases

  • Accessible Styling: Provides guidance on using Tailwind classes for semantic HTML and ARIA attributes.
  • Focus Management: Ensures visible focus states and avoids common pitfalls like focus:outline-none without alternatives.
  • Use Case: When implementing a new navigation component, use this Skill to ensure it has proper keyboard navigation and visible focus indicators for all interactive elements.

Quick Start

Ask for guidance on implementing accessible focus styles for a button using Tailwind CSS.

Frequently Asked Questions about tailwind-accessibility-wcag

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement accessible focus styles in Tailwind CSS without breaking WCAG compliance?▼

To implement accessible focus styles in Tailwind CSS, avoid using `focus:outline-none` without providing an alternative visible focus indicator. This Skill provides patterns adhering to WCAG 2.2 AA standards to ensure proper visible focus management for interactive elements.

What is the best way to add screen-reader-only content using Tailwind?▼

To add screen-reader-only content using Tailwind, you need specific class patterns that hide visual output while exposing text to assistive technologies. This Skill provides UI patterns to properly implement semantic HTML and ARIA attributes for screen-reader-only scenarios.

How do I ensure my Tailwind navigation component has proper keyboard navigation and ARIA attributes?▼

Ensuring proper keyboard navigation for a Tailwind component requires applying correct ARIA implementation and semantic HTML. This Skill provides accessible UI patterns specifically for building navigation components that meet WCAG 2.2 AA accessibility guidelines.

Does WCAG 2.2 AA compliance require visible focus states for all interactive Tailwind elements?▼

WCAG 2.2 AA compliance does require visible focus states for all interactive elements. This Skill offers Tailwind CSS patterns to manage focus properly and avoid common accessibility pitfalls like removing outlines without providing visible focus alternatives.

Related Skills

Explore More Software Engineering Skills→
civictechdccivictechdc
1

accessibility-compliance

Audit web and mobile UI components for WCAG 2.2 accessibility conformance.

Official
Advanced
Sir-chawakornSir-chawakorn
9

audit-accessibility-wcag

Audit and remediate JSX and HTML for WCAG 2.2 AA accessibility compliance.

Community
Advanced
japurcelljapurcell

fixing-accessibility

Identify and fix accessibility issues in UI components to meet WCAG guidelines.

Community
Intermediate
JosiahSiegelJosiahSiegel
51

tailwindcss-accessibility

Provide Tailwind CSS utility classes for WCAG 2.2 accessibility features.

Community
Intermediate