design-system

Name: design-system
Author: nextlevelbuilder

bynextlevelbuilder· 18 skills

Installs

13k

Stars

110k

Forks

12k

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.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/design-system"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

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 for engagement:
161	```
162	"What Is" (frustration) ↔ "What Could Be" (hope)
163	```
164
165	System calculates pattern breaks at 1/3 and 2/3 positions.
166
167	### Slide Requirements
168
169	ALL slides MUST:
170	1. Import `assets/design-tokens.css` - single source of truth
171	2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.
172	3. Use Chart.js for charts (NOT CSS-only bars)
173	4. Include navigation (keyboard arrows, click, progress bar)
174	5. Center align content
175	6. Focus on persuasion/conversion
176
177	### Chart.js Integration
178
179	```html
180	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
181
182	<canvas id="revenueChart"></canvas>
183	<script>
184	new Chart(document.getElementById('revenueChart'), {
185	type: 'line',
186	data: {
187	labels: ['Sep', 'Oct', 'Nov', 'Dec'],
188	datasets: [{
189	data: [5, 12, 28, 45],
190	borderColor: '#FF6B6B', // Use brand coral
191	backgroundColor: 'rgba(255, 107, 107, 0.1)',
192	fill: true,
193	tension: 0.4
194	}]
195	}
196	});
197	</script>
198	```
199
200	### Token Compliance
201
202	```css
203	/* CORRECT - uses token */
204	background: var(--slide-bg);
205	color: var(--color-primary);
206	font-family: var(--typography-font-heading);
207
208	/* WRONG - hardcoded */
209	background: #0D0D0D;
210	color: #FF6B6B;
211	font-family: 'Space Grotesk';
212	```
213
214	### Reference Implementation
215
216	Working example with all features:
217	```
218	assets/designs/slides/claudekit-pitch-251223.html
219	```
220
221	### Command
222
223	```bash
224	/slides:create "10-slide investor pitch for ClaudeKit Marketing"
225	```
226
227	## Best Practices
228
229	1. Never use raw hex in components - always reference tokens
230	2. Semantic layer enables theme switching (light/dark)
231	3. Component tokens enable per-component customization
232	4. Use HSL format for opacity control
233	5. Document every token's purpose
234	6. Slides must import design-tokens.css and use var() exclusively

6 picks

Type

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/design-system"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

design-system

How to install design-system?

Related

design-system

How to install design-system?

Related