mcpField
T
token-build

token-build

github.com/plugin87Design & UI3.0k492 installsUpdated 1d ago
Repository

About token-build

token-build is a design-system skill for turning a DTCG token source into platform-ready files. It guides teams through output generation, token validation, and CI checks.

Key features

  1. 01Generates CSS, Tailwind, JS/TS, iOS, and Android outputs
  2. 02Resolves aliases and platform-specific values
  3. 03Emits theme overrides as deltas
  4. 04Validates tokens and color contrast
  5. 05Checks generated artifacts in CI

Use cases

  1. 01Generate design tokens for several platforms
  2. 02Add token regeneration and validation to CI

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill token-build

After installing, type/token-buildin Claude Code to confirm it loaded.

Details

From the project README

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_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or 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

  1. Read ${CLAUDE_SKILL_DIR}/../../../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_SKILL_DIR}/../../../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_SKILL_DIR}/../../../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_SKILL_DIR}/../../../tokens/*.json change, run ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py, regenerate, fail if committed artifacts are stale; gate colors with ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py.

Verification (definition of done)

  • python3 ${CLAUDE_SKILL_DIR}/../../../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.

Comments

Markdown supported