design-tokens
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.
How do I install this agent skill?
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-tokensIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill facilitates design token management by reading local project configuration files and executing validation scripts. It presents a low risk of indirect prompt injection through the ingestion of untrusted project data.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
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_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor 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
- Read
.claude/rules/tokens-and-color.md→ "Token System" + "Color Guidelines" and.claude/rules/typography-and-spacing.mdfor 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-auditskill /${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py. - Multi-brand/density →
theming.json.
- 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.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/plugin87/ux-ui-agent-skills/design-tokens">View design-tokens on skillZs</a>