Design tokens

Skill sukirman1901/frontend-expert/skills/design-tokens

Choose and apply CSS design tokens via decision tree (project system, explicit preset, Plasma hard-gate, or scored pack preset) — colors, spacing, radius, typography; no raw hex. Use whenever building or styling any user-facing UI, page, layout, component, theme, or brand look — including chats like "bikin halaman", "styling", "warna", or "design system" even if the user never types /ui.From its SKILL.md

Install

npx -y skills add sukirman1901/frontend-expert --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

10 stars10 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

4.3 KB, as published. Nobody here has run it

Design Tokens

Overview

Enforce token-based styling. Use CSS custom properties from tokens/ presets, or the project's existing design system — never invent raw hex or off-scale spacing.

When to Use

Starting UI work that needs a visual system
Applying colors, spacing, radius, or typography
/ui --token <file> or /ui --custom

Decision tree

Canonical tree + scoring math: references/token-preset-scoring.md (follow that file; first matching branch wins).

--custom / existing theme / keep palette?
  YES → CUSTOM: style-infer → project vars (no score)
  NO  ↓
--token <file> / user named a preset?
  YES → EXPLICIT: that file (no score)
  NO  ↓
Explicit Plasma brand?
  YES → HARD-GATE: plasma-landing.css
  NO  ↓
SCORE PATH: signals → score all presets → penalties → #1 (+ runner-up ≤2)
         → emit Token score → apply

Workflow

Walk the decision tree (above) — do not skip to affinity-hint vibes.
Custom branch — style inference before inventing visuals:
- Read Tailwind theme / :root CSS variables / theme provider
- Skim 2–3 existing buttons, cards, forms (padding, radius, shadow, type)
- Reuse those patterns; store nothing exotic outside the project language
Score branch — mandatory when tree lands on SCORE PATH:
- Extract signals: Surface · Density · Expression · Warmth · Radius · Accent · Inspiration
- Weighted score per preset (max 24); apply purple/Plasma penalties
- Choose #1; runner-up if within 2 points
- Emit Token score; Conventions: Tokens: … (score n/24)
- Top < 8 + thin signals → one clarifying Q, then rescore once
Explicit / hard-gate — apply that file; Conventions note (explicit) or (hard-gate)
Apply rules (after source chosen)
- HSL presets (stone-emerald, etc.): hsl(var(--primary)), hsl(var(--muted)), …
- OKLCH / hex presets (neutral-oklch*.css, stone-oklch.css, plasma-landing.css): var(--primary) — do not wrap in hsl()
- Plasma landing also exposes native names: var(--bg-main), var(--primary-color), …
- Never invent raw hex like #7c3aed
- Spacing: 0.25rem increments only
- Radius: match --radius from the token file
- Type: h1 → h2 → h3 → body → small; one h1 per page

Preset index (scoring hints only — not a picker)

File	Base	Primary	Radius	Affinity hint (not a picker)
`neutral-oklch.css`	neutral	mono (OKLCH)	0	Modern minimal / sharp UI
`neutral-oklch-rounded.css`	neutral	mono (OKLCH)	0.625rem	Mono OKLCH + soft radius
`stone-oklch.css`	warm stone	mono warm (OKLCH)	0	Editorial / warm minimal
`plasma-landing.css`	zinc-950	purple `#6C5CE7`	14px	Plasma marketing landing
`stone-emerald.css`	stone	emerald	0	Clean, minimal
`zinc-blue.css`	zinc	blue	0.5	Professional dashboards
`neutral-purple.css`	neutral	violet	0.75	Creative portfolios (brand cue required)
`slate-cyan.css`	slate	cyan	1	Data-heavy interfaces
`rose-amber.css`	rose	amber	1.5	Warm, friendly products

Checklist

Decision tree walked (custom / explicit / hard-gate / score)
If score path: signals + ranked scores emitted
Style inferred from existing components when custom
No raw hex / RGB outside token definitions
Spacing on 0.25rem scale
Border radius matches token file
Light/dark variables respected if present

Depth

Decision tree + scoring rubric: references/token-preset-scoring.md.
Token CSS files + import notes: tokens/README.md.
Style inference: references/design-axes.md.
Color theory + neutrals/accent/semantic recipe: references/ux-foundations.md.
Component usage: references/component-patterns.md.