token-build

Installation
SKILL.md

Skill: Token Build

In this project: token source of truth = .claude/skills/_ux-ui-shared/tokens/*.json; primary build target = app/globals.css (Tailwind v4 @theme inline). Keep the blue-primary theme; building UI defers to shadcn-ui-design.

Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.

Steps

  1. Read .claude/skills/_ux-ui-shared/workflows/token-build.md (architecture, tool options, resolution rules, output targets, CI).
  2. Pick the tool: Style Dictionary (multi-platform, the default), Tokens Studio (Figma-owned tokens — pairs with figma-integration), W3C DTCG export, or a small custom script (model on .claude/skills/_ux-ui-shared/scripts/validate_tokens.py).
  3. Honor the resolution rules: resolve aliases to final values per platform; expose semantic + component tokens (primitives stay internal); emit base + dark/brand/density overrides (.claude/skills/_ux-ui-shared/tokens/theming.json) as deltas only; format by $type.
  4. Generate the requested target(s): CSS :root vars, Tailwind v4 @theme, typed JS/TS, iOS Asset Catalog + Color.DS/Spacing, Android colors.xml/Compose theme.
  5. Wire CI: on .claude/skills/_ux-ui-shared/tokens/*.json change, run .claude/skills/_ux-ui-shared/scripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors with .claude/skills/_ux-ui-shared/scripts/contrast.py.

Verification (definition of done)

  • python3 .claude/skills/_ux-ui-shared/scripts/validate_tokens.py passes (no unresolved aliases).
  • Regenerating produces no diff vs. committed artifacts.
  • Dark/brand/density outputs contain only deltas, not full duplicates.
Installs
2
First Seen
Oct 1, 2026