Brandkit

WCAG-geverifieerde DTCG design-token basis (color, type, spacing, theme.css) vanuit een brief

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

Getest · Werkt ★ 8.8/10

Brandkit — WCAG-geverifieerde DTCG design-token basis (color, type, spacing, theme.css) vanuit een brief

Wat het doet

Genereert een 3-laags DTCG design-token systeem (van primitief tot semantisch tot component) vanuit een merkbrief: OKLCH kleurschakeringen, type/spacing/radius/shadow/motion schalen, licht en donker, plus een enkele theme.css. Levert Python validators die controleren of token aliassen oplossen en dat vereiste text/action/border paren voldoen aan WCAG 2.2 AA in zowel lichte als donkere modus. Activeert wanneer de gebruiker een geheel nieuwe merk- of designbasis, een nieuw palet en typesysteem, of een thematiseerbare token kit voor een product wil.

Testrapport

SKILL.md gevonden op .claude/skills/brandkit/; de map bevat alleen SKILL.md, de gerefereerde scripts/ + taste/ + CLAUDE.md bevinden zich in de repo root (allen HTTP 200). Voor OUTPUT heb ik een brief verzonnen (fintech savings app, teal, "betrouwbaar") en twee DTCG colors.json geschreven: een naïeve baseline (action=#14b8a6 met witte tekst, text.secondary=gray-400) en een skill-volgende (action=teal-700, gray-600 secondary, ontworpen dark overrides). Draaide de eigen scripts/validate_contrast.py van de repo tegen elk: baseline = 7 vereiste WCAG paren FAIL (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 in donker); skill-volgend = alle 12 vereiste paren PASS in licht EN donker (exit 0). Geïnstalleerd in een tijdelijke HOME en bevestigd dat validate_contrast.py en validate_tokens.py beide exit 0 vanuit de skill map. SKILL.md is eerlijk ("feel still benefits from human review"); security clean.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

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

Commando's en voorbeeldprompts

/brandkitWCAG-geverifieerde DTCG design-token basis (color, type, spacing, theme.css) vanuit een brief

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

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

Volledig rapport (Engels) →