gabrielciprianoo/design-review

Design Review (Refactoring UI)

Les connaissances se trouvent dans references/. Ne chargez jamais l'ensemble. Suivez la chaîne : SKILL.md → INDEX.md → seulement le(s) fichier(s) nécessaire(s).

1. Classer la demande

Type de tâche	Signaux	Chargement
Correction de composant	« revoir ces cartes / ce formulaire / la barre de navigation »	references/components/INDEX.md → 1–2 components/<nom>.md
Audit d'écran	« revoir cette page / cet écran / cette appli »	references/principles/INDEX.md → hierarchy.md, layout-spacing.md, typography.md, color.md ; ajouter depth.md, images.md, finishing.md seulement si pertinent
Refonte	« refaire le design / proposer une meilleure version »	Ensemble d'audit d'écran + personality.md + systems.md (+ process.md)
Polissage	« rendre plus professionnel / finitions »	finishing.md, depth.md, images.md
Nouveau design	« concevoir un … de zéro »	process.md, personality.md, systems.md, puis fichiers thématiques si nécessaire

Identifiez également les composants présents à l'écran (voir les descriptions dans components/INDEX.md) ; pour un audit d'écran, ouvrez les fichiers de composants pour les 1–2 composants dominants.

2. Capturer l'interface

Utilisez ce qui est disponible, dans cet ordre :

1. Outil navigateur (Claude dans Chrome, navigateur intégré, Playwright MCP) : ouvrez la page, prenez une capture d'écran, puis exécutez scripts/measure_styles.js avec l'exécution JavaScript de l'outil. Pour limiter à une zone, exécutez d'abord window.__DR_ROOT = '<sélecteur css>'.
2. Shell + Playwright (Claude Code) : python3 scripts/capture.py <url|fichier> [--selector ".card"] [--out dossier] → capture d'écran, capture en niveaux de gris, measurements.json.
3. Capture d'écran uniquement : contrôles visuels uniquement ; indiquez que les mesures n'étaient pas disponibles.
4. Code uniquement : lisez le CSS/le balisage et calculez manuellement les mêmes signaux.

Effectuez toujours le test des niveaux de gris (PRO-03) : visualisez une version désaturée (capture.py en produit une ; dans un outil navigateur, appliquez document.documentElement.style.filter='grayscale(1)', capturez, puis retirez-la).

3. Analyser

• Associez chaque constat à un ID de principe. Utilisez les mesures comme preuves (les clés de measurements.json référencent les ID dans les commentaires de measure_styles.js).
• Vérifiez dans cet ordre d'impact : hiérarchie → espacement/layout → typographie → couleur/contraste → profondeur → images → finitions.
• Les mesures sont des indices, pas des verdicts : confirmez chaque constat sur la capture d'écran avant de le signaler.
• Respectez la marque/la personnalité existante, sauf si un changement est demandé (PER-*). Pour les refontes, indiquez d'abord la personnalité cible.
• Les principes [process] guident les refontes ; ne les signalez pas comme défauts dans un audit.

4. Livrer

A. Constats — classés par impact, max ~10, chacun sous la forme : [ID] Problème — preuve (valeur mesurée ou ce qui est visible) → correction (valeurs concrètes issues des échelles du livre)

B. Design corrigé — sauf si l'utilisateur ne souhaite que la critique :

• Reconstruisez l'écran/le composant sous forme de page HTML/CSS autonome appliquant les corrections, en utilisant les échelles issues des fichiers de principes (espacement 4/8/12/16/24/32/48/64…, police 12/14/16/18/20/24/30/36/48…, ombres à 5 niveaux, nuances de couleurs 100–900). Montrez l'avant (capture d'écran) et l'après côte à côte si possible.
• Ou, si l'utilisateur souhaite des modifications de code, fournissez un correctif CSS/balisage.

C. Résumé système (refontes) — l'échelle typographique, l'échelle d'espacement, la palette (gris + primaire + accents en TSL) et les ombres utilisées, afin que l'équipe puisse les adopter.

Règles

• Citez les ID ; n'inventez jamais de principes au-delà des références. Si quelque chose n'est pas couvert, indiquez que cela sort du cadre du livre.
• Privilégiez quelques changements à fort impact plutôt que de longues listes.
• Ne copiez pas le texte du livre ; les références sont des résumés paraphrasés.

Maintenance

Les fichiers de principes sont la source de vérité. Après les avoir modifiés, régénérez les index et les fichiers de composants : python3 tools/build_indexes.py skills/design-review (le script se trouve dans le dépôt source sous tools/, pas dans la compétence installée).