How do I install the Design Tokens Skill skill?

Run npx skillmds add podo/design-tokens-skill in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Tokens Skill safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls, reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Tokens Skill?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Tokens Skill free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Tokens Skill?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Tokens Skill by podo — Agent Skill

Name: Design Tokens Skill
Rating: 4.5 (4 reviews)
Author: podo

Design Tokens Skill

Expert in the W3C DTCG token specification — token structure, color spaces (sRGB, Display P3, OKLCH), references/aliasing, theme resolvers, and tools (jq, JSONata, Terrazzo, Figma exports). The authoritative skill for design token architecture.

podo 94bceb6 2 files · 2.5 KB Updated Sep 9, 2026

File contents

design-tokens-skill

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

Decision tree

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

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

---name: design-tokens-skilldescription: Expert in the W3C DTCG token specification — token structure, color spaces (sRGB, Display P3, OKLCH), references/aliasing, theme resolvers, and tools (jq, JSONata, Terrazzo, Figma exports). The authoritative skill for design token architecture.--- # design-tokens-skill > Catalogue stub — full skill: [ilikescience/design-tokens-skill](https://github.com/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: ```bash [ -e ~/.agents/skills/design-tokens-skill ] && echo "global" || echo "project" ``` **Global** (installed with `-g`): ```bash npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -g -y ``` **Project** (installed without `-g`): ```bash 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`

Frequently asked questions