Design System Quality

Checklist per la revisione di design token e a11y per PR UI/frontend.

Promosso ★ 9.2/10

Cosa fa

Fornisce una checklist strutturata di qualità (design token, componenti accessibili, contrasto WCAG, tipografia, timing animazione) più due comandi di verifica basati su grep per catturare colori codificati in modo fisso e classi Tailwind proibite. Si attiva alla revisione del codice UI/frontend, alla revisione PR dei componenti, o ai controlli di conformità del design system.

Rapporto di test

Ho eseguito i comandi grep dell'abilità per colori codificati in modo fisso e classi proibite su un ProductCard.tsx usa e getta ed entrambi hanno catturato violazioni reali (colore inline #191919, bg-white/bg-black/text-white); l'abilità poi organizza i risultati in una checklist classificata per gravità con sostituzioni esatte di variabili CSS che una revisione generica non produrrebbe.

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

Installazione

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

Comandi e prompt di esempio

/design-system-qualityChecklist per la revisione di design token e a11y per PR UI/frontend.

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

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?

Rapporto completo →