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 toshadcn-ui-design.
Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.
Steps
- Read
.claude/skills/_ux-ui-shared/workflows/token-build.md(architecture, tool options, resolution rules, output targets, CI). - 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). - 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. - Generate the requested target(s): CSS
:rootvars, Tailwind v4@theme, typed JS/TS, iOS Asset Catalog +Color.DS/Spacing, Androidcolors.xml/Compose theme. - Wire CI: on
.claude/skills/_ux-ui-shared/tokens/*.jsonchange, 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.pypasses (no unresolved aliases).- Regenerating produces no diff vs. committed artifacts.
- Dark/brand/density outputs contain only deltas, not full duplicates.