Design tokens css

Skill swd3k/skills/agent-skills/ui/design-tokens-css

Define and apply a small design token set (color, space, type, radius, elevation) for consistent UI. Use when starting a design system or cleaning inconsistent spacing/colors.From its SKILL.md

Install

npx -y skills add swd3k/skills --skill design-tokens-css

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

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

0.9 KB, 251 tokens by cl100k_base, as published. Nobody here has run it

Design Tokens (CSS)

Minimal set

Color: bg, surface, text, muted, accent, danger, success, border
Space: 4, 8, 12, 16, 24, 32, 48
Type: 12, 14, 16, 20, 28 / weights 400–700
Radius: 6, 10, 14, full
Elevation: e1 hairline, e2 soft shadow
Motion: 120ms, 200ms, 320ms — ease-out

Usage

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elev-2);
}

Rules

No random 13px / #3a3a3a in components
Semantic names (--danger) over raw (--red-500) in app code
Document tokens in one file

Acceptance

New component can be built without new colors

What ships with it

Read from the repository

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