SkillProof tested Claude skills

Design System Quality

Sjekkliste-drevet design-token og a11y-gjennomgang for UI/frontend PR-er.

av opensesh · opensesh/DESIGN-OPS

Bestått ★ 9.2/10

Design System Quality — Sjekkliste-drevet design-token og a11y-gjennomgang for UI/frontend PR-er.

Hva den gjør

Tilbyr en strukturert kvalitets-sjekkliste (design-tokens, tilgjengelige komponenter, WCAG-kontrast, typografi, animasjonstid) pluss to grep-baserte verifikasjonskommandoer for å fange hardkodede farger og forbudte Tailwind-klasser. Utløses ved UI/frontend kode-gjennomgang, PR-gjennomgang av komponenter, eller designsystem-samsvarskontroller.

Testrapport

Kjørte ferdighetens egne hardkodet-farge og forbudt-klasse grep-kommandoer mot et engangs ProductCard.tsx og begge fanget reelle brudd (#191919 inline farge, bg-white/bg-black/text-white); ferdigheten organiserer deretter funn i en alvorlighetsgrad-rangert sjekkliste med eksakte CSS-variabel-erstatninger en generell gjennomgang ikke ville produsert.

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

Installer

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-qualitySjekkliste-drevet design-token og a11y-gjennomgang for UI/frontend PR-er.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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?

Full rapport →