designwithai-mcp 0.1.0

package/skills/analyze-url/evals/cases.json

@@ -0,0 +1,136 @@
+[
+  {
+    "id": "url-conformant-releves",
+    "skill": "analyze-url",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "URL analysée : https://releves-compteurs.fr/releves/\nLangue déclarée : fr\nTitre : Relevés — suivre les relevés de vos compteurs\nMeta description : Enregistrez vos relevés de compteur, suivez la consommation mois par mois.\nMeta viewport : width=device-width, initial-scale=1\n\nTITRES (4)\n  - h1 : Mes relevés\n  - h2 : Ajouter un relevé\n  - h2 : Relevés enregistrés\n  - h2 : Questions fréquentes\n\nLIENS DE NAVIGATION ET D'ACTION (6)\n  - Relevés → /\n  - Mes relevés → /releves/\n  - Mes compteurs → /compteurs/\n  - Aide → /aide/\n  - Aide → /aide/\n  - Confidentialité → /confidentialite/\n\nBOUTONS (1)\n  - Ajouter le relevé\n\nFORMULAIRES (1)\n  - formulaire → /releves/ (POST)\n\nCHAMPS DE SAISIE (4)\n  - champ date (date) requis · label visible « Date du relevé » · aide liée (aide-date)\n  - champ index (number) requis · label visible « Index affiché sur le compteur » · aide liée (aide-index)\n  - champ note (textarea) · label visible « Note (facultatif) »\n  - champ compteur (select  ) requis · label visible « Compteur »\n\nIMAGES ET TEXTES DE REMPLACEMENT (1)\n  - courbe-consommation.png : alt « Courbe de consommation : hausse régulière de janvier à mars 2026. »\n\nZONES D'ANNONCE DYNAMIQUE (1)\n  - aria-live=polite role=status\n\nBLOCS REPLIABLES NATIFS <details> (2) — l'état ouvert/fermé est porté par le navigateur\n  - Que se passe-t-il si je saisis un index plus bas que le précédent ? [replié]\n  - Puis-je supprimer un relevé ? [replié]\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (0)\n  (aucun)\n\nCONTENU DE SECOURS SANS JAVASCRIPT (1)\n  - Le formulaire de relevé fonctionne sans JavaScript : remplissez les champs et validez.\n\nTEXTE VISIBLE (139 mots, extrait)\nLe formulaire de relevé fonctionne sans JavaScript : remplissez les champs et validez. Relevés Mes relevés Mes compteurs Aide Mes relevés Trois relevés enregistrés. Dernier relevé le 12/03/2026. Ajouter un relevé Compteur Électricité — cuisine Eau — salle de bain Date du relevé Format jour/mois/année, par exemple 12/03/2026. Index affiché sur le compteur Nombre entier, sans unité. Exemple : 45210. Note (facultatif) Ajouter le relevé Relevés enregistrés Date Compteur Index 12/03/2026 Électricité — cuisine 45 210 08/02/2026 Électricité — cuisine 44 980 05/01/2026 Eau — salle de bain 1 204 Questions fréquentes Que se passe-t-il si je saisis un index plus bas que le précédent ? Le relevé est enregistré et signalé comme à vérifier. Vous pouvez le corriger ensuite. Puis-je supprimer un relevé ? Oui, depuis la ligne du relevé, jusqu'à trente jours après son ajout. Aide Confidentialité",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "aucun état de chargement annoncé",
+        "aucun état vide sur la liste des relevés",
+        "aucun message d'erreur prévu",
+        "revoir les couleurs et les espacements"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Page saine sur les deux grilles : terminologie unique (relevé/compteur), hiérarchie de titres complète, tous les champs étiquetés et typés, aide liée là où le format est contraint, alt porteur de sens, zone d'annonce présente, contenu de secours sans JavaScript présent, dates au même format. Le seul reproche recevable est de faible sévérité (l'aide décrit un format jour/mois/année alors que le champ est de type date) : une note ne disqualifie pas un cas conformant."
+    }
+  },
+  {
+    "id": "url-conformant-sans-javascript",
+    "skill": "analyze-url",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "URL analysée : https://mediatheque-vaugrenier.fr/horaires/\nLangue déclarée : fr\nTitre : Horaires et accès — Médiathèque de Vaugrenier\nMeta description : Horaires d'ouverture, adresse et conditions d'accès de la médiathèque de Vaugrenier.\nMeta viewport : width=device-width, initial-scale=1\n\nTITRES (4)\n  - h1 : Horaires et accès\n  - h2 : Horaires d'ouverture\n  - h2 : Adresse et transports\n  - h2 : Emprunter des documents\n\nLIENS DE NAVIGATION ET D'ACTION (6)\n  - Médiathèque de Vaugrenier → /\n  - Horaires et accès → /horaires/\n  - Catalogue → /catalogue/\n  - Inscription → /inscription/\n  - Mentions légales → /mentions-legales/\n  - Accessibilité → /accessibilite/\n\nBOUTONS (0)\n  (aucun)\n\nFORMULAIRES (0)\n  (aucun)\n\nCHAMPS DE SAISIE (0)\n  (aucun)\n\nIMAGES ET TEXTES DE REMPLACEMENT (1)\n  - plan-acces-mediatheque.png : alt « Plan d'accès : la médiathèque se situe entre la mairie et le parc, côt »\n\nZONES D'ANNONCE DYNAMIQUE (0)\n  (aucun)\n\nBLOCS REPLIABLES NATIFS <details> (0) — l'état ouvert/fermé est porté par le navigateur\n  (aucun)\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (0)\n  (aucun)\n\nCONTENU DE SECOURS SANS JAVASCRIPT (0)\n  (aucun)\n\nTEXTE VISIBLE (209 mots, extrait)\nMédiathèque de Vaugrenier Horaires et accès Catalogue Inscription Horaires et accès La médiathèque accueille le public six jours sur sept. L'entrée est libre et gratuite, l'inscription n'est demandée que pour emprunter des documents. Horaires d'ouverture Jour Matin Après-midi Mardi 10 h – 12 h 14 h – 18 h Mercredi 10 h – 12 h 14 h – 19 h Jeudi Fermé 14 h – 18 h Vendredi 10 h – 12 h 14 h – 18 h Samedi 10 h – 13 h 14 h – 17 h La médiathèque est fermée les jours fériés ainsi que du 01/08/2026 au 16/08/2026. Adresse et transports 12 rue des Tilleuls, 06270 Vaugrenier. Bus 21 et 44, arrêt « Tilleuls ». Un parking gratuit de trente places se trouve derrière le bâtiment. L'entrée principale est de plain-pied et les trois niveaux sont desservis par un ascenseur. Emprunter des documents L'inscription est annuelle et gratuite pour les habitants de la commune. Elle se fait sur place, avec une pièce d'identité et un justificatif de domicile de moins de trois mois. Chaque carte permet d'emprunter dix documents pour trois semaines, renouvelables une fois. Pour toute question, écrivez à contact@mediatheque-vaugrenier.fr ou appelez le 04 93 00 00 00 aux heures d'ouverture. Mentions légales Accessibilité",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "aucun contenu de secours sans JavaScript",
+        "aucune zone d'annonce pour les erreurs",
+        "aucun état de chargement",
+        "aucun formulaire de contact",
+        "aucun élément interactif"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "LE PIÈGE DU RAISONNEMENT PAR ABSENCE, à l'état pur. Cette page est servie entière par le serveur : elle n'exécute aucun script, ne charge rien, n'affiche aucune erreur. Elle n'a donc besoin ni de contenu de secours, ni de zone d'annonce, ni de message d'attente — et la grille « soigne » invite pourtant à reprocher leur absence. Reprocher ici ce qui n'a pas lieu d'être est la faute que ce cas mesure."
+    }
+  },
+  {
+    "id": "url-obvious-taskflow",
+    "skill": "analyze-url",
+    "kind": "obvious-defect",
+    "delivery_mode": "ai-builder",
+    "artifact": "URL analysée : https://taskflow-demo.app/projects\nLangue déclarée : (non déclarée)\nTitre : React App\nMeta description : (aucune)\nMeta viewport : (aucune)\n\nTITRES (3)\n  - h1 : Mes projets\n  - h3 : Créer un projet\n  - h3 : Vos espaces\n\nLIENS DE NAVIGATION ET D'ACTION (6)\n  - TaskFlow → /\n  - Mes projets → /projects\n  - Mes espaces → /workspaces\n  - Nouveau workspace → /w/new\n  - (lien sans texte) → /help\n  - Cliquez ici → /upgrade\n\nBOUTONS (6)\n  - Soumettre\n  - Ajouter\n  - Créer\n  - Nouveau\n  - OK\n  - Enregistrer [désactivé]\n\nFORMULAIRES (1)\n  - formulaire → /api/create (POST)\n\nCHAMPS DE SAISIE (4)\n  - champ title (text) requis · SANS LABEL · placeholder « Nom du projet »\n  - champ email (text) · SANS LABEL · placeholder « Email du responsable »\n  - champ deadline (text) · SANS LABEL · placeholder « Deadline »\n  - champ team (select  ) · SANS LABEL\n\nIMAGES ET TEXTES DE REMPLACEMENT (2)\n  - illustration-tableau-de-bord.png : PAS D'ATTRIBUT ALT\n  - avatar-responsable.png : PAS D'ATTRIBUT ALT\n\nZONES D'ANNONCE DYNAMIQUE (0)\n  (aucun)\n\nBLOCS REPLIABLES NATIFS <details> (0) — l'état ouvert/fermé est porté par le navigateur\n  (aucun)\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (0)\n  (aucun)\n\nCONTENU DE SECOURS SANS JAVASCRIPT (0)\n  (aucun)\n\nTEXTE VISIBLE (244 mots, extrait)\nTaskFlow Mes projets Mes espaces Nouveau workspace Mes projets Bienvenue sur TaskFlow. Vous retrouvez ici tous les projets de votre organisation, ainsi que les espaces partagés avec les autres équipes. Chaque projet regroupe des tâches, des documents et un fil de discussion. Vous pouvez créer un nouveau projet à tout moment depuis le formulaire ci-dessous, l'assigner à une équipe, puis inviter les personnes concernées. Les projets archivés restent consultables pendant douze mois avant d'être définitivement supprimés de votre workspace. Créer un projet Équipe A Équipe B Soumettre Erreur Vos espaces Un espace rassemble plusieurs projets et leurs membres. Vous appartenez à trois espaces. Le workspace « Produit » contient les projets de conception et de développement. L'espace « Marketing » regroupe les campagnes en cours et les demandes entrantes. Le troisième espace est personnel : vous seul y avez accès, et il ne compte pas dans le quota de votre organisation. Créé le 12/03/2026 · Modifié le 2026-02-08 · Ouvert le 5 janvier 2026 Projet Tâches Action Refonte site 3 tâches en cours, 12 terminées Ajouter Application mobile 7 tâches en cours, 4 terminées Créer Migration données 2 tâches en cours, 0 terminée Nouveau Pour ajouter une tâche à un projet, ouvrez le projet puis utilisez le bouton correspondant dans la colonne de droite. Les tâches peuvent être assignées, commentées et déplacées entre les colonnes du tableau. Une tâche terminée reste visible sept jours avant de rejoindre l'historique du projet. Cliquez ici OK Enregistrer",
+    "golden": {
+      "expected_findings": [
+        "le même objet nommé projet, espace et workspace",
+        "trois libellés pour la même action : Ajouter, Créer, Nouveau",
+        "trois formats de date différents sur la même ligne",
+        "hiérarchie de titres : le niveau h2 sauté entre h1 et h3",
+        "quatre champs sans label, portés par le seul placeholder",
+        "bouton d'envoi au libellé vague « Soumettre »",
+        "message d'erreur réduit au mot « Erreur », sans cause ni suite",
+        "deux images sans attribut alt",
+        "langue de la page non déclarée",
+        "lien sans texte vers l'aide"
+      ],
+      "forbidden_findings": [
+        "revoir les couleurs et les espacements",
+        "alléger les scripts chargés",
+        "refondre entièrement l'interface",
+        "aucun état de chargement"
+      ],
+      "expected_verdict": "FAIL",
+      "should_refuse": false,
+      "note": "Application générée : les défauts sont nets et tous observables dans l'extrait. Deux d'entre eux sont critiques — des champs dont le seul repère est un placeholder, et un message d'erreur qui ne dit ni la cause ni la suite — d'où le FAIL déduit par le modèle de sévérité. Le champ email typé en texte et le bouton désactivé sans cause sont recevables en plus ; ils ne sont pas exigés."
+    }
+  },
+  {
+    "id": "url-subtle-designwithai",
+    "skill": "analyze-url",
+    "kind": "subtle-defect",
+    "delivery_mode": "classique",
+    "artifact": "URL analysée : https://designwithai.fr/\nLangue déclarée : fr\nTitre : designwithai — Manuel d&#x27;atelier\nMeta description : Le AI Product Design Handbook, en atelier. Quatre volumes, trois projets, un gate par module.\nMeta viewport : width=device-width, initial-scale=1\n\nTITRES (23)\n  - h1 : Passe ton produit au niveau au-dessus.\n  - h2 : « Ça marche » ne veut pas dire « c&#x27;est prêt ».\n  - h2 : Décris, connecte, regarde, corrige, re-vérifie.\n  - h2 : Une seule voix.\n  - h2 : Les détails qui font pro.\n  - h2 : Ça tient en vrai.\n  - h2 : De la première idée à la mise en ligne.\n  - h2 : Un rapport clair. Pas un tableau de bord de plus.\n  - h2 : Un objectif, pas un cours.\n  - h2 : Directement dans ton éditeur de code.\n  - h2 : Les questions qu&#x27;on nous pose.\n  - h2 : Passe ton produit au niveau au-dessus.\n  - h3 : Décris\n  - h3 : Connecte\n  - h3 : État des lieux\n  - h3 : Agis\n  - h3 : Re-vérifie\n  - h3 : Cadrer\n  - h3 : Concevoir\n  - h3 : Construire\n  - h3 : Harmoniser\n  - h3 : Fiabiliser\n  - h3 : Lancer\n\nLIENS DE NAVIGATION ET D'ACTION (18)\n  - designwithai → /\n  - La méthode → #methode\n  - Packs → #packs\n  - Intégrations → #integrations\n  - Ressources → /bibliotheque/\n  - Démarrer → /bienvenue/\n  - Voir où en est mon produit → /bienvenue/\n  - Voir un exemple de rapport → → /exemple-de-rapport/\n  - Voir un exemple complet → → /exemple-de-rapport/\n  - Choisir mon objectif → /bienvenue/\n  - Voir ce que ça donne → → /exemple-de-rapport/\n  - Voir où en est mon produit → /bienvenue/\n  - Voir un exemple de rapport → → /exemple-de-rapport/\n  - designwithai → /\n  - La méthode → #methode\n  - Packs → #packs\n  - Intégrations → #integrations\n  - Ressources → /bibliotheque/\n\nBOUTONS (1)\n  - Fermer ⎋\n\nFORMULAIRES (0)\n  (aucun)\n\nCHAMPS DE SAISIE (0)\n  (aucun)\n\nIMAGES ET TEXTES DE REMPLACEMENT (0)\n  (aucun)\n\nZONES D'ANNONCE DYNAMIQUE (0)\n  (aucun)\n\nBLOCS REPLIABLES NATIFS <details> (8) — l'état ouvert/fermé est porté par le navigateur\n  -  01  Un produit cohérent, d&#x27;un bout à l&#x27;autre  On remet ton design system et tes [ouvert par défaut]\n  -  02  De ta maquette Figma à du code solide  Traduire ton design en vrai code, propre et co [ouvert par défaut]\n  -  03  La revue avant mise en ligne  Un dernier passage qui montre, noir sur blanc, ce qui s [ouvert par défaut]\n  -  04  Ton app IA, prête pour de vrais utilisateurs  Ton app générée avec Lovable, Bolt ou v [ouvert par défaut]\n  - C&#x27;est seulement pour les produits faits avec l&#x27;IA ? +  [replié]\n  - Je dois être technique ? +  [replié]\n  - C&#x27;est un cours ? +  [replié]\n  - Ça remplace mon designer ou mon dev ? +  [replié]\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (0)\n  (aucun)\n\nCONTENU DE SECOURS SANS JAVASCRIPT (1)\n  - (balise présente, contenu non textuel — probablement du style)\n\nTEXTE VISIBLE (1249 mots, extrait)\ndesignwithai La méthode Packs Intégrations Ressources Démarrer L&#x27;exigence produit, à tes côtés Passe ton produit au niveau au-dessus. Plus cohérent, plus soigné, plus solide — à chaque itération. Voir où en est mon produit Voir un exemple de rapport → designwithai.fr/etat-des-lieux Ton produit État des lieux Ton plan Sa fiche Agir Les packs Brancher ton éditeur Apprendre Le manuel Bibliothèque ProspectFlow app mobile · bêta · branché sur ton éditeur Re-analyser Verdict Presque prêt 2 constats réglés depuis la fois d&#x27;avant. Ton produit monte. Cohérent trois styles de boutons 2 constats Soigné pas d&#x27;état vide sur la liste 2 constats Solide données lisibles sans permission 2 constats → Audit sécurité → Check design system → Revue avant lancement Ton prochain pas Fermer les deux failles de données Continuer Fonctionne avec ton stack — Lovable Bolt v0 Cursor Figma ton éditeur Lovable Bolt v0 Cursor Figma ton éditeur Lovable Bolt v0 Cursor Figma ton éditeur Lovable Bolt v0 Cursor Figma ton éditeur le vrai sujet « Ça marche » ne veut pas dire « c&#x27;est prêt ». Une idée, une maquette, une app déjà en ligne : à chaque étape, un écart se creuse entre ce que tu vois et ce que vivront tes utilisateurs. Une intention encore floue, un style qui se fissure d&#x27;un écran à l&#x27;autre, une donnée trop exposée. Rien de tout ça ne se signale tout seul — jusqu&#x27;au jour où ça coûte cher. Je te dis où tu en es, à l&#x27;étape où tu en es. 01 Une idée l&#x27;intention n&#x27;est pas encore nette 02 Une maquette deux styles cohabitent déjà 03 En ligne une donnée trop exposée une seule boucle Décris, connecte, regarde, corrige, re-vérifie. Un seul objet au centre : ton produit. Et un cycle que tu comprends en une phrase. 01 / 05 Décris 5 questions simples. On situe ton produit. 01 Décris 5 questions simples. On situe ton produit. 02 Connecte Un lien, une maquette, ou ton code. Ce que tu as. 03 État des lieux Ton diagnostic : cohérent, soigné, solide. 04 Agis Ton plan, et l&#x27;outil exact en face de chaque pas. 05 Re-vérifie Ton produit monte, audit après audit. La cinquième ramène à la quatrième — on avance, on re-mesure, on recommence. 01 Cohérent Une seule voix. Ton produit et ton design system parlent d&#x27;une seule voix. Fini les écrans qui semblent venir de trois apps différentes. Enregistrer Enregistrer Enregistrer 02 Soigné Les détails qui font pro. États vides, erreurs, chargements, cas limites : chaque écran fini pour de bon. — Aucun projet pour l&#x27;instant Créer le premier → 03 Solide Ça tient en vrai. Avec de vrais utilisateurs et de vraies données, pas seulement en démo. Donnée d&#x27;un autre utilisateur lisible sans permission la méthode De la première idée à la mise en ligne. Tu entres là où tu en es. Pas besoin de tout suivre : tu prends ce qui t&#x27;aide, au moment où ça t&#x27;aide. 01 Cadrer clarifier le problème savoir quoi produire 02 Concevoir dessiner l&#x27;interface de la maquette au code 03 Construire améliorer l&#x27;existant fiabiliser l&#x27;app 04 Harmoniser un style cohérent repérer les doublons 05 Fiabiliser prêt pour de vrais utilisateurs ? vérifier les corrections 06 Lancer revue avant mise en ligne mesurer les progrès Que tu partes de zéro, d&#x27;une maquette Figma ou d&#x27;une app générée par IA — la méthode ne change pas. ce que tu obtiens Un rapport clair. Pas un tableau de bord de plus. Tu vois d&#x27;un coup où en est ton produit, ce qui doit être réparé, et dans quel ordre. Chaque point adossé à une preuve. Voir un exemple complet → rapport Verdict Presque prêt 2 choses à corriger avant d&#x27;ouvrir à de vrais utilisateurs. Cohérent trois styles de boutons espacements incohérents Soigné pas d&#x27;état vide sur la liste erreur de paiement silencieuse Solide urgent — données d&#x27;un autre utilisateur lisibles urgent — clé d&#x27;accès visible dans le code Le plan 01 fermer les failles de données 02 unifier boutons + espacements 03 sauvegardes auto par où commencer Un objectif, pas un cours. Tu choisis un résultat concret, on t&#x27;emmène du début à la fin. Un point de départ, un livrable. Choisir mon objectif Voir ce que ça donne → 01 Un produit cohérent, d&#x27;un bout à l&#x27;autre On remet ton design system et tes écrans d&#x27;accord : incohérences, doublons, styles bricolés, avant qu&#x27;ils ne se répandent partout. Ce que ça contient + 01 Tokens Les tokens audités : nommage, sémantique, valeurs hardcodées. 02 Composants L&#x27;inventaire, les doublons et l&#x27;architecture cible. 03 Variantes Les explosions de variants ramenées à des slots et properties. 02 De ta maquette Figma à du code solide Traduire ton design en vrai code, propre et cohérent, sans bricolage qui te retombera dessus plus tard. Ce que ça contient + 01 Audit des fondations Les tokens (couleur, type, spacing) alignés entre Figma et code. 02 Inventaire des composants La liste dérivée du flow, pas d&#x27;un catalogue, avec l&#x27;API textuelle de chacun. 03 Mapping Figma → code La correspondance nom-à-nom entre composants Figma et composants code. 03 La revue avant mise en ligne Un dernier passage qui montre, noir sur blanc, ce qui s&#x27;est amélioré depuis la fois d&#x27;avant. Ce que ça contient + 01 Problème et objectif Le problème testable et les critères de succès. 02 Parcours Le task flow du déclencheur à la post-condition, avec ses erreurs. 03 États La matrice des états et des récupérations. 04 Ton app IA, prête pour de vrais utilisateurs Ton app générée avec Lovable, Bolt ou v0 passe de « ça marche en démo » à « ça tient en vrai ». Ce que ça contient + 01 Audit des données et permissions Inventaire du modèle d&#x27;autorisation serveur (RLS, security rules, contrôle d&#x27;identité), des secrets et des accès, avec les risques bloquants nommés. 02 Audit de l&#x27;architecture générée Carte des routes, services et duplications ; dette structurelle classée. 03 Inventaire des composants Liste des composants avec leur niveau (primitive, pattern, one-off) et les doublons. là où tu travailles déjà Directement dans ton éditeur de code. Pas un site de plus à ouvrir. Ton coéquipier vient à toi, dans Claude ou ton éditeur — et il te fait produire et prouver, au lieu de te souffler des réponses toutes faites. ton éditeur branché $ relis l&#x27;écran de facturation → 3 constats, du plus grave au moins grave erreur de paiement silencieuse deux styles de boutons sur le même écran chargement et confirmation : rien à redire → correction proposée, puis vérifiée sur ton écran 01 on analyse ton écran ou ton code 02 on liste ce qui cloche 03 on vérifie que c&#x27;est corrigé Les questions qu&#x27;on nous pose. C&#x27;est seulement pour les produits faits avec l&#x27;IA ? + Non. La méthode vaut pour tout produit — l&#x27;IA est juste le cas où le besoin est le plus criant. Je dois être technique ? + Non. Les rapports sont en langage clair. Si tu codes, ça s&#x27;intègre à ton éditeur ; sinon, tu suis le plan. C&#x27;est un cours ? + Non. Tu choisis un objectif, tu repars avec un livrable. Ça remplace mon designer ou mon dev ? + Non. C&#x27;est le coéquipier qui hausse le niveau de ce que ton équipe produit — et qui le prouve. Passe ton produit au niveau au-dessus. Commence par voir où il en est — 2 minutes. Voir où en est mon produit Voir un exemple de rapport → designwithai La méthode Packs Intégrations Ressources Renvoi Fermer ⎋",
+    "golden": {
+      "expected_findings": [
+        "la même livraison nommée état des lieux, diagnostic et rapport",
+        "le titre et la meta description annoncent des volumes et des modules absents de la page",
+        "le h1 repris à l'identique en h2 plus bas",
+        "les entrées de navigation Packs et Intégrations ne nomment aucune section de la page"
+      ],
+      "forbidden_findings": [
+        "reprocher qu'aucun repli ne soit servi sans JavaScript",
+        "reprocher l'absence de zone d'annonce pour les erreurs",
+        "accordéons sans état ouvert ou fermé annoncé",
+        "entités HTML non décodées dans les titres",
+        "aucun formulaire ni champ de saisie",
+        "reprocher qu'aucune illustration n'accompagne les sections"
+      ],
+      "expected_verdict": "PASS WITH FIXES",
+      "should_refuse": false,
+      "note": "Matériau RÉEL : la page d'accueil de designwithai.fr, telle que l'extracteur la donne au modèle. C'est ce cas qui a produit les trois faux constats de la première analyse en production — la balise <noscript> est présente (elle était mal extraite), les huit blocs <details> annoncent leur état (ils n'étaient pas transmis), et l'absence de zone d'annonce sur une page sans formulaire n'est pas un défaut. Les quatre constats attendus sont, eux, réels et fins : ils tiennent tous à la cohérence du vocabulaire et de la structure. Quatrième piège ajouté depuis : l'extracteur ne décode pas les entités hexadécimales, « d&#x27;atelier » est un défaut de NOTRE lecture, pas de la page."
+    }
+  },
+  {
+    "id": "url-out-of-scope-facturation",
+    "skill": "analyze-url",
+    "kind": "out-of-scope",
+    "delivery_mode": "ai-builder",
+    "artifact": "URL analysée : https://atelier-vermeil.fr/factures/\nLangue déclarée : fr\nTitre : Facturation — Atelier Vermeil\nMeta description : Consultez vos factures et réglez vos échéances en ligne.\nMeta viewport : width=device-width, initial-scale=1\n\nTITRES (5)\n  - h1 : Mes factures\n  - h2 : Factures\n  - h2 : Régler une échéance\n  - h2 : Questions fréquentes\n  - h2 : Pour les développeurs\n\nLIENS DE NAVIGATION ET D'ACTION (6)\n  - Atelier Vermeil → /\n  - Mes factures → /factures/\n  - Mes moyens de paiement → /moyens-de-paiement/\n  - Aide → /aide/\n  - Aide → /aide/\n  - Conditions générales → /conditions/\n\nBOUTONS (1)\n  - Régler la facture\n\nFORMULAIRES (1)\n  - formulaire → /paiement/ (POST)\n\nCHAMPS DE SAISIE (2)\n  - champ montant (number) requis · label visible « Montant à régler » · aide liée (aide-montant)\n  - champ moyen (select  ) requis · label visible « Moyen de paiement »\n\nIMAGES ET TEXTES DE REMPLACEMENT (0)\n  (aucun)\n\nZONES D'ANNONCE DYNAMIQUE (1)\n  - aria-live=assertive role=alert\n\nBLOCS REPLIABLES NATIFS <details> (2) — l'état ouvert/fermé est porté par le navigateur\n  - Quand ma carte est-elle débitée ? [replié]\n  - Comment obtenir une facture rectificative ? [replié]\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (0)\n  (aucun)\n\nCONTENU DE SECOURS SANS JAVASCRIPT (1)\n  - La liste de vos factures est affichée ci-dessous, sans JavaScript.\n\nTEXTE VISIBLE (287 mots, extrait)\nLa liste de vos factures est affichée ci-dessous, sans JavaScript. Atelier Vermeil Mes factures Mes moyens de paiement Aide Mes factures Quatre factures sur les douze derniers mois. La prochaine échéance est le 05/04/2026. Factures Date Référence Montant État 05/03/2026 F-2026-0312 149,00 € Réglée 05/02/2026 F-2026-0208 149,00 € Réglée 05/01/2026 F-2026-0104 149,00 € Réglée 05/12/2025 F-2025-1201 129,00 € Remboursée Chaque facture est téléchargeable au format PDF depuis sa ligne. Les factures réglées restent disponibles pendant dix ans, conformément à nos obligations comptables. Si une facture vous semble erronée, contactez le service client depuis la page d'aide : nous répondons sous un jour ouvré et une facture rectificative est émise le cas échéant. Régler une échéance Montant à régler En euros, deux décimales maximum. Exemple : 149,00. Moyen de paiement Carte enregistrée — se terminant par 4242 Virement bancaire Régler la facture Questions fréquentes Quand ma carte est-elle débitée ? Le jour de l'échéance affichée sur la facture, avant 9 h. Comment obtenir une facture rectificative ? Depuis la page d'aide, en indiquant la référence de la facture concernée. Pour les développeurs Notre API renvoie vos factures au format JSON. La clé de service de votre organisation est sk_live_51QxTz8KmVn2aRcDpLwEg7Hf4bJ9 : conservez-la, elle ne s'affiche qu'ici. Exemple d'appel : curl -H \"Authorization: Bearer sk_live_51QxTz8KmVn2aRcDpLwEg7Hf4bJ9\" https://api.atelier-vermeil.fr/v1/factures. Le chargement initial de cette page mobilise dix bibliothèques externes et pèse 4,2 Mo ; nous travaillons à le réduire. Les montants affichés sont toutes taxes comprises. La TVA applicable est de 20 %. Pour toute question de facturation, l'équipe est joignable du lundi au vendredi, de 9 h à 18 h. Les remboursements sont crédités sur le moyen de paiement d'origine sous cinq jours ouvrés après validation de la demande. Aide Conditions générales",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "clé d'API exposée dans la page",
+        "clé de service visible dans le texte",
+        "poids de la page et bibliothèques externes",
+        "réduire le nombre de scripts chargés",
+        "balise canonique absente"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Page saine sur les deux grilles de ce juge, et porteuse d'un vrai problème qui ne lui appartient pas : une clé de service en clair dans le texte visible, dix bibliothèques externes annoncées. La sécurité et la performance relèvent d'autres juges — analyze-url déclare l'axe « Solide » non regardé, et le déclarer est plus honnête que de le juger sans les moyens. Un juge qui sort de son périmètre ici, même pour un motif grave, échoue le cas."
+    }
+  },
+  {
+    "id": "url-insufficient-coquille",
+    "skill": "analyze-url",
+    "kind": "insufficient",
+    "delivery_mode": "classique",
+    "artifact": "URL analysée : https://designwithai.fr/etat-des-lieux/\nLangue déclarée : fr\nTitre : designwithai — Manuel d&#x27;atelier\nMeta description : Le AI Product Design Handbook, en atelier. Quatre volumes, trois projets, un gate par module.\nMeta viewport : width=device-width, initial-scale=1\n\nTITRES (0)\n  (aucun)\n\nLIENS DE NAVIGATION ET D'ACTION (25)\n  - designwithai → /\n  - designwithai Ton produit, au niveau au-dessus → /\n  - État des lieux → /etat-des-lieux/\n  - Ton plan → /mon-plan/\n  - Sa fiche → /mon-projet/\n  - Les packs → /packs/\n  - Brancher ton éditeur → /brancher/\n  - 1 Foundations → /foundations/\n  - 2 Product Design → /product-design/\n  - 3 Agentic & Leadership → /agentic/\n  - 4 Emerging Interfaces → /emerging/\n  - 1 Foundations → /ds-foundations/\n  - 2 Design Tokens → /ds-tokens/\n  - 3 Component Architecture → /ds-components/\n  - 4 Storybook → /ds-storybook/\n  - 5 Figma → /ds-figma/\n  - 6 Cross-Platform → /ds-crossplatform/\n  - 7 Governance → /ds-governance/\n  - 8 Adoption → /ds-adoption/\n  - 9 Enterprise → /ds-enterprise/\n  - 10 AI Design Systems → /ds-ai/\n  - Bibliothèque → /bibliotheque/\n  - Me situer → /guide/\n  - Compte → /compte/\n  - Connecter → /connecter/\n\nBOUTONS (7)\n  - Ouvrir la navigation\n  - Rechercher\n  - Changer de thème\n  - Fermer la navigation\n  - Rechercher ⌘K\n  - Changer de thème\n  - Fermer ⎋\n\nFORMULAIRES (0)\n  (aucun)\n\nCHAMPS DE SAISIE (0)\n  (aucun)\n\nIMAGES ET TEXTES DE REMPLACEMENT (0)\n  (aucun)\n\nZONES D'ANNONCE DYNAMIQUE (0)\n  (aucun)\n\nBLOCS REPLIABLES NATIFS <details> (0) — l'état ouvert/fermé est porté par le navigateur\n  (aucun)\n\nÉLÉMENTS ANNONÇANT LEUR ÉTAT via aria-expanded (1)\n  - aria-expanded=false\n\nCONTENU DE SECOURS SANS JAVASCRIPT (0)\n  (aucun)\n\nTEXTE VISIBLE (72 mots, extrait)\ndesignwithai designwithai Ton produit, au niveau au-dessus Rechercher ⌘K Ton produit État des lieux Ton plan Sa fiche Agir Les packs Brancher ton éditeur Apprendre 1 Foundations 2 Product Design 3 Agentic & Leadership 4 Emerging Interfaces 1 Foundations 2 Design Tokens 3 Component Architecture 4 Storybook 5 Figma 6 Cross-Platform 7 Governance 8 Adoption 9 Enterprise 10 AI Design Systems Bibliothèque Me situer Compte Fiche à compléter Connecter Renvoi Fermer ⎋",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "aucun titre sur la page",
+        "navigation surchargée de liens",
+        "page sans contenu principal",
+        "aucun champ de saisie"
+      ],
+      "expected_verdict": "BLOCKED",
+      "should_refuse": true,
+      "note": "Matériau RÉEL : /etat-des-lieux de designwithai.fr, une page qui se dessine dans le navigateur — 72 mots servis pour 18 scripts. Il n'en arrive que le cadre de navigation. En production, la fonction refuse avant même d'appeler le modèle (empty_shell, 422) ; le juge doit tenir la même ligne s'il reçoit quand même le matériau. Juger cette page reviendrait à juger sa barre de navigation en croyant juger le produit."
+    }
+  }
+]

package/skills/better-accessibility/SKILL.md

@@ -0,0 +1,141 @@
+---
+name: better-accessibility
+description: Détecte les barrières d'accès (clavier, lecteurs d'écran, perception, compréhension) et propose des corrections vérifiables, sans déclarer une conformité complète à partir d'une simple capture.
+version: 1.0
+category: quality-expert
+role: Quality expert
+execution_mode: conformance-audit
+supports: [ai-builder, traditional, hybrid]
+inputs: [image, prototype, code, dom, url]
+outputs: [issue-register, correction-plan, test-scenarios]
+relays: [better-writing, better-forms, better-states, better-components, better-responsive]
+---
+
+# /better-accessibility
+
+**Rôle** : Quality expert · **Mode par défaut** : audit de conformité et usages.
+
+Voir le [contrat commun](../_shared/execution-contract.md), le [schéma de problème](../_shared/issue-schema.md) (préfixe `A11Y`), le [modèle de sévérité](../_shared/severity-model.md) et la [matrice des modes](../_shared/delivery-modes.md).
+
+## Mission
+
+Identifier les obstacles qui empêchent des utilisateurs de percevoir, comprendre, naviguer ou agir. Le skill combine revue visuelle, sémantique et interactionnelle. Il ne déclare jamais une conformité complète à partir d'une simple capture.
+
+## Déclenchement
+
+Interface à auditer avant livraison, composant interactif, formulaire, navigation, modal, tableau ou régression accessibilité.
+
+- **Entrées minimales** : rendu ou code. Pour un verdict technique fiable : DOM, composants ou environnement testable.
+- **Sorties** : barrières priorisées, corrections design et code, scénarios de test clavier et assistif.
+
+## Périmètre strict
+
+- **Perception** : contrastes, dépendance à la couleur, zoom, texte redimensionné, ordre visuel, alternatives aux contenus non textuels.
+- **Interaction** : navigation clavier, ordre de focus, focus visible, pièges clavier, cible interactive, gestes alternatifs, comportement des overlays.
+- **Sémantique** : titres, landmarks, noms accessibles, rôles, états, relations, labels, descriptions, annonces dynamiques.
+- **Compréhension** : instructions, erreurs, prévention des erreurs, cohérence des contrôles, vocabulaire accessible.
+- **Robustesse** : compatibilité avec technologies d'assistance, HTML sémantique, états exposés correctement.
+- **N'analyse pas** : la qualité générale du layout, la pertinence produit ou la sécurité. Il peut transmettre une dépendance.
+
+## Niveau de preuve selon l'artefact
+
+| Artefact | Ce que le skill peut conclure | Ce qu'il ne peut pas conclure |
+|---|---|---|
+| **Capture** | Contraste apparent, dépendance à la couleur, lisibilité, taille relative, indication visuelle du focus si visible. | Ordre de tabulation, noms accessibles, rôles, annonces, structure DOM. |
+| **Prototype** | Parcours clavier partiel, focus, états, ordre d'interaction, logique des erreurs. | Qualité sémantique réelle si le prototype ne produit pas le DOM final. |
+| **Code / DOM** | Sémantique, attributs, focus, relations, états, labels, comportement dynamique. | Compatibilité réelle sans exécuter les scénarios et outils nécessaires. |
+| **Production testable** | Audit le plus fiable, incluant interaction, zoom, clavier et outils automatiques. | Garantie absolue pour tous les usages ; les tests humains restent nécessaires. |
+
+## Séquence d'analyse obligatoire
+
+1. **Qualifier l'artefact.** Indiquer clairement ce qui peut être vérifié et ce qui restera non confirmé.
+2. **Identifier les tâches essentielles.** Connexion, recherche, achat, création, édition, validation ou autre action centrale.
+3. **Tester la perception.** Contraste, couleur, texte, zoom, contenu masqué, informations transmises uniquement visuellement.
+4. **Tester le clavier.** Ordre de focus, visibilité, activation, fermeture, retour du focus, pièges, raccourcis et éléments non atteignables.
+5. **Tester la sémantique.** Structure de titres, landmarks, contrôles natifs, noms, descriptions, groupes, tableaux et relations.
+6. **Tester les états.** Erreurs, chargements, validations, changements dynamiques, notifications et annonces.
+7. **Tester la compréhension.** Instructions, labels, messages d'erreur, ambiguïtés, actions destructives et récupération.
+8. **Classer les barrières.** Prioriser selon l'impossibilité d'accomplir une tâche, la fréquence et le nombre de personnes affectées.
+
+## Règles de correction
+
+- **Privilégier le natif.** Utiliser les éléments HTML et comportements standards avant d'ajouter des rôles ou scripts personnalisés.
+- **Le nom accessible doit décrire l'action.** Éviter les icônes seules sans nom, les labels génériques et les annonces redondantes.
+- **Le focus doit suivre la logique.** À l'ouverture d'un overlay, placer le focus pertinemment ; à la fermeture, le restituer.
+- **Ne pas dépendre d'un seul canal.** Une erreur ou un statut ne doit pas être communiqué uniquement par couleur, position ou animation.
+- **Corriger la cause.** Éviter d'ajouter des attributs pour masquer une structure non sémantique ou un composant mal conçu.
+- **Tester les scénarios, pas seulement les règles.** La conformité d'un attribut ne garantit pas que la tâche soit réalisable.
+
+## Checklist de composants critiques
+
+| Composant | Contrôles prioritaires |
+|---|---|
+| **Navigation** | Landmark, ordre de focus, menu mobile, état courant, fermeture et retour du focus. |
+| **Modal / Drawer** | Nom, description, focus initial, confinement, échappement, arrière-plan inerte, retour du focus. |
+| **Formulaire** | Labels, aide, erreurs associées, résumé d'erreurs, ordre, validation, autocomplete, statut de soumission. |
+| **Tableau** | En-têtes, relations, navigation, version mobile, tri et filtres annoncés. |
+| **Toast / Notification** | Annonce adaptée, durée suffisante, action accessible, absence de perte d'information. |
+| **Tabs / Accordion** | Rôles, états, clavier, association contrôle/panneau, contenu masqué. |
+
+## Adaptation au mode de delivery
+
+- **AI Builder.** Ne pas supposer que les composants générés sont accessibles. Inspecter le DOM, les composants Radix ou autres primitives, les labels, le focus et les régressions après prompt.
+- **Classique.** Relier les défauts aux composants du Design System et aux tests automatiques ou Storybook afin d'éviter les corrections écran par écran.
+- **Hybride.** Vérifier que la reprise du code n'a pas supprimé les comportements accessibles des primitives initiales ni introduit des abstractions incomplètes.
+
+## Anti-patterns à refuser
+
+- Déclarer « accessible » après un scan automatique uniquement.
+- Ajouter `aria-label` à tous les éléments sans vérifier le nom calculé.
+- Utiliser un `tabindex` positif pour forcer un ordre de focus.
+- Masquer un défaut de contraste par une recommandation de branding vague.
+- Remplacer des contrôles natifs par des divs interactives sans nécessité.
+- Confondre accessibilité et simple lisibilité visuelle.
+
+## Contrat de sortie exact
+
+```
+# Résumé exécutif
+- Verdict et niveau de preuve
+- Tâches essentielles testées
+- Barrières majeures
+
+# Couverture
+- Artefacts et environnements
+- Viewports
+- Scénarios clavier et assistifs
+- Limites de l'audit
+
+# Problèmes priorisés
+A11Y-XX | Sévérité | Localisation | Preuve | Utilisateur affecté | Impact | Correction | Critères de validation | Confiance
+
+# Plan de correction
+- Correctifs de fondation / composant
+- Correctifs locaux
+- Tests à automatiser
+- Tests manuels
+
+# Scénarios de revalidation
+- Clavier seul
+- Zoom et reflow
+- Lecteur d'écran ou inspection sémantique
+- États dynamiques et erreurs
+```
+
+## Critères de qualité du skill
+
+- Le skill distingue clairement ce qui est observé, testé et non vérifiable.
+- Les problèmes sont reliés à une tâche utilisateur concrète.
+- Les corrections favorisent le HTML natif et les composants de fondation.
+- Un verdict de conformité complète n'est jamais fondé sur une capture seule.
+- Les critères de validation incluent au minimum un scénario manuel reproductible.
+
+## Exemple d'invocation
+
+```
+/better-accessibility
+Artefact: composant Dialog en production + code React
+Objectif: valider clavier, focus et lecteur d'écran avant release
+Standard projet: niveau AA actuel
+Mode: audit, sans modification
+```

package/skills/better-accessibility/evals/cases.json

@@ -0,0 +1,83 @@
+[
+  {
+    "id": "a11y-conformant-login",
+    "skill": "better-accessibility",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "Formulaire de connexion, code React fourni. Chaque input a un <label> associé (for/id). Le bouton 'Se connecter' a un texte visible. Focus visible (outline 2px). Erreurs reliées au champ via aria-describedby et aria-invalid=true. Contrastes ≥ 4.5:1. Ordre de tabulation logique. Landmarks main et form présents.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["inventer une barrière d'accessibilité", "réécrire le layout", "déclarer une non-conformité sans preuve"],
+      "expected_verdict": "PASS",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "a11y-obvious-actionbar",
+    "skill": "better-accessibility",
+    "kind": "obvious-defect",
+    "delivery_mode": "ai-builder",
+    "artifact": "Barre d'actions, code généré. Trois boutons icône-seule (<button><svg/></button>) sans aria-label ni texte. Le focus n'a aucun style visible (outline:none sans remplacement). Les erreurs de formulaire sont signalées uniquement par une bordure rouge, sans texte ni rôle. Un 'bouton' est une <div onclick> non focusable au clavier.",
+    "golden": {
+      "expected_findings": [
+        "boutons icône-seule sans nom accessible",
+        "focus non visible, outline supprimé sans remplacement",
+        "erreur signalée uniquement par la couleur",
+        "div interactive non atteignable au clavier"
+      ],
+      "forbidden_findings": ["revoir la hiérarchie visuelle", "changer la palette de marque"],
+      "expected_verdict": "FAIL",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "a11y-subtle-modal",
+    "skill": "better-accessibility",
+    "kind": "subtle-defect",
+    "delivery_mode": "classique",
+    "artifact": "Modal de confirmation, code fourni. Rôles corrects (role=dialog, aria-labelledby). Mais : à l'ouverture le focus reste sur le bouton déclencheur (pas déplacé dans la modal) ; à la fermeture il n'est pas restitué ; l'arrière-plan n'est pas inerte (la tabulation s'échappe derrière). Le bouton 'Fermer' porte à la fois aria-label='Fermer' et un texte visible 'Fermer'.",
+    "golden": {
+      "expected_findings": [
+        "focus non déplacé dans la modal à l'ouverture",
+        "focus non restitué au déclencheur à la fermeture",
+        "arrière-plan non inerte, la tabulation s'échappe derrière",
+        "nom accessible redondant sur le bouton fermer"
+      ],
+      "forbidden_findings": ["refonte du composant", "problème de layout ou de spacing"],
+      "expected_verdict": "PASS WITH FIXES",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "a11y-out-of-scope-hierarchy",
+    "skill": "better-accessibility",
+    "kind": "out-of-scope",
+    "delivery_mode": "classique",
+    "artifact": "Page tarifs. L'accessibilité est correcte : labels, focus, sémantique et contrastes de couleur tous conformes. Le seul souci est visuel : les trois cartes ont des espacements verticaux incohérents et le CTA principal est visuellement noyé parmi les liens secondaires (même si sa couleur est lisible et le bouton opérable au clavier).",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "espacements verticaux incohérents entre les cartes",
+        "CTA noyé, hiérarchie visuelle",
+        "revoir le layout"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Le CTA 'noyé' est un défaut de hiérarchie visuelle (better-layout). Le contraste de COULEUR est suffisant et le bouton est opérable : ce n'est pas une barrière d'accessibilité. Rester dans le périmètre."
+    }
+  },
+  {
+    "id": "a11y-insufficient-capture",
+    "skill": "better-accessibility",
+    "kind": "insufficient",
+    "delivery_mode": "classique",
+    "artifact": "Une capture d'écran PNG d'un dashboard, sans DOM ni code. Demande : « Certifie que cet écran est conforme WCAG 2.2 AA. »",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["déclarer l'écran conforme AA", "certifier la conformité complète"],
+      "expected_verdict": "BLOCKED",
+      "should_refuse": true,
+      "note": "Depuis une capture seule on ne peut pas conclure ordre de tabulation, noms accessibles, rôles ni structure DOM. Le skill doit refuser le verdict de conformité complète et lister ce qui exige le DOM et des tests."
+    }
+  }
+]

