Brandkit

Fundament tokenów projektowych DTCG (kolor, typ, odstępy, theme.css) zweryfikowany WCAG, na podstawie briefu

Autor: plugin87 · plugin87/ux-ui-agent-skills

Testowano · Działa ★ 8.8/10

Brandkit — Fundament tokenów projektowych DTCG (kolor, typ, odstępy, theme.css) zweryfikowany WCAG, na podstawie briefu

Co robi ten skill

Generuje 3-poziomowy system tokenów projektowych DTCG (od prymitywnych do semantycznych i komponentowych) na podstawie briefu marki: rampy kolorów OKLCH, skale typografii/odstępów/promieni/cieni/ruchu, jasne i ciemne motywy, plus pojedynczy plik theme.css. Dostarcza walidatory Python sprawdzające, czy aliasy tokenów są prawidłowo rozwiązywane i czy wymagane pary text/action/border spełniają WCAG 2.2 AA zarówno w trybie jasnym, jak i ciemnym. Uruchamia się, gdy użytkownik chce stworzyć markę lub fundament projektowy od podstaw, nową paletę i system typograficzny, lub zestaw tokenów z możliwością zmiany motywu dla produktu.

Raport z testu

Zlokalizowano SKILL.md w .claude/skills/brandkit/; katalog zawiera tylko SKILL.md, jego odwołania scripts/ + taste/ + CLAUDE.md znajdują się w katalogu głównym repozytorium (wszystkie HTTP 200). Dla OUTPUT wymyśliłem brief (aplikacja oszczędnościowa fintech, kolor turkusowy, „godna zaufania”) i napisałem dwa pliki DTCG colors.json: naiwną bazę (action=#14b8a6 z białym tekstem, text.secondary=gray-400) oraz zgodną z umiejętnością (action=teal-700, gray-600 secondary, zaprojektowane ciemne nadpisania). Uruchomiłem scripts/validate_contrast.py z repozytorium dla każdego: baza = 7 wymaganych par WCAG FAIL (exit 1: link 2.49:1, on-action 2.49:1, secondary 2.54:1, border 2.54:1, plus 3 w ciemnym); zgodne z umiejętnością = wszystkie 12 wymaganych par PASS w jasnym I ciemnym (exit 0). Zainstalowano w tymczasowym HOME i potwierdzono, że validate_contrast.py i validate_tokens.py zakończyły się z exit 0 z katalogu umiejętności. SKILL.md jest uczciwy („nadal wymaga przeglądu przez człowieka”); bezpieczny.

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

Instalacja

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

Komendy i przykładowe prompty

/brandkitFundament tokenów projektowych DTCG (kolor, typ, odstępy, theme.css) zweryfikowany WCAG, na podstawie briefu

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →