design-tokenslisted

This skill produces the design tokens **spec**. Run it after the brief sections and before building any components. It fills one block — `### Tokens`, the last part of `## Experience` — of the feature's `.design/YYYY-MM-DD-<slug>.md`. (An older file with a top-level `## Tokens` keeps it; write there.) Not a CSS or Tailwind file: `/build` materializes the spec into the project's stack-appropriate format. **Write only what this feature adds or changes.** A project that already has a token file and needs nothing new gets one line — name that file, write "no new tokens" — and this skill is done. Restating a palette the repo already defines creates a second source of truth that drifts the moment someone edits the real one. The full tables below are for a project that does not have a token system yet. ## Example prompts - "Set up design tokens for this project" - "Generate a token spec 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.** Scan the codebase for: - CSS variable definitions (`:root`, `[data-theme]`, custom property files) - Tailwind config (`tailwind.config.js|ts`) — especially `theme.extend` - 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`, etc. - `package.json