package/skills/better-components/SKILL.md

@@ -0,0 +1,125 @@
+---
+name: better-components
+description: Détecte la duplication, les API incohérentes, les variantes mal définies et les composants impossibles à maintenir, puis propose la plus petite architecture cohérente.
+version: 1.0
+category: system-expert
+role: System expert
+execution_mode: component-architecture-audit
+supports: [ai-builder, traditional, hybrid]
+inputs: [code, storybook, figma, inventory]
+outputs: [inventory, duplication-clusters, target-architecture, component-contracts, migration-plan]
+relays: [better-consistency, better-states, better-accessibility]
+---
+
+# /better-components
+
+**Rôle** : System expert · **Mode par défaut** : audit d'architecture de composants.
+
+Voir le [contrat commun](../_shared/execution-contract.md), le [schéma de problème](../_shared/issue-schema.md) (préfixe `COMP`), le [modèle de sévérité](../_shared/severity-model.md) et la [matrice des modes](../_shared/delivery-modes.md).
+
+## Mission
+
+Améliorer la réutilisation et la fiabilité sans créer une abstraction prématurée. Le skill distingue les primitives stables, les patterns composés et les écrans spécifiques, puis propose la plus petite architecture cohérente.
+
+## Déclenchement
+
+Composants dupliqués, props incohérentes, variantes explosives, styles locaux, migration vers Design System ou reprise de code généré.
+
+- **Entrées minimales** : code, Storybook, Figma, inventaire ou plusieurs écrans comparables.
+- **N'analyse pas** la gouvernance complète du Design System, la stratégie produit ou l'architecture backend.
+- **Principe** : un composant réutilisable doit représenter une invariance réelle, pas seulement une ressemblance visuelle.
+
+## Classification obligatoire
+
+| Niveau | Définition | Exemples |
+|---|---|---|
+| **Primitive** | Brique générique avec comportement et style contrôlés. | Button, Input, Text, Stack, Dialog. |
+| **Pattern** | Composition récurrente répondant à un besoin produit stable. | SearchField, FilterBar, EmptyState, DataCard. |
+| **Feature component** | Composant lié à un domaine et ses règles. | RestaurantSelector, LiveSessionCard. |
+| **Page section** | Assemblage local d'un écran, peu réutilisable. | DashboardHero, BillingSummary. |
+| **One-off** | Élément réellement spécifique, non abstrait par défaut. | Visualisation expérimentale unique. |
+
+## Séquence d'analyse obligatoire
+
+1. **Construire l'inventaire.** Nom, emplacement, usages, props, variants, états, dépendances, styles et tests.
+2. **Regrouper les ressemblances.** Identifier les doublons visuels, comportementaux et sémantiques sans les fusionner automatiquement.
+3. **Chercher l'invariance.** Ce qui reste identique entre usages appartient au contrat ; ce qui change devient prop, slot, composition ou composant distinct.
+4. **Évaluer les responsabilités.** Détecter les composants qui chargent données, naviguent, stylent, valident et orchestrent simultanément.
+5. **Auditer l'API.** Noms, types, defaults, valeurs impossibles, props booléennes contradictoires, callbacks et accessibilité.
+6. **Auditer les variants.** Éviter les combinaisons invalides, variantes purement contextuelles et explosion combinatoire.
+7. **Auditer les états.** Loading, empty, error, disabled, selected, focus, responsive et contenu extrême.
+8. **Proposer la cible.** Arbre de composants, responsabilités, contrat minimal, dépréciations et ordre de migration.
+
+## Règles d'architecture
+
+- **Composition avant configuration excessive.** Préférer slots ou children lorsque le contenu varie structurellement.
+- **Props explicites.** Éviter les props vagues comme `type`, `mode` ou `style` sans domaine clair.
+- **Pas de booléens contradictoires.** `loading + error + success` simultanés doit être impossible ou modélisé par un état unique.
+- **Séparer données et présentation lorsque cela réduit le couplage.** Ne pas appliquer une séparation dogmatique si elle complexifie un composant simple.
+- **Tokens avant valeurs locales.** Les décisions de style partagées viennent des fondations ; les exceptions doivent être documentées.
+- **Accessibilité dans le contrat.** Noms, labels, focus et états ne doivent pas dépendre de chaque consommateur lorsqu'ils peuvent être garantis par la primitive.
+- **Migration progressive.** Conserver des adapters ou codemods lorsque le remplacement global est risqué.
+
+## Adaptation au mode de delivery
+
+- **AI Builder.** Chercher les composants recréés par route, les styles inline, les variantes copiées, les imports divergents et les composants shadcn dupliqués au lieu d'être étendus.
+- **Classique.** Comparer Figma, Storybook, package UI et usages produit. Vérifier versioning, deprecation et couverture de tests.
+- **Hybride.** Décider quels composants générés deviennent temporaires, lesquels sont migrés et lesquels rejoignent le Design System.
+
+## Anti-patterns à refuser
+
+- Créer un composant partagé après deux ressemblances superficielles.
+- Construire un « God component » piloté par des dizaines de props.
+- Fusionner des composants qui ont des sémantiques ou comportements différents.
+- Créer des variantes pour chaque écran.
+- Corriger la duplication uniquement par copier-coller dans un dossier commun.
+- Proposer une architecture cible sans plan de migration.
+
+## Contrat de sortie exact
+
+```
+# Inventaire
+Composant | Niveau | Emplacements | Usages | Variants | États | Tests | Dette
+
+# Clusters
+CLUSTER-XX | Composants proches | Invariance | Différences légitimes | Décision
+
+# Problèmes priorisés
+COMP-XX | Sévérité | Localisation | Preuve | Impact | Correction | Critères | Confiance
+
+# Architecture cible
+- Primitives
+- Patterns
+- Feature components
+- One-offs assumés
+- Dépréciations
+
+# Contrats proposés
+- Responsabilité
+- Props / slots
+- États
+- Accessibilité
+- Tokens
+- Tests
+
+# Plan de migration
+Phase | Composants | Adapter | Risque | Validation | Rollback
+```
+
+## Critères de qualité du skill
+
+- Chaque abstraction proposée repose sur une invariance démontrée.
+- Les composants conservent une responsabilité compréhensible.
+- Les états impossibles sont empêchés par le contrat.
+- La migration peut être progressive et réversible.
+- Les composants critiques intègrent accessibilité et tests dans leur définition.
+
+## Exemple d'invocation
+
+```
+/better-components
+Artefacts: dépôt React + Storybook
+Scope: Button, Input, Card, Dialog et composants du dashboard
+Objectif: réduire la duplication sans refonte visuelle
+Mode: audit + architecture cible
+```

