Design System Quality

Tjekliste-drevet design-token og a11y review for UI/frontend PR'er.

Testet · Virker ★ 9.2/10

Hvad det gør

Leverer en struktureret kvalitets-tjekliste (design-tokens, tilgængelige komponenter, WCAG-kontrast, typografi, animations-timing) plus to grep-baserede verifikationskommandoer til at fange hårdkodede farver og forbudte Tailwind-klasser. Udløses ved UI/frontend kodegennemgang, PR-gennemgang af komponenter eller designsystem-compliance-tjek.

Testrapport

Kørte skill'ens egne hardcoded-color og forbidden-class grep-kommandoer mod et engangs ProductCard.tsx og begge fangede reelle overtrædelser (#191919 inline farve, bg-white/bg-black/text-white); skill'en organiserer derefter fund i en sværhedsgrad-rangordnet tjekliste med præcise CSS-variabel-erstatninger, som en generisk gennemgang ikke ville producere.

Testet: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/opensesh/DESIGN-OPS
mkdir -p ~/.claude/skills
cp -r DESIGN-OPS/skills/design-system-quality ~/.claude/skills/design-system-quality

Kommandoer og eksempelprompter

/design-system-qualityTjekliste-drevet design-token og a11y review for UI/frontend PR'er.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Review this ProductCard component for hardcoded colors and a11y issues
Check this PR for design-token violations before I merge it
Does this Tailwind component use any forbidden classes or bad contrast?

Læs hele rapporten →