design-system-starter

# Design System Starter Build robust, scalable design systems that ensure visual consistency and exceptional user experiences. --- ## Quick Start Just describe what you need: ``` Create a design system for my React app with dark mode support ``` That's it. The skill provides tokens, components, and accessibility guidelines. --- ## Triggers | Trigger | Example | |---------|---------| | Create design system | "Create a design system for my app" | | Design tokens | "Set up design tokens for colors and spacing" | | Component architecture | "Design component structure using atomic design" | | Accessibility | "Ensure WCAG 2.1 compliance for my components" | | Dark mode | "Implement theming with dark mode support" | --- ## Quick Reference | Task | Output | |------|--------| | Design tokens | Color, typography, spacing, shadows JSON | | Component structure | Atomic design hierarchy (atoms, molecules, organisms) | | Theming | CSS variables or ThemeProvider setup | | Accessibility | WCAG 2.1 AA compliant patterns | | Documentation | Component docs with props, examples, a11y notes | --- ## 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 th...