es-kimo/claude-skills

Révision de cohérence UI

S'il n'y a pas de designer, « l'écran existant » est le référentiel de conception. Les agents composent de nouvelles classes Tailwind pour chaque écran, ce qui entraîne de légères variations pour une même fonctionnalité d'interface d'un écran à l'autre. Cette révision détecte ces écarts. Elle ne juge pas de l'esthétique.

0. Modes

Mode	Cible	Éléments bloquants
Auto-vérification	Mes modifications	Je les corrige
Révision de PR	Fichiers et styles modifiés par la PR	Seulement les écarts créés par cette modification
Inspection	Tous les écrans	Tous

1. Lecture des critères

1. Chercher docs/review/design.md. S'il n'existe pas, utiliser le document de conception référencé par CLAUDE.md ou AGENTS.md.

2. Extraire du document de référence : principes, jetons (rôle de couleur, espacement, largeur, police), composants communs, représentations d'état (chargement, liste vide, erreur, accès refusé, succès), ton et terminologie.

3. Si aucun document de référence n'existe, extraire des écrans existants.

   # Valeurs réellement utilisées et fréquence par rôle
   git grep -hoE "text-(red|amber|green|zinc|gray|slate)-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   git grep -hoE "max-w-[a-z0-9]+|gap-[0-9]+|px-[0-9]+|py-[0-9]+" -- 'src/**/*.tsx' | sort | uniq -c | sort -rn
   

   Prendre comme référence la valeur la plus fréquente, et écrire en première ligne « Aucun document de référence → extrait des écrans existants ». S'il n'y a pas de document de référence, ne remonter comme bloquant que les incohérences internes.

2. Éléments à vérifier

• Jetons : une même fonction utilise-t-elle des valeurs différentes (couleur d'erreur red-600 vs red-500, largeur de page max-w-2xl vs max-w-3xl) ? Des nouvelles valeurs non présentes dans la référence ont-elles été introduites ?
• Composants : une même fonction d'interface (bouton principal, lien, texte d'erreur, état vide, indicateur de chargement) a-t-elle été redessinée en copiant des chaînes de classes au lieu d'utiliser le composant commun ?
• Mise en page : la largeur de page, les marges, la position du titre, la position du bouton retour sont-ils cohérents avec les autres écrans ?
• Représentations d'état : le chargement, la liste vide, l'erreur, l'accès refusé, le succès de sauvegarde sont-ils affichés de la même manière (position, couleur, structure de phrase) que sur les écrans existants ?
• Texte : le ton (formel, informel) est-il cohérent ? Un même objet est-il désigné par des mots différents ? Les messages d'erreur suivent-ils la structure « ce qui n'a pas fonctionné + ce qu'il faut faire » ?
• Informations de débogage : des mesures, des identifiants internes, des hachages apparaissent-ils sur l'interface utilisateur ? Signaler si le document de référence ne l'autorise pas.
• Accessibilité minimale : les entrées ont-elles un label ? L'état est-il uniquement distingué par la couleur ? Les boutons sont-ils accessibles au clavier ? La langue du document (lang) correspond-elle à la langue de l'interface ?

3. Vérification visuelle

Si l'exécution est possible, prendre des captures d'écran avant et après modification avec les mêmes données pour les comparer (compétence compare-output). Si l'exécution est impossible en raison d'une connexion ou d'identifiants externes, préciser que la décision a été prise par analyse du code. Ne pas écrire comme si l'on avait vu un écran qui n'a pas été exécuté.

4. Décision

Bloquant

• Une règle du document de référence a été enfreinte.
• Une nouvelle expression (valeur, structure de phrase, position) a été introduite pour une même fonction d'interface par rapport à l'existant.
• Un composant commun existe mais a été redessiné en copiant des chaînes de classes.

Suggestion

• Nouveau schéma dans un domaine non couvert par le document de référence. Le noter comme « proposition de critère » pour qu'un humain décide de l'ajouter au document de référence.
• Incohérence préexistante.

Ce qui n'est pas signalé : les goûts personnels (cette couleur est plus jolie), les propositions de nouveau design sans lien avec les critères existants.

5. Rapport

Première ligne : périmètre examiné, existence d'un document de référence, vérification visuelle effective, nombre d'écarts.

Pour chaque élément :

• Titre : décrire l'écart comme un résultat. ("La largeur de page de l'écran d'accueil est plus grande, décalant la position du contenu lors de la navigation")
• Emplacement : fichier:ligne et fichier:ligne de l'élément de comparaison.
• Référence : quelle règle ou quel écran existant est en contradiction.
• Direction : vers quelle valeur ou composant aligner.
• Niveau. S'il s'agit d'une « proposition de critère », ajouter une ligne précisant ce qui doit être ajouté au document de référence.