Design System Architect

What problem does it solves? This Skill solves the problem of inconsistent user experiences and slow development cycles by establishing a single source of truth for design and code, enabling teams to build products faster and maintain brand consistency at scale.

Core Features & Use Cases

• Design Tokens: Defines atomic design values (colors, spacing, typography) as data, ensuring platform-agnostic consistency and easy theming.
• Component Architecture: Guides the creation of a reusable component library using Atomic Design principles, complete with TypeScript types and scoped styles.
• Storybook Documentation: Sets up comprehensive, interactive documentation for all components, showcasing variants, states, and usage guidelines.

Quick Start

Fastest path to design system:

1. Create design tokens: npm install --save-dev style-dictionary
   • Define primitives (colors, spacing, typography)
   • Define semantic tokens (background-primary, text-secondary)
   • Build to CSS variables
2. Set up component library:
   • Use atomic design (atoms → molecules → organisms)
   • TypeScript for type safety
   • CSS modules for scoping
3. Add Storybook: npx storybook@latest init
   • Document all components
   • Show all variants and states
   • Add accessibility addon