What problem does it solve? Design systems break down when token layers are conflated, component APIs grow uncontrollably with props, and accessibility is left to individual product teams. This Skill provides concrete patterns and checklists for building React component libraries that stay rethemeable, composable, and accessible over years of change. ## Core Features & Use Cases - Three-Layer Token Architecture: Separates primitive, semantic, and component tokens so dark mode requires rebinding only the semantic layer, and token names become a governed, durable contract. - Compound and Polymorphic Components: Provides context-based compound component patterns, as-prop polymorphism with forwardRef, and data-driven variant maps (cva) that keep APIs stable while allowing layout flexibility. - Accessibility as a Guarantee: Encodes rules for focus-visible styling, WCAG target sizes, required accessible names, CI contrast checks, and wrapping headless primitives for focus-managed widgets. - Use Case: A team building a shared React UI library uses the checklist to audit their Button, Select, and Dialog components, catching missing ref forwarding, boolean-prop explosion, and components reading primitive tokens directly. ## Quick Start Review my React component library against the component design system checklist and identify token layering and accessibility violations.
