React Design System and Accessibility

When to use

Invoke when integrating a design system into a React app, building the accessible component layer over headless primitives, establishing theming/dark-mode, or auditing/hardening WCAG conformance, keyboard, focus, ARIA, and i18n.

Do not use for: scaffolding or the runtime baseline (use react-app-scaffold-and-runtime), routing/route UIs structurally (use react-routing-and-rendering-strategy), state/data wiring (use react-state-management-and-data-fetching), or perf/bundle work (use react-performance-and-delivery-optimization).

Meta-framework note

This is the one React archetype meta-frameworks inherit rather than re-author. When consumed by the nextjs stack, the consumer must additionally observe React Server Component constraints: interactive primitives are client components ('use client'), the token layer must work without client JS where the architecture server-renders, and the headless library must be RSC-compatible. Those constraints are documented for the consumer here but not implemented in this base skill.

Inputs

Required:

• An existing react app scaffold (react-app-scaffold-and-runtime).
• Approved frontend-architecture.md defining the design-system seam (what the design system owns: tokens, primitives, patterns; vs what the app owns) and the accessibility target (WCAG level, keyboard/SR expectations per surface).