agentsclimarketplace
Sign in

Design tokens

Skill plugin87/ux-ui-agent-skills/.claude/skills/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.From its SKILL.md

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.

SKILL.md

1.5 KB, 300 tokens by cl100k_base, 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

  1. 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).
  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 / scripts/contrast.py.
    • Multi-brand/density → theming.json.
  4. Validate: run python3 scripts/validate_tokens.py (JSON validity + alias resolution).

Output

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

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.