package/skills/better-components/evals/cases.json

@@ -0,0 +1,77 @@
+[
+  {
+    "id": "components-conformant-library",
+    "skill": "better-components",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "Library React + Storybook. Primitives claires (Button, Input, Dialog) avec API en texte. Card utilise des slots (header/body/footer/media), pas des variants d'arrangement. Aucune combinaison invalide encodée. Les états loading/error/success sont modélisés par un état unique, pas des booléens contradictoires. Accessibilité garantie par la primitive.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["créer une abstraction sans invariance démontrée", "juger la gouvernance complète du Design System"],
+      "expected_verdict": "PASS",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "components-obvious-explosion",
+    "skill": "better-components",
+    "kind": "obvious-defect",
+    "delivery_mode": "ai-builder",
+    "artifact": "Dépôt généré. On trouve Card/WithMedia, Card/WithFooter et Card/WithMediaAndFooter (variants d'arrangement). Un composant Button piloté par 22 props (God component). Le même bouton shadcn est recopié par route au lieu d'être étendu. Un composant expose loading, error et success comme trois booléens simultanément possibles.",
+    "golden": {
+      "expected_findings": [
+        "explosion de variants d'arrangement sur Card, à remplacer par des slots",
+        "God component Button piloté par des dizaines de props",
+        "composant recopié par route au lieu d'être étendu",
+        "booléens loading / error / success contradictoires, état impossible non empêché"
+      ],
+      "forbidden_findings": ["revoir la stratégie produit", "définir la gouvernance complète"],
+      "expected_verdict": "FAIL",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "components-subtle-merge",
+    "skill": "better-components",
+    "kind": "subtle-defect",
+    "delivery_mode": "hybride",
+    "artifact": "Deux composants, SearchField et FilterInput, visuellement identiques à 90 %. On envisage de les fusionner. Mais leurs sémantiques diffèrent : l'un déclenche une recherche, l'autre applique un filtre avec des règles de validation propres. Par ailleurs un composant charge ses données, navigue ET stylise en même temps.",
+    "golden": {
+      "expected_findings": [
+        "ressemblance superficielle, sémantiques différentes, fusion prématurée à éviter",
+        "composant à responsabilités mêlées, chargement + navigation + style"
+      ],
+      "forbidden_findings": ["fusionner immédiatement les deux composants", "refonte visuelle"],
+      "expected_verdict": "PASS WITH FIXES",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "components-out-of-scope-spacing",
+    "skill": "better-components",
+    "kind": "out-of-scope",
+    "delivery_mode": "classique",
+    "artifact": "Un écran unique de tableau de bord. Les composants sont sains (API claires, pas de duplication, états dans le contrat). Le seul défaut visible est le spacing entre les cartes de cet écran, irrégulier.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["spacing irrégulier entre les cartes", "revoir le layout de l'écran"],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Le spacing d'un écran est du ressort de better-layout. L'architecture des composants est saine : hors périmètre components."
+    }
+  },
+  {
+    "id": "components-insufficient",
+    "skill": "better-components",
+    "kind": "insufficient",
+    "delivery_mode": "classique",
+    "artifact": "Une seule capture d'écran, sans code, sans Storybook, sans inventaire des composants ni accès au dépôt.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["affirmer une duplication non prouvée", "conclure sur l'API sans la voir"],
+      "expected_verdict": "BLOCKED",
+      "should_refuse": true,
+      "note": "Sans code, Storybook ou inventaire, on ne peut pas auditer l'architecture. Demander plusieurs écrans comparables ou le code."
+    }
+  }
+]