Brandkit

WCAG-verifisert DTCG design-token-fundament (farge, skrifttype, avstand, theme.css) fra en brief

av plugin87 · plugin87/ux-ui-agent-skills

Bestått ★ 8.8/10

Brandkit — WCAG-verifisert DTCG design-token-fundament (farge, skrifttype, avstand, theme.css) fra en brief

Hva den gjør

Genererer et 3-lags DTCG design-token-system (fra primitivt til semantisk til komponent) fra en merkevarebrief: OKLCH fargeramper, skrifttype-/avstands-/radius-/skygge-/bevegelsesskalaer, lys og mørk modus, pluss en enkelt theme.css. Leveres med Python-validatorer som sjekker at token-aliaser løses, og at nødvendige tekst-/handling-/kantpar oppfyller WCAG 2.2 AA i både lys og mørk modus. Utløses når brukeren ønsker et helt nytt merkevare- eller designfundament, en ny palett og skrifttypesystem, eller et tema-basert token-kit for et produkt.

Testrapport

SKILL.md funnet på .claude/skills/brandkit/; mappen inneholder kun SKILL.md, dens refererte scripts/ + taste/ + CLAUDE.md ligger i repo-roten (alle HTTP 200). For OUTPUT oppfant jeg en brief (fintech spareapp, teal, "pålitelig") og skrev to DTCG colors.json: en naiv baseline (action=#14b8a6 med hvit tekst, text.secondary=gray-400) og en ferdighetsfølgende (action=teal-700, gray-600 secondary, designet mørke overstyringer). Kjørte repoets egne scripts/validate_contrast.py mot hver: baseline = 7 påkrevde WCAG-par FEIL (exit 1: lenke 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, pluss 3 i mørk); ferdighetsfølgende = alle 12 påkrevde par PASS i LYS OG MØRK (exit 0). Installert i en midlertidig HOME og bekreftet at validate_contrast.py og validate_tokens.py begge avslutter med 0 fra ferdighetsmappen. SKILL.md er ærlig ("føles fortsatt fordelaktig med menneskelig gjennomgang"); sikkerhetsmessig ren.

Testet på: 2026-07-21 · Claude Code 2.x (agent harness)

Installer

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/brandkit-src
mkdir -p ~/.claude/skills/brandkit
cp -R /tmp/brandkit-src/.claude/skills/brandkit/. ~/.claude/skills/brandkit/
cp -R /tmp/brandkit-src/scripts /tmp/brandkit-src/taste /tmp/brandkit-src/tokens /tmp/brandkit-src/CLAUDE.md ~/.claude/skills/brandkit/
# The brandkit dir upstream is SKILL.md only; its body references scripts/, taste/, tokens/ and
# CLAUDE.md that live at the REPO ROOT, so the two extra cp lines co-locate them into the skill dir.
# Verifiers are pure-stdlib Python3 (no pip deps): run from ~/.claude/skills/brandkit with
#   python3 scripts/validate_tokens.py && python3 scripts/validate_contrast.py && python3 scripts/validate_theme_refs.py
# Alternative whole-repo install (npx scaffolder, lays down the same files in a project): npx ux-ui-agent-skills

Kommandoer og eksempelprompter

/brandkitWCAG-verifisert DTCG design-token-fundament (farge, skrifttype, avstand, theme.css) fra en brief

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

Build a brand design system from this brief
Generate a light and dark theme token kit
Create a WCAG-verified color and type system

Full rapport →