What problem does it solve? Expo apps often accumulate hardcoded colors, arbitrary spacing values, and inconsistent component styles across screens, making the UI look unpolished and hard to maintain. This Skill establishes a single visual source of truth through design tokens and reusable components, and audits existing apps for design-system drift. ## Core Features & Use Cases - Token Theme Setup: Creates a src/theme/ structure covering colors (platform semantic colors via Platform.select), spacing on a 4-point grid, typography ramps, radius, boxShadow strings, and motion durations. - Reusable Component Conventions: Defines a component contract with variant/size/state props, pressed-state feedback via Pressable, style overrides merged last, and rules for when a repeated view earns promotion into src/components/. - Drift Auditing: Provides grep-based checks, a per-100-SLOC scoring rubric, and an incremental adoption plan to migrate apps with hardcoded hex values, raw fontSize, and legacy shadow props. - Use Case: When an AI-generated screen uses hardcoded #5B21B6 and padding: 13, use this Skill to move those values into theme tokens and standardize the screen against the app's design system. ## Quick Start Use the expo-design-system skill to set up a token theme in src/theme and audit my screens for hardcoded style values.
