Design System Architect

This one walks you through building a production design system from tokens to components. It starts with the fundamentals: setting up design tokens with Style Dictionary, structuring primitives vs semantic values, and handling theme switching. Then it moves into atomic design patterns with practical component architecture, complete with TypeScript types and folder structures. The coverage of token transformation is especially solid, showing how raw JSON becomes CSS variables and JavaScript exports. If you're inheriting a mess of inconsistent components or starting a system from scratch, this gives you the blueprints. It's opinionated about structure but flexible enough to adapt, and the examples are concrete enough to copy and modify immediately.

Install to Claude Code

npx -y skills add daffy0208/ai-dev-standards --skill design-system-architect --agent claude-code