What problem does it solve? Building consistent, maintainable UI foundations across web and mobile applications requires solving recurring challenges: managing design tokens across platforms, implementing light/dark theme switching without flash-of-unstyled-content, and architecting reusable component APIs. This Skill provides production-tested patterns for each of these problems. ## Core Features & Use Cases - Design Token Architecture: Establish a three-layer token hierarchy (primitive, semantic, component) with naming conventions, JSON token definitions, and Style Dictionary pipelines that output CSS, SCSS, iOS Swift, and Android XML. - Theming Infrastructure: Implement React theme providers with system preference detection, localStorage persistence, multi-brand theming via data attributes, and accessibility support for reduced motion and high contrast modes. - Component Architecture Patterns: Build compound components, polymorphic components with the as prop, slot-based composition, headless UI hooks, and type-safe variant systems using class-variance-authority. - Use Case: When setting up a new component library, use this Skill to define semantic color tokens for light and dark themes, wire up a ThemeProvider with SSR-safe initialization, and create a Button component with CVA variants. ## Quick Start Ask the AI to create a design token hierarchy with light and dark semantic themes and a React ThemeProvider that persists the user's preference.
