Skill: Design Audit

Analyse le code source pour détecter les écarts avec les design patterns documentés.

Objectif

Comparer l'implémentation réelle des composants UI avec les règles définies dans ${CLAUDE_PLUGIN_ROOT}/blueprints/design-patterns/ et identifier les violations.

Prérequis

Lire les blueprints de référence embarqués dans le plugin :

• ${CLAUDE_PLUGIN_ROOT}/blueprints/design-patterns/README.md
• ${CLAUDE_PLUGIN_ROOT}/blueprints/design-patterns/components/*.md
• ${CLAUDE_PLUGIN_ROOT}/blueprints/design-patterns/patterns/*.md

Les chemins de code audités (src/) sont relatifs à la racine du projet analysé.

Exécution

Sur un projet de taille non triviale, déléguer à l'agent design-auditor (read-only) plutôt que de tout lire soi-même. Il peut tourner en parallèle de architecture-auditor et clean-code-auditor si un audit complet est demandé.

Règles d'Audit

Boutons (BTN-*)

Formulaires (FRM-*)

Chargement (LD-*)

Erreurs (ERR-*)

Modales (MDL-*)

États vides (EMP-*)

Cartes (CRD-*)

Commandes de Détection

BTN-001: Bouton primaire unique

grep -rE "variant=['\"]default['\"]" src/pages/ --include="*.tsx" -c | awk -F: '$2 > 1'

BTN-004: Suppression sans confirmation

grep -rE "variant=['\"]destructive['\"].*onClick=\{[^}]*delete" src/ --include="*.tsx" | grep -v "setShow\|setOpen\|Confirm"

BTN-005: Boutons icônes sans aria-label

grep -rE "size=['\"]icon" src/ --include="*.tsx" | grep -v "aria-label"

FRM-001: Input sans label

grep -rE "<(Input|input).*placeholder=" src/ --include="*.tsx"

FRM-003: Toast pour erreurs de validation

grep -rE "toast\.error.*invalid|toast\.error.*required|toast\.error.*validation" src/ --include="*.tsx" -i

LD-002: Spinner pleine page pour fetch

grep -rE "fixed inset-0.*Spinner|Spinner.*fixed inset-0" src/pages/ --include="*.tsx"

ERR-001: Toast pour validation

grep -rE "toast\.error.*form|toast\.error.*field|toast\.error.*input" src/ --include="*.tsx" -i

ERR-002: Messages techniques exposés

grep -rE "error\.(message|stack)|\.message\}" src/ --include="*.tsx" | grep -v "getErrorMessage\|formatError"

MDL-001: Modales imbriquées

grep -rE "<Dialog" src/ --include="*.tsx" -A 50 | grep -E "DialogContent.*Dialog"

MDL-002: Titres génériques

grep -rE "DialogTitle.*[Êê]tes-vous|DialogTitle.*[Aa]re you sure|DialogTitle.*[Cc]onfirm" src/ --include="*.tsx"

EMP-001: États vides sans action

grep -rE "\.length === 0.*return" src/ --include="*.tsx" | grep -v "Button\|Link\|action"

Classification des Sévérités

Format de Rapport

Le rapport généré doit inclure :

1. Résumé — Totaux par sévérité
2. Violations par catégorie — BTN-, FRM-, LD-, ERR-, MDL-, EMP-, CRD-* avec fichier, ligne, description
3. Tâches recommandées — Actions de remédiation priorisées
4. Couverture des règles — Status PASS/FAIL par règle

Principes

• Non-destructif : Ne jamais modifier le code source
• Basé sur preuves : Chaque violation cite fichier et ligne
• Actionnable : Chaque violation a une action de remédiation claire
• Priorisé : Focus sur violations à fort impact
• Déterministe : Même codebase = même rapport

Exceptions Connues

Certains patterns sont intentionnels :

• Les pages de paramètres peuvent avoir plusieurs boutons primaires (sauvegarde par section)
• Les formulaires multi-étapes peuvent dépasser 6 champs au total
• Les confirmations système peuvent utiliser des titres génériques

Règles à vérifier manuellement

Certaines règles nécessitent une vérification visuelle :

1. Skeleton correspond au layout — Le skeleton doit avoir la même structure que le contenu réel
2. Ordre des boutons — Annuler à gauche, action principale à droite
3. Ton des messages d'état vide — Positif et orienté action
4. Grille de cartes responsive — 1 colonne mobile, 2-3 colonnes desktop