#What it does

The /design-tokens skill scans your codebase for hardcoded design values -- colors, spacing, typography, shadows, border radii -- and organizes them into a centralized token system. It eliminates the scattered #3b82f6 and padding: 24px values hiding in your components and replaces them with semantic, reusable tokens.

#How to use

/design-tokens

Run at the project root. It scans your styles, Tailwind config, CSS files, and inline styles.

#Workflow

1. Extract -- Finds every hardcoded design value across CSS, Tailwind classes, styled-components, and inline styles
2. Cluster -- Groups similar values (e.g., three slightly different blues that should be one)
3. Name -- Proposes semantic token names following a category-variant-state convention
4. Organize -- Generates a token file in your preferred format (CSS custom properties, Tailwind config, JSON, or TypeScript)
5. Migrate -- Optionally replaces hardcoded values with token references across the codebase

#What it produces

• Color tokens -- Primary, secondary, neutral, semantic (success, warning, error) with light/dark variants
• Spacing tokens -- Consistent scale (4px base) replacing arbitrary pixel values
• Typography tokens -- Font families, sizes, weights, and line heights as a unified scale
• Shadow tokens -- Elevation levels from subtle to prominent
• Border tokens -- Radius scale and border widths
• Motion tokens -- Duration and easing values for animations

#Example

> /design-tokens
 
## Token Extraction: 47 unique values found
 
### Colors (18 unique)
- Found 4 variations of blue: #3b82f6, #2563eb, #3b83f6, #2564eb
  Recommendation: Consolidate to `--color-primary` (#3b82f6)
 
### Spacing (12 unique)
- Found inconsistent gaps: 12px, 14px, 16px used interchangeably
  Recommendation: Standardize to `--space-4` (16px)
 
### Generated: tokens.css
:root {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  /* ... */
}