What problem does it solve? Design systems decay when developers hardcode hex colors, skip dark-theme overrides, or let components reference undefined CSS variables that silently break styling. This Skill guards the react-basics-ui token funnel (primitive → semantic) and the primitive component layer so visual decisions stay coherent across themes. ## Core Features & Use Cases - Token governance: Enforces the one-way tier funnel where components consume only --semantic-* tokens, never raw values or --primitive-* references, and treats the legacy --component-* tier as frozen. - New token checklist: Walks through the five required steps when adding a semantic token — primitive, semantic definition, [data-theme="dark"] override, TypeScript mirror in src/tokens/index.ts, and an actual consumer. - Four audit commands: Provides grep-based audits for hardcoded colors, primitive-tier leaks, missing dark overrides, and dangling var() references that silently invalidate declarations. - Use Case: While reviewing a new Badge component, you run the primitive-leak audit, find a var(--primitive-color-gold-500) reference, and route it through a new semantic token with a dark override instead. ## Quick Start Audit src/components for hardcoded colors, primitive token leaks, and dangling CSS variable references, then fix each violation by routing it through the semantic token tier.
