skills.rest
Collins1892
Collins1892COMMUNITY
Explore all skills by this author →
GitHub

wcag

Audits React components against WCAG 2.2 AA and produces advisory accessibility reports.

Updated May 21, 2026
Search Tags:#accessibility#a11y#frontend#react#audit#wcag#radix
One-click install
npx skills add https://github.com/Collins1892/radar-practice --skill wcag-collins1892
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wcag
Source: https://github.com/Collins1892/radar-practice/tree/main/.claude/skills/wcag
Command: npx skills add https://github.com/Collins1892/radar-practice --skill wcag-collins1892

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend teams need consistent, standards-based accessibility reviews of React components, but manual WCAG 2.2 AA audits are slow, inconsistent, and easy to get wrong with Radix/shadcn primitives. This Skill provides a structured, read-only audit and build-guide workflow for the client/ React TypeScript app. ## Core Features & Use Cases - Systematic WCAG 2.2 AA audits: Works a 13-step checklist covering semantic HTML, ARIA, contrast, focus management, keyboard navigation, target size, and live regions, with findings mapped to success criteria and severity levels (Blocker/Major/Minor/Suggestion). - Dual mode operation: Runs as an audit of existing code or as a pre-build guide for new components, with repo-specific positive references and anti-patterns. - Radix/shadcn coverage matrix: Separates what Radix primitives handle (roles, focus traps, keyboard patterns) from what app code must still verify, including known gotchas like aria on SelectTrigger and autoFocus on Calendar. - Use Case: Ask for an accessibility audit of IncidentsView.tsx and receive a structured report citing line numbers, WCAG SC numbers, affected users, and suggested fixes — with no code changes applied. ## Quick Start Ask the agent to run a WCAG 2.2 AA accessibility audit on one named component or screen, such as client/src/components/IncidentsView.tsx.

Frequently Asked Questions about wcag

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

FAQPage Schema
How do I audit a React component for WCAG 2.2 AA compliance?▼

Name one component or screen and request a WCAG audit. The skill works a systematic checklist covering semantics, ARIA, contrast, focus, keyboard, and target size, then reports findings with SC numbers, severity, and suggested fixes without changing code.

What accessibility issues does Radix UI not handle automatically?▼

Radix handles roles, keyboard patterns, and focus traps, but app code must still verify visible labels, OKLCH token contrast, live regions for loading and error states, heading hierarchy, table sort announcements, and 24px target sizes.

Does this skill fix accessibility issues automatically?▼

No. It is strictly advisory and read-only: it reports findings with suggested fixes and closes with a confirmation that no code changes were made. Fixes are implemented separately, then verified with test-writing skills.

Why put aria attributes on SelectTrigger instead of Select.Root?▼

Radix Select.Root renders no DOM node, so aria attributes placed there are lost. In this repo, FormField injects aria-describedby, aria-invalid, and aria-required via cloneElement, which only works when they land on the real SelectTrigger element.

When should I use Context7 during a WCAG audit?▼

Use Context7 only when uncertain about WCAG 2.2 criteria interpretation, focus appearance or target size thresholds, ARIA live-region patterns, or Radix primitive behavior. Limit queries to three per audit and never include file contents or PII.

Related Skills

Explore More Software Engineering Skills→
ethereumethereum
6.0k

design-system

Guides UI development for the ethereum.org Next.js site using Tailwind v4, Radix, and shadcn-style primitives.

Official
Advanced
jaballerjaballer

react-testing

Set up and write Playwright and Vitest tests for React applications.

Community
Advanced
illogicalillogical

dotnet-aspire-starter

Generates . .NET Aspire scaffold with EF Core, OpenTelemetry, Polly, and VS Code templates.

Community
Advanced
bingeli1379bingeli1379
2

accessibility

Audit web accessibility for WCAG 2.1 AA compliance using axe-core and eslint-plugin-jsx-a11y.

Community
Intermediate