design-system

1# Design System
2 
3Token architecture, component specifications, systematic design, slide generation.
4 
5## When to Use
6 
7- Design token creation
8- Component state definitions
9- CSS variable systems
10- Spacing/typography scales
11- Design-to-code handoff
12- Tailwind theme configuration
13- **Slide/presentation generation**
14 
15## Token Architecture
16 
17Load: `references/token-architecture.md`
18 
19### Three-Layer Structure
20 
21```
22Primitive (raw values)
23       ↓
24Semantic (purpose aliases)
25       ↓
26Component (component-specific)
27```
28 
29**Example:**
30```css
31/* Primitive */
32--color-blue-600: #2563EB;
33 
34/* Semantic */
35--color-primary: var(--color-blue-600);
36 
37/* Component */
38--button-bg: var(--color-primary);
39```
40 
41## Script Paths
42 
43Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.
44 
45## Quick Start
46 
47**Generate tokens:**
48```bash
49node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
50```
51 
52**Validate usage:**
53```bash
54node scripts/validate-tokens.cjs --dir src/
55```
56 
57## References
58 
59| Topic | File |
60…