design-system-starter

# Design System Starter ## Overview This skill provides comprehensive guidance for building robust, scalable design systems that ensure visual consistency, improve development velocity, and create exceptional user experiences. Whether starting from scratch or evolving an existing system, this framework helps teams design with intention and scale. **When to use this skill:** - Creating a new design system from scratch - Evolving or refactoring existing design systems - Establishing design token standards - Defining component architecture - Creating design documentation - Ensuring accessibility compliance (WCAG 2.1) - Implementing theming and dark mode **Bundled Resources:** - `references/component-examples.md` - Complete component implementations - `templates/design-tokens-template.json` - W3C design token format - `templates/component-template.tsx` - React component template - `checklists/design-system-checklist.md` - Design system audit checklist ## Design System Philosophy ### What is a Design System? A design system is more than a component library—it's a collection of: 1. **Design Tokens**: Foundational design decisions (colors, spacing, typography) 2. **Components**: Reusable UI building blocks 3. **Patterns**: Common UX solutions and compositions 4. **Guidelines**: Rules, principles, and best practices 5. **Documentation**: How to use everything effectively ### Core Principles **1. Consistency Over Creativity** - Predictable patterns reduce cognitive load - Us...