design-tokens

SKILL.md

This skill generates the foundational design tokens for a project. Run this after the design brief and before building any components. Every component built after this references these tokens instead of hardcoding values.

Example prompts

"Set up design tokens for this project"

"Generate a token system based on Dieter Rams"

"I need a spacing scale and color palette before I start building"

"Create tokens that match our brief"

Process

Check what already exists. Before generating anything, scan the codebase for:

CSS variable definitions (:root, [data-theme], custom property files)

Tailwind config (tailwind.config.js, tailwind.config.ts) and any theme extensions

Theme provider files (Material UI createTheme, Chakra extendTheme, shadcn globals.css)

Design token JSON files (Style Dictionary format, Figma token exports)

Any tokens.css, variables.css, theme.css, or similarly named files

package.json for UI framework dependencies (tailwindcss, @mui/material, @chakra-ui/react, etc.)