What problem does it solve? Building a consistent UI across web and mobile products breaks down when colors, spacing, and component styles are hardcoded and scattered. This Skill provides the architecture patterns for design tokens, theming infrastructure, and component libraries so teams can maintain one scalable design system. ## Core Features & Use Cases - Design Token Architecture: Define primitive, semantic, and component token layers with CSS custom properties, including light and dark theme values. - Theme Switching Infrastructure: Implement a React ThemeProvider with system preference detection, localStorage persistence, and resolved theme state. - Component Variant Systems: Build type-safe component variants using class-variance-authority with variant and size props. - Multi-Platform Token Pipeline: Configure Style Dictionary to compile tokens into CSS, SCSS, iOS Swift, and Android XML outputs. - Use Case: A team needs dark mode across their React app. Use this Skill to set up a three-layer token hierarchy, wire up a ThemeProvider with prefers-color-scheme detection, and refactor components to consume semantic tokens instead of hardcoded hex values. ## Quick Start Set up a design token system with light and dark themes and a variant-based Button component for my React app.
