skills.rest
cr330326
cr330326COMMUNITY
Explore all skills by this author →
Website𝕏@RanChen724662GitHub

react-a11y

Audit React components for accessibility issues and generate fix reports with code diffs.

1|Updated Mar 18, 2026
Search Tags:#accessibility#a11y#frontend#react#audit#wcag#aria
One-click install
npx skills add https://github.com/cr330326/AgentSkill --skill react-a11y
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-a11y
Source: https://github.com/cr330326/AgentSkill/tree/main/validate/skill-generator-workspace/iteration-1/eval-6-react-a11y/without_skill/react-a11y
Command: npx skills add https://github.com/cr330326/AgentSkill --skill react-a11y

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit React components for accessibility issues and produce actionable fix-it reports with before/after code diffs.

Core Features & Use Cases

  • Comprehensive accessibility audits for ARIA, keyboard navigation, color contrast, focus management, and screen reader compatibility in React UI components.
  • Generate structured, actionable reports with concrete fix suggestions and before/after code diffs.
  • Real-world use cases include validating existing component libraries and guiding improvements for WCAG compliance.

Quick Start

Provide a React project directory or component to run an accessibility audit and generate a structured report.

Frequently Asked Questions about react-a11y

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

FAQPage Schema
How do I audit React components for WCAG compliance?▼

Audit React components for WCAG compliance by scanning your codebase to identify ARIA roles, focus management, and keyboard navigation issues, generating a structured report with actionable before/after code diffs to apply fixes.

How do I fix focus trapping and keyboard navigation issues in React modals?▼

Fix focus trapping and keyboard navigation issues in React modals by applying the generated code diffs that enforce proper ARIA roles, focus management, and screen reader compatibility recommendations aligned with WCAG standards.

Can I check screen reader compatibility and color contrast for existing React UI patterns?▼

Yes, you can check screen reader compatibility and color contrast for existing React UI patterns like tabs, dropdowns, and forms by providing the component code to generate a detailed accessibility audit artifact.

What is the best way to generate actionable ARIA role fix reports for React?▼

The best way to generate actionable ARIA role fix reports for React is to run an audit that analyzes your components and outputs before/after code diffs targeting specific accessibility issues like live regions and proper roles.

Does this accessibility audit work with my component library directory?▼

Yes, this accessibility audit works directly with your React project directory or specific component files to validate existing component libraries and guide improvements for WCAG compliance without requiring extra dependencies.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

unit-test-generator

Generate AAA-pattern unit tests with Vitest or Jest compatibility.

Community
Advanced
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

react-frontend-development

Standardize React frontend development with TypeScript, testing, and WCAG-compliant accessibility.

Community
Intermediate
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced