Can I use this for non-Tailwind projects?

While the skill uses Tailwind CSS for its examples, the core principles of semantic HTML, ARIA attributes, and keyboard navigation apply to any frontend framework.

Does it support mobile accessibility?

Yes, the principles of clear contrast, readable text, and logical navigation are essential for mobile users as well as desktop users.

Does this skill help with WCAG compliance?

Yes, it specifically targets WCAG standards by providing guidelines for color contrast, semantic structure, and keyboard accessibility.

What is the Accessibility Design Claude Code skill?

It is a specialized capability for Claude Code that provides best practices and implementation patterns for creating accessible web interfaces using React and Tailwind CSS.

How does it help with screen reader support?

The skill provides patterns for semantic HTML and ARIA (Accessible Rich Internet Applications) attributes to ensure that screen readers can accurately interpret and navigate your UI.

Accessibility Design

Name: Accessibility Design
Author: Expanly

byExpanly

设计工具

Guides the creation of inclusive, WCAG-compliant React interfaces using Tailwind CSS and semantic HTML.

关于

Accessibility Design is a specialized Claude Code skill that empowers developers to build high-quality, inclusive user interfaces. It provides domain-specific guidance on meeting WCAG standards, ensuring that React components are accessible to users of all abilities. The skill covers critical implementation details including WCAG-compliant color contrast ratios, robust keyboard navigation patterns, proper semantic HTML structure, and ARIA attributes for screen reader support. Whether you're building complex interactive components or simple content pages, this skill ensures your frontend work is accessible, professional, and compliant without sacrificing modern design aesthetics.

主要功能

Motion Preference & Reduced Motion Support
WCAG 2.1 Color Contrast Auditing
Semantic HTML & ARIA Pattern Guidance
0 GitHub stars
Accessible Keyboard Navigation Implementation
Interactive Accessibility Compliance Checklist

使用场景

Refactoring existing React components to meet accessibility compliance standards
Designing keyboard-accessible navigation menus and interactive UI elements
Implementing proper focus management and ARIA states for complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expanly/expanly-claude-code-agents accessibility-design

For use in Claude.ai and ChatGPT

Download Skill

GitHub

关于