design-tokens-skill

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