Agent Native

design-tokens

This skill generates, extends, and validates design tokens in DTCG format using a 3-tier architecture of primitives, semantic, and component tokens.

by plugin87Community

Community author

Agents
Claude Code
License
MIT (permissive)
Pin
9f40d9bpinned Oct 9, 2026
Context cost
about 410 tokenswhen the skill loads
GitHub stars
1,556on plugin87/ux-ui-agent-skills
Scripts
None found

What it does

“Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.”
The author's description, from SKILL.md

Generated summary from the skill's own text

This skill generates, extends, and validates design tokens in DTCG format using a 3-tier architecture of primitives, semantic, and component tokens. It works with color palettes, typography scales, spacing, shadows, borders, and theming while ensuring accessibility compliance and consistency across brands and densities.

When to use it

  • Creating or updating design token systems with DTCG format
  • Building multi-brand theming with primitive and semantic layers
  • Generating color palettes with accessibility validation
  • Validating existing token files for JSON and alias correctness

When not to

  • When the design tokens kit files are not available locally
  • For ad-hoc color or spacing values outside a formal token system
  • When accessibility auditing is the primary goal rather than token generation

Install

These commands install from the publisher's repository and need no account.

skills CLI

npx skills add plugin87/ux-ui-agent-skills --skill design-tokens

Installs from the repository's default branch, which may have changed since the commit we checked.

GitHub CLI 2.90 or later

gh skill install plugin87/ux-ui-agent-skills design-tokens@9f40d9be7281a5247eeefd802f32e90c7bc8e523

Installs the commit we checked (9f40d9b).

Copy by hand

Download the folder at 9f40d9b and put it in .claude/skills/design-tokens for Claude Code and in .agents/skills/design-tokens for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

Skill folder on GitHub at 9f40d9b

Copy for your agent

A prompt for any coding agent. It installs this skill from GitHub at the pinned commit, copies the files as they are, and runs nothing unless you ask.

Prompt

Install the agent skill "design-tokens" by plugin87.

Source, pinned to commit 9f40d9be7281a5247eeefd802f32e90c7bc8e523:
https://github.com/plugin87/ux-ui-agent-skills/tree/9f40d9be7281a5247eeefd802f32e90c7bc8e523/.claude/skills/design-tokens

1. Download that folder at exactly this commit. Do not use the default branch.
2. Copy every file unchanged, keeping the folder structure, into .claude/skills/design-tokens/ for Claude Code and .agents/skills/design-tokens/ for Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. Create the folders if they do not exist.
3. Do not edit the files, and do not run any script in the folder unless I ask you to.
4. When you are done, list the files you copied and where you put them.

Listing and checks: https://www.agentnative.dev/skills/plugin87/design-tokens

SKILL.md at the pin

---
name: design-tokens
description: Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.
---

# Skill: Design Tokens

> **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.

Produce and maintain DTCG (`$type`/`$value`) tokens following the project's 3-tier system.

## Steps
1. Read `.claude/rules/tokens-and-color.md` → "Token System" + "Color Guidelines" and `.claude/rules/typography-and-spacing.md` for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
2. Read the relevant existing files in `tokens/` to match structure: `colors.json`, `typography.json`, `spacing.json`, `shadows.json`, `borders.json`, `breakpoints.json`, `motion.json`, `gradients.json`, `opacity.json`, `blur.json`, `sizing.json`, `states.json`, `theming.json`.
3. Generate/extend tokens:
   - Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.
   - New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the `a11y-audit` skill / `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py`.
   - Multi-brand/density → `theming.json`.
4. **Validate**: run `python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py` (JSON validity + alias resolution).

## Output
DTCG JSON. Preserve `$description` on every token. Reference, never hardcode.

From plugin87/ux-ui-agent-skills at 9f40d9b, shown as plain text under its license: MIT (permissive). The license text is in LICENSE.

View SKILL.md on GitHub at 9f40d9b

Files

1 file, 2.1 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.

Skill folder on GitHub at 9f40d9b
All Frontend and design skills

Related in Frontend and design

  • next-bundle-optimizer

    Audits Next.js applications to identify and reduce browser bundle size and initial-load work by analyzing routes, dependencies and client outputs.

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 2.3K tokens · pinned 7 days ago

  • next-cache-components-optimizer

    Optimize Next.js routes to display meaningful UI instantly on initial load or client navigation by encoding the optimization goal as a failing…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 5.6K tokens · pinned 7 days ago

  • next-partial-prefetching-adoption

    Enables Partial Prefetching in Next.js 16.3+ apps and guides adoption through auditing Link prefetch behavior, preserving UI in tests or manually, and…

    by VercelOfficial publisher

    Claude Code, Codex, Cursor +4 · about 6.7K tokens · pinned 7 days ago

  • remotion-interactivity

    This skill teaches how to structure Remotion code so the Studio IDE recognizes and makes it interactive.

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 2.4K tokens · pinned 7 days ago

  • remotion-interactivity

    This skill teaches how to structure Remotion video components to unlock Studio interactivity features like click selection, drag-and-drop, resizing, rotation…

    by RemotionOfficial publisher

    Claude Code, Codex, Cursor +3 · about 4.8K tokens · pinned 7 days ago

  • remotion-maps

    This skill enables creating map-based animations with Remotion using four different mapping libraries: Mapbox, MapLibre, MapTiler, or CesiumJS.

    by RemotionOfficial publisher

    Contains scripts

    Claude Code, Codex, Cursor +3 · about 240 tokens · pinned 7 days ago

The skills listed here are third-party software, collected from public GitHub repositories as a catalog of recent skills and provided as is. Agent Native does not write or control them and is not responsible for any harm, loss or damage caused by installing or using them. Labels and checks describe what we saw at one commit and are not a guarantee. Read a skill's files before you run it. Terms of use