design-system

Name: design-system
Author: nextlevelbuilder

11kinstalls12kforks

How to install design-system?

nextlevelbuilder/ui-ux-pro-max-skill/design-system

$npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Installs into the current project.

Summary

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Files · 1

View on GitHub

SKILL.md

1	# Design System
2
3	Token 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
17	Load: `references/token-architecture.md`
18
19	### Three-Layer Structure
20
21	```
22	Primitive (raw values)
23	↓
24	Semantic (purpose aliases)
25	↓
26	Component (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	## Quick Start
42
43	Generate tokens:
44	```bash
45	node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
46	```
47
48	Validate usage:
49	```bash
50	node scripts/validate-tokens.cjs --dir src/
51	```
52
53	## References
54
55	\| Topic \| File \|
56	\|-------\|------\|
57	\| Token Architecture \| `references/token-architecture.md` \|
58	\| Primitive Tokens \| `references/primitive-tokens.md` \|
59	\| Semantic Tokens \| `references/semantic-tokens.md` \|
60	\| Component Tokens \| `references/component-tokens.md` \|
61	\| Component Specs \| `references/component-specs.md` \|
62	\| States & Variants \| `references/states-and-variants.md` \|
63	\| Tailwind Integration \| `references/tailwind-integration.md` \|
64
65	## Component Spec Pattern
66
67	\| Property \| Default \| Hover \| Active \| Disabled \|
68	\|----------\|---------\|-------\|--------\|----------\|
69	\| Background \| primary \| primary-dark \| primary-darker \| muted \|
70	\| Text \| white \| white \| white \| muted-fg \|
71	\| Border \| none \| none \| none \| muted-border \|
72	\| Shadow \| sm \| md \| none \| none \|
73
74	## Scripts
75
76	\| Script \| Purpose \|
77	\|--------\|---------\|
78	\| `generate-tokens.cjs` \| Generate CSS from JSON token config \|
79	\| `validate-tokens.cjs` \| Check for hardcoded values in code \|
80	\| `search-slides.py` \| BM25 search + contextual recommendations \|
81	\| `slide-token-validator.py` \| Validate slide HTML for token compliance \|
82	\| `fetch-background.py` \| Fetch images from Pexels/Unsplash \|
83
84	## Templates
85
86	\| Template \| Purpose \|
87	\|----------\|---------\|
88	\| `design-tokens-starter.json` \| Starter JSON with three-layer structure \|
89
90	## Integration
91
92	With brand: Extract primitives from brand colors/typography
93	With ui-styling: Component tokens → Tailwind config
94
95	Skill Dependencies: brand, ui-styling
96	Primary Agents: ui-ux-designer, frontend-developer
97
98	## Slide System
99
100	Brand-compliant presentations using design tokens + Chart.js + contextual decision system.
101
102	### Source of Truth
103
104	\| File \| Purpose \|
105	\|------\|---------\|
106	\| `docs/brand-guidelines.md` \| Brand identity, voice, colors \|
107	\| `assets/design-tokens.json` \| Token definitions (primitive→semantic→component) \|
108	\| `assets/design-tokens.css` \| CSS variables (import in slides) \|
109	\| `assets/css/slide-animations.css` \| CSS animation library \|
110
111	### Slide Search (BM25)
112
113	```bash
114	# Basic search (auto-detect domain)
115	python scripts/search-slides.py "investor pitch"
116
117	# Domain-specific search
118	python scripts/search-slides.py "problem agitation" -d copy
119	python scripts/search-slides.py "revenue growth" -d chart
120
121	# Contextual search (Premium System)
122	python scripts/search-slides.py "problem slide" --context --position 2 --total 9
123	python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
124	```
125
126	### Decision System CSVs
127
128	\| File \| Purpose \|
129	\|------\|---------\|
130	\| `data/slide-strategies.csv` \| 15 deck structures + emotion arcs + sparkline beats \|
131	\| `data/slide-layouts.csv` \| 25 layouts + component variants + animations \|
132	\| `data/slide-layout-logic.csv` \| Goal → Layout + break_pattern flag \|
133	\| `data/slide-typography.csv` \| Content type → Typography scale \|
134	\| `data/slide-color-logic.csv` \| Emotion → Color treatment \|
135	\| `data/slide-backgrounds.csv` \| Slide type → Image category (Pexels/Unsplash) \|
136	\| `data/slide-copy.csv` \| 25 copywriting formulas (PAS, AIDA, FAB) \|
137	\| `data/slide-charts.csv` \| 25 chart types with Chart.js config \|
138
139	### Contextual Decision Flow
140
141	```
142	1. Parse goal/context
143	↓
144	2. Search slide-strategies.csv → Get strategy + emotion beats
145	↓
146	3. For each slide:
147	a. Query slide-layout-logic.csv → layout + break_pattern
148	b. Query slide-typography.csv → type scale
149	c. Query slide-color-logic.csv → color treatment
150	d. Query slide-backgrounds.csv → image if needed
151	e. Apply animation class from slide-animations.css
152	↓
153	4. Generate HTML with design tokens
154	↓
155	5. Validate with slide-token-validator.py
156	```
157
158	### Pattern Breaking (Duarte Sparkline)
159
160	Premium decks alternate between emotions f

People who liked this also viewed

6 picks

Type

design-system

11kinstalls12kforks

View on GitHub

How to install design-system?

nextlevelbuilder/ui-ux-pro-max-skill/design-system

$npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design System
2
3	Token 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
17	Load: `references/token-architecture.md`
18
19	### Three-Layer Structure
20
21	```
22	Primitive (raw values)
23	↓
24	Semantic (purpose aliases)
25	↓
26	Component (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	## Quick Start
42
43	Generate tokens:
44	```bash
45	node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
46	```
47
48	Validate usage:
49	```bash
50	node scripts/validate-tokens.cjs --dir src/
51	```
52
53	## References
54
55	\| Topic \| File \|
56	\|-------\|------\|
57	\| Token Architecture \| `references/token-architecture.md` \|
58	\| Primitive Tokens \| `references/primitive-tokens.md` \|
59	\| Semantic Tokens \| `references/semantic-tokens.md` \|
60	\| Component Tokens \| `references/component-tokens.md` \|
61	\| Component Specs \| `references/component-specs.md` \|
62	\| States & Variants \| `references/states-and-variants.md` \|
63	\| Tailwind Integration \| `references/tailwind-integration.md` \|
64
65	## Component Spec Pattern
66
67	\| Property \| Default \| Hover \| Active \| Disabled \|
68	\|----------\|---------\|-------\|--------\|----------\|
69	\| Background \| primary \| primary-dark \| primary-darker \| muted \|
70	\| Text \| white \| white \| white \| muted-fg \|
71	\| Border \| none \| none \| none \| muted-border \|
72	\| Shadow \| sm \| md \| none \| none \|
73
74	## Scripts
75
76	\| Script \| Purpose \|
77	\|--------\|---------\|
78	\| `generate-tokens.cjs` \| Generate CSS from JSON token config \|
79	\| `validate-tokens.cjs` \| Check for hardcoded values in code \|
80	\| `search-slides.py` \| BM25 search + contextual recommendations \|
81	\| `slide-token-validator.py` \| Validate slide HTML for token compliance \|
82	\| `fetch-background.py` \| Fetch images from Pexels/Unsplash \|
83
84	## Templates
85
86	\| Template \| Purpose \|
87	\|----------\|---------\|
88	\| `design-tokens-starter.json` \| Starter JSON with three-layer structure \|
89
90	## Integration
91
92	With brand: Extract primitives from brand colors/typography
93	With ui-styling: Component tokens → Tailwind config
94
95	Skill Dependencies: brand, ui-styling
96	Primary Agents: ui-ux-designer, frontend-developer
97
98	## Slide System
99
100	Brand-compliant presentations using design tokens + Chart.js + contextual decision system.
101
102	### Source of Truth
103
104	\| File \| Purpose \|
105	\|------\|---------\|
106	\| `docs/brand-guidelines.md` \| Brand identity, voice, colors \|
107	\| `assets/design-tokens.json` \| Token definitions (primitive→semantic→component) \|
108	\| `assets/design-tokens.css` \| CSS variables (import in slides) \|
109	\| `assets/css/slide-animations.css` \| CSS animation library \|
110
111	### Slide Search (BM25)
112
113	```bash
114	# Basic search (auto-detect domain)
115	python scripts/search-slides.py "investor pitch"
116
117	# Domain-specific search
118	python scripts/search-slides.py "problem agitation" -d copy
119	python scripts/search-slides.py "revenue growth" -d chart
120
121	# Contextual search (Premium System)
122	python scripts/search-slides.py "problem slide" --context --position 2 --total 9
123	python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
124	```
125
126	### Decision System CSVs
127
128	\| File \| Purpose \|
129	\|------\|---------\|
130	\| `data/slide-strategies.csv` \| 15 deck structures + emotion arcs + sparkline beats \|
131	\| `data/slide-layouts.csv` \| 25 layouts + component variants + animations \|
132	\| `data/slide-layout-logic.csv` \| Goal → Layout + break_pattern flag \|
133	\| `data/slide-typography.csv` \| Content type → Typography scale \|
134	\| `data/slide-color-logic.csv` \| Emotion → Color treatment \|
135	\| `data/slide-backgrounds.csv` \| Slide type → Image category (Pexels/Unsplash) \|
136	\| `data/slide-copy.csv` \| 25 copywriting formulas (PAS, AIDA, FAB) \|
137	\| `data/slide-charts.csv` \| 25 chart types with Chart.js config \|
138
139	### Contextual Decision Flow
140
141	```
142	1. Parse goal/context
143	↓
144	2. Search slide-strategies.csv → Get strategy + emotion beats
145	↓
146	3. For each slide:
147	a. Query slide-layout-logic.csv → layout + break_pattern
148	b. Query slide-typography.csv → type scale
149	c. Query slide-color-logic.csv → color treatment
150	d. Query slide-backgrounds.csv → image if needed
151	e. Apply animation class from slide-animations.css
152	↓
153	4. Generate HTML with design tokens
154	↓
155	5. Validate with slide-token-validator.py
156	```
157
158	### Pattern Breaking (Duarte Sparkline)
159
160	Premium decks alternate between emotions f

People who liked this also viewed

6 picks

Type