token-build
Installation
SKILL.md
Skill: Token Build
Step 0 — is the kit here? This skill reads files from the kit. Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor the plugin install, and stop. Do not guess the contents of a file you could not open.
Turn the DTCG token source of truth into platform-ready outputs. Tokens are authored once; every platform output is generated.
Steps
- Read
${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../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_SKILL_DIR}/../../../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_SKILL_DIR}/../../../tokens/*.jsonchange, run${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors with${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py.