Design System Quality
Revue de jetons de conception et d'accessibilité basée sur une liste de contrôle pour les PR UI/frontend.
Testé · Fonctionne
Ce que fait
Fournit une liste de contrôle de qualité structurée (jetons de conception, composants accessibles, contraste WCAG, typographie, timing d'animation) plus deux commandes de vérification basées sur grep pour détecter les couleurs codées en dur et les classes Tailwind interdites. Se déclenche lors de la revue de code UI/frontend, de la revue de PR de composants, ou des vérifications de conformité du système de conception.
Rapport de test
A exécuté les commandes grep de la compétence pour les couleurs codées en dur et les classes interdites sur un ProductCard.tsx jetable et les deux ont détecté des violations réelles (couleur inline #191919, bg-white/bg-black/text-white) ; la compétence organise ensuite les résultats dans une liste de contrôle classée par sévérité avec des remplacements exacts de variables CSS qu'une revue générique ne produirait pas.
Testé le: 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
Commandes et exemples de prompts
/design-system-qualityRevue de jetons de conception et d'accessibilité basée sur une liste de contrôle pour les PR UI/frontend.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
Review this ProductCard component for hardcoded colors and a11y issuesCheck this PR for design-token violations before I merge itDoes this Tailwind component use any forbidden classes or bad contrast?