Design System Quality

Checklist-gestuurde design-token en a11y review voor UI/frontend PRs.

Getest · Werkt ★ 9.2/10

Wat het doet

Biedt een gestructureerde kwaliteitschecklist (design tokens, toegankelijke componenten, WCAG contrast, typografie, animatie timing) plus twee grep-gebaseerde verificatiecommando's voor het vangen van hardcoded kleuren en verboden Tailwind klassen. Triggers bij UI/frontend code review, PR review van componenten, of design system compliance checks.

Testrapport

De eigen hardcoded-kleur en verboden-klasse grep commando's van de skill uitgevoerd tegen een wegwerpproduct ProductCard.tsx en beide vingen echte overtredingen (#191919 inline kleur, bg-white/bg-black/text-white); de skill organiseert bevindingen vervolgens in een severity-ranked checklist met exacte CSS-variabele vervangingen die een generieke review niet zou produceren.

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

Installatie

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

Commando's en voorbeeldprompts

/design-system-qualityChecklist-gestuurde design-token en a11y review voor UI/frontend PRs.

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

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?

Volledig rapport (Engels) →