mcpField
D
design-tokens-skill

design-tokens-skill

github.com/podoDesign & UI29178 installsUpdated 2d ago
Repository

About design-tokens-skill

design-tokens-skill provides guidance on the W3C Design Token Community Group specification and related tooling. It is for teams building or migrating token systems, including multi-theme pipelines.

Key features

  1. 01DTCG file structure and value types
  2. 02Color-space and composite-token guidance
  3. 03Token references and aliasing
  4. 04Theme resolver coverage
  5. 05Tooling with jq, JSONata, and Terrazzo
  6. 06Figma token export guidance

Use cases

  1. 01Architecting a design-token system
  2. 02Migrating tokens to DTCG format
  3. 03Configuring multi-theme token pipelines

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-tokens-skill

After installing, type/design-tokens-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-tokens-skill

Catalogue stub — full skill: ilikescience/design-tokens-skill

Decision tree

  1. Is the full skill already installed? Check whether the skill at this location still has a das: block:

    • Global: grep -q "^das:" ~/.agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • Project: grep -q "^das:" .agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • No das: block → full skill installed, invoke it and proceed
    • das: block present → go to step 2

  2. Detect scope, then install:

    To detect scope:

    [ -e ~/.agents/skills/design-tokens-skill ] && echo "global" || echo "project"

    Global (installed with -g):

    npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -g -y

    Project (installed without -g):

    npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -y

    Claude Code: send either command as a chat message starting with ! to run it without leaving the conversation.

Invoke after install

  • Skill name: design-tokens-skill
  • Triggers: "design tokens", "DTCG tokens", "W3C tokens", "Terrazzo", "token aliasing"

What it does

Deep expertise in the W3C Design Token Community Group (DTCG) specification. Covers token file structure, value types, color space handling (sRGB, Display P3, OKLCH), references and aliasing between tokens, composite tokens, theme resolvers, and the full toolchain: jq, JSONata, Terrazzo, and exporting from Figma. Use when architecting a token system, migrating tokens to DTCG format, or configuring multi-theme token pipelines.

When NOT to use

  • OKLCH color generation without token structure — use color-expert
  • Figma-specific token variables UI — use figma-variables-tokens-generator
  • Figma official operations — use figma-official-skills

Comments

Markdown supported