design-tokens

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

1. 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.)