Design tokens

Skill plugin87/ux-ui-agent-skills/.claude/skills/design-tokens

Turn Claude into a Senior Design Architect — DTCG design tokens, 42 components, WCAG 2.2 accessibility, any-framework code, 138 design systems, and runnable skills.

Install

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

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

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

1.5 KB, as published. Nobody here has run it

Skill: Design Tokens

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

Steps

Read CLAUDE.md → "Token System" + "Color/Typography/Spacing Guidelines" for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
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.
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 / scripts/contrast.py.
- Multi-brand/density → theming.json.
Validate: run python3 scripts/validate_tokens.py (JSON validity + alias resolution).

Output