Design System Quality

Checklist-driven design-token och a11y-granskning för UI/frontend PR:ar.

Testad · Fungerar ★ 9.2/10

Vad den gör

Tillhandahåller en strukturerad kvalitetschecklista (design-tokens, tillgängliga komponenter, WCAG-kontrast, typografi, animations timing) plus två grep-baserade verifieringskommandon för att fånga hårdkodade färger och förbjudna Tailwind-klasser. Utlöses vid UI/frontend kodgranskning, PR-granskning av komponenter, eller kontroller av designsystemets efterlevnad.

Testrapport

Körde färdighetens egna grep-kommandon för hårdkodad färg och förbjuden klass mot en engångs ProductCard.tsx och båda fångade verkliga överträdelser (inline-färg #191919, bg-white/bg-black/text-white); färdigheten organiserar sedan fynd i en allvarlighetsgraderad checklista med exakta CSS-variabelersättningar som en generell granskning inte skulle producera.

Testad: 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

Kommandon och exempelprompter

/design-system-qualityChecklist-driven design-token och a11y-granskning för UI/frontend PR:ar.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →