assembling-components

Name: assembling-components
Author: ancoleman

49installs59forks

How to install assembling-components?

ancoleman/ai-design-components/assembling-components

$npx -y skills add ancoleman/ai-design-components --skill assembling-components

Installs into the current project.

Summary

Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz,

Files · 1

View on GitHub

SKILL.md

1	# Assembling Components
2
3	## Purpose
4
5	This skill transforms the outputs of AI Design Components skills into production-ready applications. It provides library-specific context for our token system, component patterns, and skill chain workflow - knowledge that generic assembly patterns cannot provide. The skill validates token integration, generates proper scaffolding, and wires components together correctly.
6
7	## When to Use
8
9	Activate this skill when:
10	- Completing a skill chain workflow (theming → layout → dashboards → data-viz → feedback)
11	- Generating new project scaffolding for React/Vite, Next.js, FastAPI, Flask, or Rust/Axum
12	- Validating that all generated CSS uses design tokens (not hardcoded values)
13	- Creating barrel exports and wiring component imports correctly
14	- Assembling components from multiple skills into a unified application
15	- Debugging integration issues (missing entry points, broken imports, theme not switching)
16	- Preparing generated code for production deployment
17
18	## Skill Chain Context
19
20	This skill understands the output of every AI Design Components skill:
21
22	```
23	┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
24	│ theming- │────▶│ designing- │────▶│ creating- │
25	│ components │ │ layouts │ │ dashboards │
26	└──────────────────┘ └──────────────────┘ └──────────────────┘
27	│ │ │
28	▼ ▼ ▼
29	tokens.css Layout.tsx Dashboard.tsx
30	theme-provider.tsx Header.tsx KPICard.tsx
31	│ │ │
32	└────────────────────────┴────────────────────────┘
33	│
34	▼
35	┌──────────────────────┐
36	│ visualizing-data │
37	│ providing-feedback │
38	└──────────────────────┘
39	│
40	▼
41	DonutChart.tsx
42	Toast.tsx, Spinner.tsx
43	│
44	▼
45	┌──────────────────────┐
46	│ ASSEMBLING- │
47	│ COMPONENTS │
48	│ (THIS SKILL) │
49	└──────────────────────┘
50	│
51	▼
52	WORKING COMPONENT SYSTEM
53	```
54
55	### Expected Outputs by Skill
56
57	\| Skill \| Primary Outputs \| Token Dependencies \|
58	\|-------\|-----------------\|-------------------\|
59	\| `theming-components` \| tokens.css, theme-provider.tsx \| Foundation \|
60	\| `designing-layouts` \| Layout.tsx, Header.tsx, Sidebar.tsx \| --spacing-, --color-border- \|
61	\| `creating-dashboards` \| Dashboard.tsx, KPICard.tsx \| All layout + chart tokens \|
62	\| `visualizing-data` \| Chart components, legends \| --chart-color-, --font-size- \|
63	\| `building-forms` \| Form inputs, validation \| --spacing-, --radius-, --color-error \|
64	\| `building-tables` \| Table, pagination \| --color-, --spacing- \|
65	\| `providing-feedback` \| Toast, Spinner, EmptyState \| --color-success/error/warning \|
66
67	## Token Validation
68
69	### Run Validation Script (Token-Free Execution)
70
71	```bash
72	# Basic validation
73	python scripts/validate_tokens.py src/styles
74
75	# Strict mode with fix suggestions
76	python scripts/validate_tokens.py src --strict --fix-suggestions
77
78	# JSON output for CI/CD
79	python scripts/validate_tokens.py src --json
80	```
81
82	### Our Token Naming Conventions
83
84	```css
85	/* Colors - semantic naming */
86	--color-primary: #FA582D; /* Brand primary */
87	--color-success: #00CC66; /* Positive states */
88	--color-warning: #FFCB06; /* Caution states */
89	--color-error: #C84727; /* Error states */
90	--color-info: #00C0E8; /* Informational */
91
92	--color-bg-primary: #FFFFFF; /* Main background */
93	--color-bg-secondary: #F8FAFC; /* Elevated surfaces */
94	--color-text-primary: #1E293B; /* Body text */
95	--color-text-secondary: #64748B; /* Muted text */
96
97	/* Spacing - 4px base unit */
98	--spacing-xs: 0.25rem; /* 4px */
99	--spacing-sm: 0.5rem; /* 8px */
100	--spacing-md: 1rem; /* 16px */
101	--spacing-lg: 1.5rem; /* 24px */
102	--spacing-xl: 2rem; /* 32px */
103
104	/* Typography */
105	--font-size-xs: 0.75rem; /* 12px */
106	--font-size-sm: 0.875rem; /* 14px */
107	--font-size-base: 1rem; /* 16px */
108	--font-size-lg: 1.125rem; /* 18px */
109
110	/* Component sizes */
111	--icon-size

People who liked this also viewed

6 picks

Type

assembling-components

49installs59forks

View on GitHub

How to install assembling-components?

ancoleman/ai-design-components/assembling-components

$npx -y skills add ancoleman/ai-design-components --skill assembling-components

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Assembling Components
2
3	## Purpose
4
5	This skill transforms the outputs of AI Design Components skills into production-ready applications. It provides library-specific context for our token system, component patterns, and skill chain workflow - knowledge that generic assembly patterns cannot provide. The skill validates token integration, generates proper scaffolding, and wires components together correctly.
6
7	## When to Use
8
9	Activate this skill when:
10	- Completing a skill chain workflow (theming → layout → dashboards → data-viz → feedback)
11	- Generating new project scaffolding for React/Vite, Next.js, FastAPI, Flask, or Rust/Axum
12	- Validating that all generated CSS uses design tokens (not hardcoded values)
13	- Creating barrel exports and wiring component imports correctly
14	- Assembling components from multiple skills into a unified application
15	- Debugging integration issues (missing entry points, broken imports, theme not switching)
16	- Preparing generated code for production deployment
17
18	## Skill Chain Context
19
20	This skill understands the output of every AI Design Components skill:
21
22	```
23	┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
24	│ theming- │────▶│ designing- │────▶│ creating- │
25	│ components │ │ layouts │ │ dashboards │
26	└──────────────────┘ └──────────────────┘ └──────────────────┘
27	│ │ │
28	▼ ▼ ▼
29	tokens.css Layout.tsx Dashboard.tsx
30	theme-provider.tsx Header.tsx KPICard.tsx
31	│ │ │
32	└────────────────────────┴────────────────────────┘
33	│
34	▼
35	┌──────────────────────┐
36	│ visualizing-data │
37	│ providing-feedback │
38	└──────────────────────┘
39	│
40	▼
41	DonutChart.tsx
42	Toast.tsx, Spinner.tsx
43	│
44	▼
45	┌──────────────────────┐
46	│ ASSEMBLING- │
47	│ COMPONENTS │
48	│ (THIS SKILL) │
49	└──────────────────────┘
50	│
51	▼
52	WORKING COMPONENT SYSTEM
53	```
54
55	### Expected Outputs by Skill
56
57	\| Skill \| Primary Outputs \| Token Dependencies \|
58	\|-------\|-----------------\|-------------------\|
59	\| `theming-components` \| tokens.css, theme-provider.tsx \| Foundation \|
60	\| `designing-layouts` \| Layout.tsx, Header.tsx, Sidebar.tsx \| --spacing-, --color-border- \|
61	\| `creating-dashboards` \| Dashboard.tsx, KPICard.tsx \| All layout + chart tokens \|
62	\| `visualizing-data` \| Chart components, legends \| --chart-color-, --font-size- \|
63	\| `building-forms` \| Form inputs, validation \| --spacing-, --radius-, --color-error \|
64	\| `building-tables` \| Table, pagination \| --color-, --spacing- \|
65	\| `providing-feedback` \| Toast, Spinner, EmptyState \| --color-success/error/warning \|
66
67	## Token Validation
68
69	### Run Validation Script (Token-Free Execution)
70
71	```bash
72	# Basic validation
73	python scripts/validate_tokens.py src/styles
74
75	# Strict mode with fix suggestions
76	python scripts/validate_tokens.py src --strict --fix-suggestions
77
78	# JSON output for CI/CD
79	python scripts/validate_tokens.py src --json
80	```
81
82	### Our Token Naming Conventions
83
84	```css
85	/* Colors - semantic naming */
86	--color-primary: #FA582D; /* Brand primary */
87	--color-success: #00CC66; /* Positive states */
88	--color-warning: #FFCB06; /* Caution states */
89	--color-error: #C84727; /* Error states */
90	--color-info: #00C0E8; /* Informational */
91
92	--color-bg-primary: #FFFFFF; /* Main background */
93	--color-bg-secondary: #F8FAFC; /* Elevated surfaces */
94	--color-text-primary: #1E293B; /* Body text */
95	--color-text-secondary: #64748B; /* Muted text */
96
97	/* Spacing - 4px base unit */
98	--spacing-xs: 0.25rem; /* 4px */
99	--spacing-sm: 0.5rem; /* 8px */
100	--spacing-md: 1rem; /* 16px */
101	--spacing-lg: 1.5rem; /* 24px */
102	--spacing-xl: 2rem; /* 32px */
103
104	/* Typography */
105	--font-size-xs: 0.75rem; /* 12px */
106	--font-size-sm: 0.875rem; /* 14px */
107	--font-size-base: 1rem; /* 16px */
108	--font-size-lg: 1.125rem; /* 18px */
109
110	/* Component sizes */
111	--icon-size

People who liked this also viewed

6 picks

Type