generate-tokens

Generate Tokens

Context

You are emitting a W3C Design Tokens JSON file from $ARGUMENTS (a DESIGN.md path or "current" = the most recent compose output).

Domain Context

• W3C Design Tokens spec uses { "$value": "...", "$type": "color|dimension|fontFamily|duration|..." } — follow it precisely or downstream tools break.
• Tokens group into: color, typography, spacing, radius, shadow, motion, zIndex.
• Aliases are allowed and encouraged: {color.brand.500} → referenced from button.background.

Instructions

1. Parse the source (a DESIGN.md or a design-system/MASTER.md).
2. Extract: palette (with light + dark), typography stack, type scale, spacing scale, radii, shadows, motion defaults.
3. Run:

   python scripts/generate_tokens.py <source> --out tokens/tokens.json --format w3c
   

4. The script writes a W3C-compliant JSON. Verify it by re-parsing and summarizing counts (12 colors, 6 typography variants, 8 spacing stops, 5 radii, 3 shadows, 4 motion).
5. Optionally emit sibling files with --format <target>:
   • style-dictionary → emits tokens.style-dictionary.json for Style Dictionary
   • tokens-studio → emits the Tokens Studio flavor
   • tailwind (via sibling skill generate-tailwind)
   • shadcn (via sibling skill generate-shadcn-theme)
6. Print a sample "consume from code" snippet:

   import tokens from "./tokens/tokens.json";
   const primary = tokens.color.brand["500"].$value;
   

Further Reading

• W3C Design Tokens spec
• Style Dictionary
• Tokens Studio