Design System Creation

This creates the foundation layer for consistent UI development: color palettes, typography scales, spacing systems, and component documentation. You'd use it when starting a new product that needs design consistency or when multiple teams are building interfaces that should look and feel unified. It covers everything from CSS custom properties and design tokens to component variants, accessibility requirements, and governance processes. The approach is practical, starting with foundational tokens before moving to components, and includes real examples in React plus documentation templates. If you're tired of reinventing buttons and wondering why your app's spacing feels random, this gives you the structure to fix that.

Install to Claude Code

npx -y skills add secondsky/claude-skills --skill design-system-creation --agent claude-code