design-system-starter

1# Design System Starter
2 
3Build robust, scalable design systems that ensure visual consistency and exceptional user experiences.
4 
5---
6 
7## Quick Start
8 
9Just describe what you need:
10 
11```
12Create a design system for my React app with dark mode support
13```
14 
15That's it. The skill provides tokens, components, and accessibility guidelines.
16 
17---
18 
19## Triggers
20 
21| Trigger | Example |
22|---------|---------|
23| Create design system | "Create a design system for my app" |
24| Design tokens | "Set up design tokens for colors and spacing" |
25| Component architecture | "Design component structure using atomic design" |
26| Accessibility | "Ensure WCAG 2.1 compliance for my components" |
27| Dark mode | "Implement theming with dark mode support" |
28 
29---
30 
31## Quick Reference
32 
33| Task | Output |
34|------|--------|
35| Design tokens | Color, typography, spacing, shadows JSON |
36| Component structure | Atomic design hierarchy (atoms, molecules, organisms) |
37| Theming | CSS variables or ThemeProvider setup |
38| Accessibility | WCAG 2.1 AA compliant patterns |
39| Documentation | Component docs with props, examples, a11y notes |
40 
41---
42 
43## Bundled Resources
44 
45- `references/component-examples.md` - Complete component implementations
46- `templates/design-tokens-template.json` - W3C design token format
47- `templates/component-template.tsx` - React component template
48- `checklists/design-system-checklist.md` - Design system audit checklist
49 
50---
51 
52## Design System Philosophy
53 
54### What is a Design System?
55…