Brandkit Skill for Claude

Skill: Brand Kit

Stand up the *foundation* (one token system everything renders from) before any screen. Get this right and every page stays consistent and themeable from one place.

Steps

• Brief Inference (mandatory) — name the industry, audience, the one mood adjective, and motion depth (taste/design-taste.md → Brief Inference). Pick an anchoring archetype from taste/aesthetic-systems.md.
• Primitives — generate the brand color ramp in OKLCH (11 shades, consistent chroma) + a neutral ramp; verify the 500 shade ≥ 4.5:1 on white (text) and 600 ≥ 3:1 (UI) per CLAUDE.md Color Generation.
• Semantic layer — map roles to primitives: action.primary/-hover/destructive, text.{primary,secondary,on-action,link}, surface.{page,card,raised}, border.{default,strong}, feedback.{success,warning,error,info} — and the dark overrides (designed, not inverted).
• Scales — Major Third type scale + composite text styles, 4px spacing scale, radius tiers, elevation, and tokens/motion.json-style durations/easings.
• Emit the DTCG tokens/*.json (3-tier) + a single theme.css (the one shared source, [data-theme="dark"] overrides). Optionally feed the token-build pipeline (token-build skill) for other platforms.

Verification (definition of done)

• python3 scripts/validate_tokens.py — valid JSON, all aliases resolve.
• python3 scripts/validate_contrast.py — required text/action/border pairs pass WCAG AA in light AND dark; border.strong ≥ 3:1.
• python3 scripts/validate_theme_refs.py — every component var(--…) resolves to the theme.
• One theme, no per-page palettes; destructive = danger token (not primary); zero hardcoded values.

> Output is a verified token foundation — the measurable part is provable (run npm run verify). Brand "feel" still benefits from a human review against taste/design-taste.md.