Apply a DESIGN.md design system to the project's existing CSS/style files. Triggers on: "implement the design system", "apply design system", "set up design tokens", "apply DESIGN.md", or /design-systems:implement. Reads DESIGN.md, detects the project's CSS framework, and updates style files with design tokens.
From design-systemsnpx claudepluginhub aaronbassett/agent-foundry --plugin design-systemsThis skill uses the workspace's default tool permissions.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Calculates TAM/SAM/SOM using top-down, bottom-up, and value theory methodologies for market sizing, revenue estimation, and startup validation.
Read DESIGN.md and apply its tokens to the project's existing style files.
Find DESIGN.md using this search order:
src/, packages/*//design-systems:create first."Use Glob to search: **/DESIGN.md
Extract all implementable tokens from DESIGN.md:
Scan the project for the styling approach:
| Indicator | Framework | Token Format |
|---|---|---|
tailwind.config.* present | Tailwind CSS | Extend theme in config file |
*.module.css or *.module.scss files | CSS Modules | CSS custom properties in global stylesheet |
styled-components or @emotion in package.json | CSS-in-JS | Theme object exported from a theme file |
*.css or *.scss files present | Vanilla CSS/SCSS | CSS custom properties in a variables file |
*.vue files with <style> blocks | Vue SFC | CSS custom properties in global stylesheet |
*.svelte files with <style> blocks | Svelte | CSS custom properties in global stylesheet |
| None detected | Unknown | Ask user; default to CSS custom properties |
Use Glob to detect: **/tailwind.config.*, **/*.module.css,
**/*.module.scss, **/*.vue, **/*.svelte.
Use Grep to check package.json for styled-components or @emotion.
Based on the detected framework:
CSS Custom Properties (default for vanilla CSS, CSS Modules, Vue, Svelte):
Create or update a tokens file with all design tokens:
:root {
/* Colors — Surface */
--surface: #value;
--surface-dim: #value;
--surface-bright: #value;
--surface-container-lowest: #value;
--surface-container-low: #value;
--surface-container: #value;
--surface-container-high: #value;
--surface-container-highest: #value;
/* Colors — Primary */
--primary: #value;
--primary-container: #value;
--on-primary: #value;
--on-primary-container: #value;
/* Colors — Secondary */
--secondary: #value;
--secondary-container: #value;
--on-secondary: #value;
--on-secondary-container: #value;
/* Colors — Tertiary */
--tertiary: #value;
--tertiary-container: #value;
--on-tertiary: #value;
--on-tertiary-container: #value;
/* Colors — Outline */
--outline: #value;
--outline-variant: #value;
/* Colors — On Surface */
--on-surface: #value;
--on-surface-variant: #value;
/* Typography */
--font-display: 'Font Name', fallback;
--font-body: 'Font Name', fallback;
--font-mono: 'Font Name', monospace;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
/* ... all spacing tokens ... */
/* Shadows */
--shadow-sm: /* value */;
--shadow-md: /* value */;
--shadow-lg: /* value */;
/* Radius */
--radius-sm: /* value */;
--radius-md: /* value */;
--radius-lg: /* value */;
}
Place the tokens file at:
variables.css, _variables.scss, or similar exists: update itdesign-tokens.css next to DESIGN.mdTailwind CSS:
Extend the existing tailwind.config.* file's theme:
// Add to theme.extend
colors: {
surface: { DEFAULT: '#value', dim: '#value', bright: '#value', ... },
primary: { DEFAULT: '#value', container: '#value' },
// ... map all color tokens
},
fontFamily: {
display: ['Font Name', 'fallback'],
body: ['Font Name', 'fallback'],
mono: ['Font Name', 'monospace'],
},
spacing: {
// ... map spacing scale
},
boxShadow: {
// ... map shadow tokens
},
borderRadius: {
// ... map radius tokens
},
CSS-in-JS (styled-components, emotion):
Create or update a theme file:
export const theme = {
colors: {
surface: { default: '#value', dim: '#value', ... },
primary: { default: '#value', container: '#value' },
// ...
},
fonts: {
display: "'Font Name', fallback",
body: "'Font Name', fallback",
mono: "'Font Name', monospace",
},
spacing: { ... },
shadows: { ... },
radii: { ... },
} as const;
If existing CSS files contain hardcoded values that match DESIGN.md tokens, offer to replace them with variable references. Show the user what will change:
Found 12 hardcoded values matching design tokens:
- src/styles/global.css:14 — #1a1a1a → var(--surface)
- src/styles/global.css:28 — #0052FF → var(--primary)
...
Replace these with token references? [y/n]
Tell the user:
/design-systems:review to verify your existing code matches the new tokens"After completing the implementation, follow these rules for the rest of the session when writing any UI code: