designwithai-mcp 0.1.0

package/skills/better-layout/SKILL.md

@@ -0,0 +1,132 @@
+---
+name: better-layout
+description: Détecte et corrige les problèmes de composition, alignement, spacing, hiérarchie, densité et regroupement visuel d'un écran, page ou composant.
+version: 1.0
+category: design-expert
+role: Design expert
+execution_mode: diagnose-first
+supports: [ai-builder, traditional, hybrid]
+inputs: [image, url, figma, code]
+outputs: [issue-register, correction-plan, acceptance-criteria]
+relays: [better-responsive, better-consistency, better-components, better-accessibility]
+---
+
+# /better-layout
+
+**Rôle** : Design expert · **Mode par défaut** : diagnostic puis correction ciblée.
+
+Voir le [contrat commun](../_shared/execution-contract.md), le [schéma de problème](../_shared/issue-schema.md) (préfixe `LAYOUT`), le [modèle de sévérité](../_shared/severity-model.md) et la [matrice des modes](../_shared/delivery-modes.md).
+
+## Mission
+
+Rendre la structure visuelle lisible, stable et intentionnelle sans redessiner arbitrairement le produit. Le skill explique la logique de chaque correction et préserve les patterns existants lorsqu'ils sont cohérents.
+
+## Déclenchement
+
+Écran, page, composant ou parcours dont la structure visuelle semble confuse, déséquilibrée ou fragile.
+
+- **Utiliser pour** : espacements irréguliers, alignements cassés, densité excessive, contenus flottants, groupes mal définis, grilles incohérentes, CTA noyés, sections sans rythme.
+- **Utiliser aussi pour** : un écran généré par IA qui semble « presque correct » mais manque de structure ; une interface dont le responsive a révélé une architecture de layout fragile.
+- **Ne pas utiliser seul pour** : contenu, navigation, accessibilité complète, logique produit ou composants. Transmettre la dépendance au skill adapté.
+
+## Périmètre strict
+
+- **Analyse** : grille, conteneurs, largeur de lecture, alignements, espacements, proximités, groupements, hiérarchie visuelle, poids relatif, densité, équilibre, rythme vertical, usage de l'espace blanc, stabilité des zones.
+- **N'analyse pas** : la pertinence métier, la justesse des textes, la stratégie de marque, la sécurité, le modèle de données ou la qualité globale des composants.
+- **Tolérance** : un écart peut être intentionnel. Distinguer exception expressive et incohérence accidentelle.
+
+## Informations à identifier avant l'audit
+
+1. **Nature de l'artefact** : capture isolée, page complète, prototype, code, production ou composant.
+2. **Viewport** : dimensions exactes ou catégorie (mobile, tablette, desktop, large desktop).
+3. **Source de vérité** : Figma, code, Design System, Storybook, générateur IA ou production.
+4. **Objectif principal de l'écran** : action ou compréhension que la hiérarchie doit favoriser.
+5. **Contraintes** : grille existante, tokens, framework, contenu dynamique, localisation, densité imposée.
+
+## Séquence d'analyse obligatoire
+
+1. **Lire la page sans zoomer.** Identifier ce qui attire l'œil en premier, deuxième et troisième. Comparer avec l'objectif principal.
+2. **Cartographier les zones.** Conteneur principal, colonnes, sections, groupes, barres fixes, overlays et ruptures.
+3. **Vérifier la grille.** Largeurs, marges, colonnes, alignements verticaux et horizontaux, points d'ancrage, débordements.
+4. **Auditer le spacing.** Espacements récurrents, écarts isolés, ruptures de rythme, logique de proximité.
+5. **Auditer la hiérarchie.** Taille, poids, contraste, position, espace et ordre de lecture. Éviter de corriger uniquement par la taille de police.
+6. **Auditer la densité.** Surcharge, grands vides non intentionnels, zones trop compactes, répétitions visuelles.
+7. **Tester la robustesse.** Contenu plus long, données absentes, traduction, erreurs, changement de viewport. Signaler les layouts qui ne survivront pas.
+8. **Proposer le minimum cohérent.** Conteneurs, groupements et spacing avant les détails décoratifs.
+
+## Règles de décision
+
+- **La proximité doit traduire la relation.** Des éléments liés fonctionnellement sont plus proches que des groupes voisins.
+- **Les alignements doivent créer des axes.** Éviter les micro-décalages qui empêchent l'œil de scanner.
+- **La hiérarchie doit être observable.** L'utilisateur comprend la priorité sans lire tous les textes.
+- **Le spacing doit suivre une logique.** Privilégier les tokens ; sinon proposer une échelle limitée, pas une valeur unique partout.
+- **Le contenu dynamique est la règle.** Ne jamais valider un layout uniquement avec le contenu idéal de la maquette.
+- **La correction la plus simple prévaut.** Ne pas ajouter de cartes, séparateurs ou ombres pour résoudre un problème de mauvais groupement.
+
+## Adaptation au mode de delivery
+
+| Mode | Contrôles supplémentaires | Mode de correction |
+|---|---|---|
+| **AI Builder** | Valeurs codées en dur, wrappers inutiles, styles recréés, régressions après prompt, dépendance à un contenu fixe. | Prompts courts, une zone à la fois, comparaison avant/après, vérification des routes adjacentes. |
+| **Développement classique** | Correspondance avec Figma, tokens de spacing, grid utilitaire, conteneurs partagés, composants de layout. | Correction dans les primitives ou tokens avant les écrans individuels. |
+| **Hybride** | Divergences entre Figma, la sortie du générateur et le code repris par les développeurs. | Définir la source canonique par couche avant de corriger. |
+
+## Anti-patterns à refuser
+
+- Appliquer uniformément 8 px partout sans comprendre la hiérarchie des groupes.
+- Recentrer tous les éléments pour « faire propre ».
+- Ajouter des conteneurs, cards ou bordures sans besoin fonctionnel.
+- Réduire la taille des contenus pour les faire tenir au lieu de corriger l'architecture.
+- Proposer une nouvelle direction visuelle alors qu'un ajustement de structure suffit.
+- Qualifier un écran de « déséquilibré » sans localisation ni preuve.
+
+## Contrat de sortie exact
+
+```
+# Résumé exécutif
+- Verdict: PASS | PASS WITH FIXES | FAIL | BLOCKED
+- Objectif visuel supposé ou confirmé
+- Principaux risques de layout
+
+# Cartographie
+- Viewports analysés
+- Zones et axes structurants
+- Source de vérité
+
+# Problèmes priorisés
+LAYOUT-XX | Sévérité | Localisation | Preuve | Impact | Correction | Critères d'acceptation | Confiance
+
+# Système recommandé
+- Grille et conteneurs
+- Échelle de spacing ou tokens existants à utiliser
+- Règles de groupement et d'alignement
+
+# Plan de correction
+1. Fondations
+2. Structure
+3. Hiérarchie
+4. Détails
+
+# Vérification
+- Viewports et scénarios à retester
+- Régressions adjacentes à contrôler
+```
+
+## Critères de qualité du skill
+
+- Chaque problème est visible ou reproductible.
+- Les corrections sont compatibles avec la source de vérité identifiée.
+- Les recommandations traitent d'abord la structure, puis la décoration.
+- Le skill ne remplace pas `better-responsive` lorsqu'un comportement multi-viewport doit être spécifié.
+- Aucun changement n'est proposé sans critère d'acceptation observable.
+
+## Exemple d'invocation
+
+```
+/better-layout
+Artefact: page dashboard desktop + mobile
+Objectif: rendre les KPI et la prochaine action immédiatement lisibles
+Source de vérité: production
+Contraintes: conserver les composants et la palette actuels
+Mode: diagnostic uniquement
+```

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

@@ -0,0 +1,81 @@
+[
+  {
+    "id": "layout-conformant-pricing",
+    "skill": "better-layout",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "Page pricing, desktop 1440px. Trois cartes de prix alignées sur une grille 12 colonnes, gouttières 24px constantes. Titres 32px, prix 48px, features 16px — hiérarchie claire. CTA primaire (violet plein) une seule fois par carte, aligné en bas. Espacements verticaux multiples de 8. Marges latérales 96px. Testé avec un plan au nom long : aucun débordement.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": ["réécrire la stratégie de pricing", "changer la direction visuelle", "inventer un problème de hiérarchie"],
+      "expected_verdict": "PASS",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "layout-obvious-dashboard",
+    "skill": "better-layout",
+    "kind": "obvious-defect",
+    "delivery_mode": "ai-builder",
+    "artifact": "Dashboard desktop généré. 4 KPI en haut avec des espacements irréguliers (12px, 31px, 8px, 24px entre eux). Le CTA principal 'Créer une alerte' est un lien texte gris clair noyé au milieu de 9 autres liens gris identiques. Grille cassée : la colonne de droite déborde de 40px hors du conteneur à 1280px. Titres et sous-titres à la même taille (18px), hiérarchie indistinguable.",
+    "golden": {
+      "expected_findings": [
+        "espacements irréguliers entre les KPI",
+        "CTA principal noyé, manque de contraste d'importance",
+        "rupture de grille, débordement du conteneur",
+        "hiérarchie typographique absente entre titre et sous-titre"
+      ],
+      "forbidden_findings": ["revoir la stratégie produit", "réécrire les libellés"],
+      "expected_verdict": "FAIL",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "layout-subtle-form",
+    "skill": "better-layout",
+    "kind": "subtle-defect",
+    "delivery_mode": "classique",
+    "artifact": "Formulaire de création de compte, desktop. Globalement propre : grille respectée, tokens de spacing cohérents (8/16/24). Un seul écart : le groupe 'Adresse' (rue, ville, code postal) a le même espacement vertical (24px) entre ses champs qu'entre les groupes distincts — la proximité ne traduit plus le regroupement. Le bouton 'Créer' et le lien 'Annuler' ont le même poids visuel.",
+    "golden": {
+      "expected_findings": [
+        "proximité ne traduit pas le regroupement dans le bloc adresse",
+        "action primaire et secondaire de poids visuel équivalent"
+      ],
+      "forbidden_findings": ["refonte complète", "changer la palette"],
+      "expected_verdict": "PASS WITH FIXES",
+      "should_refuse": false
+    }
+  },
+  {
+    "id": "layout-out-of-scope-copy",
+    "skill": "better-layout",
+    "kind": "out-of-scope",
+    "delivery_mode": "classique",
+    "artifact": "Écran d'onboarding, layout impeccable (grille, spacing, hiérarchie tous corrects). Le seul vrai problème est le texte : le titre 'Optimisez votre synergie' est du jargon vide, et le bouton dit 'Soumettre' au lieu de décrire l'action.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "jargon du titre optimisez votre synergie",
+        "bouton Soumettre microcopy",
+        "réécrire le texte"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Défauts du ressort de better-writing. Rester dans le périmètre = NE PAS les auditer (les signaler en dépendance est toléré, pas les traiter)."
+    }
+  },
+  {
+    "id": "layout-insufficient",
+    "skill": "better-layout",
+    "kind": "insufficient",
+    "delivery_mode": "classique",
+    "artifact": "« Améliore le layout de mon app. » Aucune capture, aucun écran, aucune URL, aucun viewport, aucun composant.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [],
+      "expected_verdict": "BLOCKED",
+      "should_refuse": true,
+      "note": "Sans artefact localisable, le skill doit refuser et lister les preuves manquantes, pas produire un audit."
+    }
+  }
+]

package/skills/better-navigation/SKILL.md

@@ -0,0 +1,170 @@
+---
+name: better-navigation
+description: Juge le chemin ENTRE les écrans — architecture de l'information, cohérence de la navigation, profondeur d'accès aux tâches fréquentes, étiquettes, écrans orphelins, retours impossibles et indication de position. Ne juge aucun écran isolément.
+version: 1.0
+category: navigation-expert
+role: Navigation & IA expert
+execution_mode: path-and-structure-audit
+supports: [ai-builder, traditional, hybrid]
+inputs: [sitemap, screen-list, routes, prototype, url]
+outputs: [path-map, task-access-matrix, orphan-list, risk-register]
+invoked_by: [better-interface]
+relays: [better-writing, better-consistency, better-states]
+---
+
+# /better-navigation
+
+**Rôle** : Navigation & IA expert · **Mode par défaut** : audit des chemins et de la structure.
+
+Voir le [contrat commun](../_shared/execution-contract.md), le [schéma de problème](../_shared/issue-schema.md) (préfixe `NAV`), le [modèle de sévérité](../_shared/severity-model.md) et la [matrice des modes](../_shared/delivery-modes.md).
+
+## Mission
+
+Neuf skills jugent les écrans un par un. Aucun ne juge **ce qui se passe entre eux** — et c'est là que vivent les produits où chaque écran est correct et où personne ne trouve rien.
+
+Ce skill ne regarde pas un écran. Il regarde la **carte** : ce qui mène où, ce qu'on atteint en combien de pas, ce qu'on ne peut plus quitter, et ce que les étiquettes promettent. Un écran parfait au bout d'un chemin introuvable est un écran mort.
+
+## Périmètre strict
+
+**Analyse** : le rangement de l'information contre les tâches réelles, les étiquettes de navigation, la profondeur d'accès, la cohérence des schémas de navigation d'une section à l'autre, les écrans orphelins, les impasses et retours impossibles, l'indication de position.
+
+**N'analyse pas** : la mise en page d'un écran (`better-layout`), la formulation d'un message (`better-writing`), les états d'un écran donné (`better-states`), la cohérence visuelle des composants (`better-consistency`). Une étiquette de navigation est du ressort de ce skill ; un texte d'aide dans un écran ne l'est pas.
+
+## Ce que le skill reçoit, et ce qui le fait refuser
+
+**Le skill a besoin de voir des CHEMINS.** Une image d'écran n'en montre aucun.
+
+| Entrée | Ce qui devient jugeable |
+|---|---|
+| **Plan de site** ou arborescence | Rangement, profondeur, étiquettes, orphelins. |
+| **Liste d'écrans avec leurs liens** (qui mène où) | Tout, y compris impasses et chemins multiples. |
+| **Arbre de routes** (code) | Structure et profondeur réelles, y compris les écrans jamais liés. |
+| **Prototype cliquable** ou parcours enregistré | Les chemins réellement empruntables, retours compris. |
+| **Captures d'écran, plusieurs, avec leur enchaînement déclaré** | Les chemins déclarés, à traiter comme une déclaration et non comme une preuve. |
+
+> **Une capture isolée ne dit rien d'un parcours.** Un écran, deux écrans sans lien déclaré entre eux, une image de maquette : le skill rend `BLOCKED` et demande ce qui manque. Juger une navigation sur un écran, c'est deviner le plan d'un bâtiment en regardant une porte.
+
+## La règle de l'absence — le garde-fou de cet axe
+
+**Un écran non fourni n'est pas un écran manquant. Le périmètre reçu fait foi.**
+
+- Ne jamais écrire qu'un écran, une section ou une fonctionnalité « manque » : elle est peut-être simplement hors du périmètre transmis. Ce qui se juge, c'est ce qui est **là et mal relié**, pas ce qui n'a pas été montré.
+- **Un orphelin ne se déclare que sur un périmètre déclaré complet.** Sur un extrait, un écran sans lien entrant signifie « son entrée n'est pas dans ce que j'ai reçu », pas « personne ne peut y arriver ». La différence entre les deux est tout ce skill.
+- **Une impasse se prouve par ce qui est écrit**, pas par ce qui n'y est pas : un écran dont la liste de liens sortants est fournie et vide est une impasse ; un écran dont les liens ne sont pas documentés est un non-vérifié.
+- Écrire en tête du rapport si le périmètre est **complet ou partiel**. Tout le reste en dépend.
+
+## La grille
+
+### 1. Le rangement suit-il les tâches ?
+
+- La navigation reflète-t-elle ce que les gens viennent **faire**, ou l'organigramme de l'équipe et les tables de la base ? Un menu qui liste « Utilisateurs, Rôles, Permissions, Journaux » range des tables ; un menu qui liste « Inviter quelqu'un, Gérer les accès » range des tâches.
+- Un objet ne se nomme pas comme une page. *« Les problèmes de nommage sont presque toujours des problèmes de modèle conceptuel »* — quand une étiquette se discute sans fin, c'est le modèle qu'il faut regarder.
+- Deux entrées pour ce qui est en réalité **un seul objet vu deux fois** (« Recherche » et « Résultats », « Projets » et « Espaces ») : c'est un défaut de modèle, pas de menu.
+- La taxonomie retenue porte un **risque assumé** : hiérarchique enferme dans une seule branche, facettée noie sous des facettes non discriminantes, orientée audience crée des silos. Le défaut n'est pas d'avoir choisi ; c'est que le risque du choix se réalise sans que personne l'ait vu venir.
+
+### 2. Les étiquettes
+
+- Une étiquette qui a besoin d'être expliquée doit être changée, pas documentée.
+- Vocabulaire de fabrication en façade : noms de modules internes, sigles maison, noms de tables.
+- Une même chose nommée différemment selon l'endroit d'où on la regarde.
+- Une étiquette qui promet autre chose que ce qu'on trouve derrière — le défaut le plus coûteux du lot, parce qu'il détruit la confiance dans toute la navigation.
+
+### 3. La profondeur, et le point d'entrée réel
+
+- Les tâches fréquentes s'atteignent en peu de pas depuis là où les gens sont, pas depuis l'accueil. **Les gens n'arrivent pas par la home** : ils arrivent par un lien partagé, un signet, une notification, un retour arrière. Une navigation qui ne fonctionne qu'en partant de l'accueil décrit un produit que personne n'utilise.
+- Plat plutôt que profond. Une hiérarchie qui dépasse deux niveaux réclame des repères de position à chaque niveau.
+- Le nombre de pas compte moins que leur évidence : trois pas évidents valent mieux qu'un pas ambigu. Ne jamais compter les clics sans dire s'ils se devinent.
+- Un groupe de navigation qui dépasse une dizaine d'entrées ne se lit plus : il se parcourt.
+
+### 4. La cohérence entre les écrans
+
+- Le même schéma de navigation d'une section à l'autre : ce qui est un onglet ici n'est pas un menu latéral là pour le même type de contenu.
+- Le même objet atteint par deux chemins doit arriver dans le **même état**. Deux chemins qui mènent à deux versions du même écran sont un défaut de navigation, pas un détail.
+- Le retour arrière fait ce qu'il annonce, et ne perd pas le travail en cours.
+
+### 5. Orphelins, impasses et retours
+
+- **Orphelin** : un écran qu'aucun lien du périmètre ne désigne. À ne déclarer que sur périmètre complet (voir la règle de l'absence).
+- **Impasse** : un écran d'où l'on ne peut aller nulle part, sinon en rechargeant ou en revenant par le navigateur.
+- **Retour impossible** : une étape qu'on ne peut pas défaire, un tunnel sans sortie déclarée, une confirmation sans chemin de retour.
+- **Sortie non nommée** : une action qui aboutit sans dire où l'on est arrivé ni ce qu'on peut faire ensuite.
+
+### 6. Où suis-je ?
+
+- La section courante est indiquée dans la navigation.
+- Au-delà de deux niveaux, le chemin parcouru est visible.
+- Un écran atteint par un lien direct dit à quoi il appartient — c'est le corollaire du point d'entrée réel.
+
+## Sévérité sur cet axe
+
+| Sévérité | Sur cet axe |
+|---|---|
+| **Bloquant** | Une tâche essentielle n'a aucun chemin d'accès depuis le produit. Un écran dont on ne peut pas sortir sans recharger. |
+| **Critique** | Une tâche fréquente n'est atteignable que par un chemin non découvrable. Un retour arrière qui détruit le travail en cours. Deux chemins vers le même objet qui aboutissent à deux états différents. Une étiquette qui promet autre chose que ce qu'elle ouvre. |
+| **Majeur** | Profondeur excessive sur une tâche fréquente. Rangement calqué sur l'organigramme ou sur les tables. Schéma de navigation qui change d'une section à l'autre. Aucune indication de section courante au-delà de deux niveaux. |
+| **Mineur** | Un orphelin isolé et sans enjeu. Un groupe de navigation un peu long. Une étiquette perfectible mais comprise. |
+| **Note** | Choix de taxonomie dont le risque est assumé et documenté. |
+
+## Séquence d'audit obligatoire
+
+1. **Déclarer le périmètre et sa complétude.** Ce qui a été reçu, et si l'ensemble des écrans et des liens est là. Refuser si aucun chemin n'est visible.
+2. **Reconstituer la carte.** Écrans, liens entrants et sortants, points d'entrée hors accueil.
+3. **Nommer les tâches fréquentes.** Trois à cinq, tirées de ce que le produit dit faire — pas inventées.
+4. **Tracer chaque tâche** depuis un point d'entrée réel jusqu'à sa fin : pas, décisions, alternatives, retour, sortie.
+5. **Juger le rangement** contre ces tâches, puis les étiquettes.
+6. **Chercher les orphelins et les impasses**, en respectant la règle de l'absence.
+7. **Vérifier la position** : section courante, profondeur, arrivée par lien direct.
+8. **Signaler les dépendances** vers `better-writing`, `better-consistency` ou `better-states` sans développer leur audit.
+
+## Anti-patterns à refuser
+
+- Juger une navigation sur une capture d'écran.
+- Déclarer un écran orphelin sur un périmètre partiel.
+- Compter les clics sans dire s'ils se devinent.
+- Proposer une refonte de l'architecture quand un renommage suffit.
+- Reprocher l'absence d'un écran qui n'était pas dans le périmètre.
+- Recommander un schéma de navigation par préférence (« mettre une sidebar ») plutôt que par la tâche et le nombre d'entrées.
+- Traiter un problème d'étiquette comme un problème de texte : ici, l'étiquette est de l'architecture.
+
+## Contrat de sortie exact
+
+```
+# Verdict
+- Verdict: PASS | PASS WITH FIXES | FAIL | BLOCKED
+- Périmètre reçu: complet | partiel (et ce qui manque)
+- Entrée: plan de site | liste d'écrans et liens | routes | prototype | captures déclarées
+
+# Carte des chemins
+Écran | Liens entrants | Liens sortants | Point d'entrée réel possible
+
+# Accès aux tâches fréquentes
+Tâche | Point d'entrée | Pas | Évidence du chemin | Retour possible | Sortie
+
+# Problèmes priorisés
+NAV-XX | Sévérité | Écran ou lien concerné | Preuve | Impact | Correction | Critères | Confiance
+
+# Orphelins et impasses
+- Écran -> orphelin confirmé | non vérifié (périmètre partiel) | impasse
+
+# À passer à un autre skill
+- Constat pressenti -> skill concerné (sans le développer)
+```
+
+## Critères de qualité du skill
+
+- Le périmètre et sa complétude sont déclarés avant tout constat.
+- Chaque tâche tracée part d'un point d'entrée réel, pas de l'accueil par défaut.
+- Aucun orphelin n'est déclaré sur un périmètre partiel.
+- Chaque constat cite un écran, un lien ou une étiquette, jamais une impression de confusion.
+- Les corrections proposées sont proportionnées : renommer avant de restructurer.
+- Aucun jugement sur un écran isolé n'a franchi la frontière.
+
+## Exemple d'invocation
+
+```
+/better-navigation
+Produit: outil de gestion de dossiers, 18 écrans
+Entrée: liste des écrans avec leurs liens entrants et sortants (périmètre complet)
+Tâches fréquentes: ouvrir un dossier reçu par lien, ajouter une pièce, partager
+Objectif: comprendre pourquoi le support reçoit « je ne trouve pas mes dossiers partagés »
+```

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

@@ -0,0 +1,131 @@
+[
+  {
+    "id": "nav-conformant-releves",
+    "skill": "better-navigation",
+    "kind": "conformant",
+    "delivery_mode": "classique",
+    "artifact": "ENTRÉE : liste des écrans avec leurs liens entrants et sortants.\nPÉRIMÈTRE : complet — les 14 écrans du produit, tous les liens documentés.\n\nPRODUIT : outil de suivi de relevés de compteurs, pour des particuliers.\nTÂCHES FRÉQUENTES DÉCLARÉES : ajouter un relevé · retrouver un relevé passé ·\najouter un compteur.\n\nNAVIGATION PRINCIPALE (4 entrées, visibles sur tous les écrans)\n  Mes relevés · Mes compteurs · Ma consommation · Mon compte\n\nÉCRANS\n\n  Accueil (/)\n    entrants : navigation principale (logo), lien externe partagé\n    sortants : Mes relevés, Mes compteurs, Ma consommation, Mon compte, Aide\n\n  Mes relevés (/releves)\n    entrants : navigation principale, Accueil, Ajouter un relevé (après envoi),\n               Détail d'un relevé (retour)\n    sortants : Ajouter un relevé, Détail d'un relevé, Mes compteurs\n\n  Ajouter un relevé (/releves/nouveau)\n    entrants : Mes relevés, Accueil, Détail d'un compteur\n    sortants : Mes relevés (après envoi), Mes relevés (annuler)\n\n  Détail d'un relevé (/releves/[id])\n    entrants : Mes relevés, lien partagé direct\n    sortants : Mes relevés, Modifier ce relevé, Détail d'un compteur\n    indique : « Mes relevés › Relevé du 12/03/2026 »\n\n  Modifier ce relevé (/releves/[id]/modifier)\n    entrants : Détail d'un relevé\n    sortants : Détail d'un relevé (après envoi), Détail d'un relevé (annuler)\n\n  Mes compteurs (/compteurs)\n    entrants : navigation principale, Accueil, Mes relevés, Détail d'un compteur\n    sortants : Ajouter un compteur, Détail d'un compteur\n\n  Ajouter un compteur (/compteurs/nouveau)\n    entrants : Mes compteurs\n    sortants : Mes compteurs (après envoi), Mes compteurs (annuler)\n\n  Détail d'un compteur (/compteurs/[id])\n    entrants : Mes compteurs, Détail d'un relevé, lien partagé direct\n    sortants : Mes compteurs, Ajouter un relevé, Modifier ce compteur\n    indique : « Mes compteurs › Compteur cuisine »\n\n  Modifier ce compteur (/compteurs/[id]/modifier)\n    entrants : Détail d'un compteur\n    sortants : Détail d'un compteur (après envoi), Détail d'un compteur (annuler)\n\n  Ma consommation (/consommation)\n    entrants : navigation principale, Accueil\n    sortants : Mes relevés\n\n  Mon compte (/compte)\n    entrants : navigation principale, Accueil\n    sortants : Accueil, Aide, Se déconnecter\n\n  Aide (/aide)\n    entrants : Accueil, Mon compte, pied de page de tous les écrans\n    sortants : Accueil, Nous écrire\n\n  Nous écrire (/aide/contact)\n    entrants : Aide\n    sortants : Aide (après envoi), Aide (annuler)\n\n  Se déconnecter (/deconnexion)\n    entrants : Mon compte\n    sortants : Accueil\n\nINDICATION DE POSITION\n  L'entrée de navigation correspondant à la section courante est marquée sur les\n  14 écrans. Les écrans de détail affichent leur chemin.\n\nACCÈS AUX TÂCHES DÉCLARÉES, depuis un lien partagé vers Détail d'un relevé\n  ajouter un relevé      : Détail d'un relevé -> Détail d'un compteur -> Ajouter (2 pas)\n                           ou navigation principale -> Mes relevés -> Ajouter (2 pas)\n  retrouver un relevé    : navigation principale -> Mes relevés (1 pas)\n  ajouter un compteur    : navigation principale -> Mes compteurs -> Ajouter (2 pas)",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "reprocher l'absence d'un écran de recherche",
+        "aucun fil d'ariane sur les écrans de premier niveau",
+        "la navigation principale gagnerait une barre latérale",
+        "l'écran de déconnexion est une impasse",
+        "trop peu d'entrées dans la navigation principale"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Navigation saine et jugeable : périmètre complet, quatre entrées nommées par ce qu'on vient faire, chaque écran atteignable par au moins une entrée, chaque formulaire avec sa sortie et son annulation, position marquée partout, chemin affiché sur les écrans de détail. Les trois tâches déclarées s'atteignent en deux pas depuis un lien partagé — pas depuis l'accueil, c'est le test qui compte. Deux pièges : « Se déconnecter » a bien une sortie (Accueil), et l'absence d'écran de recherche n'est pas un défaut de navigation, c'est un choix de produit hors périmètre de ce juge."
+    }
+  },
+  {
+    "id": "nav-conformant-routes",
+    "skill": "better-navigation",
+    "kind": "conformant",
+    "delivery_mode": "ai-builder",
+    "artifact": "ENTRÉE : arbre des routes du dépôt (Next.js, app router).\nPÉRIMÈTRE : complet — toutes les routes du produit, plus les liens sortants\nrelevés par recherche des composants Link dans le code.\n\napp/\n  page.tsx                         Accueil\n  dossiers/page.tsx                Mes dossiers\n  dossiers/[id]/page.tsx           Détail d'un dossier\n  dossiers/[id]/pieces/page.tsx    Pièces du dossier\n  dossiers/nouveau/page.tsx        Nouveau dossier\n  partages/page.tsx                Partagés avec moi\n  partages/[id]/page.tsx           Détail d'un dossier partagé\n  recherche/page.tsx               Recherche\n  compte/page.tsx                  Mon compte\n  aide/page.tsx                    Aide\n\nNAVIGATION PRINCIPALE (4 entrées)\n  Mes dossiers · Partagés avec moi · Recherche · Mon compte\n\nLIENS SORTANTS RELEVÉS DANS LE CODE\n\n  /                    -> /dossiers, /partages, /recherche, /aide\n  /dossiers            -> /dossiers/nouveau, /dossiers/[id], /recherche\n  /dossiers/[id]       -> /dossiers, /dossiers/[id]/pieces, /partages\n  /dossiers/[id]/pieces-> /dossiers/[id]\n  /dossiers/nouveau    -> /dossiers (après envoi), /dossiers (annuler)\n  /partages            -> /partages/[id]\n  /partages/[id]       -> /partages, /dossiers/[id]/pieces\n  /recherche           -> /dossiers/[id], /partages/[id]\n  /compte              -> /, /aide\n  /aide                -> /\n\nLIENS ENTRANTS RELEVÉS\n  /compte : navigation principale uniquement\n  toutes les autres routes : au moins deux entrées, listées ci-dessus\n\nINDICATION DE POSITION\n  Section courante marquée dans la navigation principale sur les 10 routes.\n  Chemin affiché sur /dossiers/[id] et /dossiers/[id]/pieces.\n\nTÂCHES FRÉQUENTES DÉCLARÉES\n  ouvrir un dossier reçu par lien · ajouter une pièce · retrouver un dossier partagé",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "l'écran du compte est orphelin faute de lien entrant",
+        "reprocher l'absence d'un écran de notifications",
+        "la profondeur des routes imbriquées est excessive",
+        "aucun fil d'ariane sur la page d'accueil"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Même verdict sur une AUTRE ENTRÉE : un arbre de routes, pas un plan de site. La grille doit tenir quelle que soit la forme du matériau, c'est l'objet de ce cas. Le piège est /compte : son seul lien entrant est la navigation principale — et c'est suffisant, une entrée permanente visible sur toutes les routes n'est pas une absence d'entrée. Le déclarer orphelin serait compter les liens sans regarder ce qu'ils sont."
+    }
+  },
+  {
+    "id": "nav-obvious-organigramme",
+    "skill": "better-navigation",
+    "kind": "obvious-defect",
+    "delivery_mode": "classique",
+    "artifact": "ENTRÉE : plan de site fourni par l'équipe, avec les liens entre écrans.\nPÉRIMÈTRE : complet — les 21 écrans du produit et tous leurs liens.\n\nPRODUIT : plateforme interne de gestion des demandes clients.\nTÂCHES FRÉQUENTES DÉCLARÉES : traiter une demande entrante · répondre à un\nclient · voir l'état de ses demandes en cours.\n\nNAVIGATION PRINCIPALE (7 entrées)\n  Direction Commerciale · Direction Support · Direction Qualité ·\n  Référentiel · Administration · Reporting · Outils\n\nARBORESCENCE\n  Direction Commerciale\n    > Entités\n      > Comptes clients\n        > Fiche compte\n          > Demandes rattachées\n            > Détail demande            <- traiter une demande se fait ICI\n  Direction Support\n    > Files\n      > File générale\n        > Éléments de file\n          > Détail élément              <- même objet que Détail demande\n  Direction Qualité\n    > Indicateurs\n      > Tableau SLA\n  Référentiel\n    > Nomenclatures\n    > Motifs de clôture\n    > Table CRM_STATUS\n  Administration\n    > Utilisateurs\n    > Rôles\n    > Habilitations\n    > Journaux d'audit\n  Reporting\n    > Extractions\n  Outils\n    > Import CSV\n    > Purge\n\nLIENS ENTRANTS ET SORTANTS\n\n  Détail demande\n    entrants : Demandes rattachées\n    sortants : Répondre au client\n  Répondre au client\n    entrants : Détail demande\n    sortants : (aucun)\n  Détail élément\n    entrants : Éléments de file\n    sortants : Détail demande\n  Confirmation d'envoi\n    entrants : (aucun lien déclaré depuis un autre écran)\n    sortants : (aucun)\n  Mes demandes en cours\n    entrants : (aucun lien déclaré depuis un autre écran)\n    sortants : Détail demande\n  Tous les autres écrans : liens parent/enfant de l'arborescence uniquement.\n\nINDICATION DE POSITION\n  Aucune. La navigation principale ne marque pas l'entrée courante, et aucun\n  écran n'affiche le chemin parcouru.\n\nACCÈS AUX TÂCHES DÉCLARÉES, depuis un lien partagé vers Détail demande\n  traiter une demande         : atteignable, 6 niveaux depuis l'accueil\n  répondre à un client        : Détail demande -> Répondre au client (1 pas),\n                                puis plus aucun lien sortant\n  voir ses demandes en cours  : écran « Mes demandes en cours » présent dans le\n                                produit, aucun lien n'y mène",
+    "golden": {
+      "expected_findings": [
+        "la navigation principale reprend l'organigramme des directions au lieu des tâches",
+        "des entrées nomment des tables internes, Table CRM_STATUS et Habilitations",
+        "traiter une demande réclame de descendre six niveaux d'arborescence",
+        "le même objet apparaît sous deux noms, Détail demande et Détail élément",
+        "l'écran Répondre au client est une impasse, aucun lien n'en sort",
+        "l'écran Mes demandes en cours n'est atteint par aucun lien",
+        "aucune indication de la section courante ni du chemin parcouru"
+      ],
+      "forbidden_findings": [
+        "revoir la mise en page du tableau de bord",
+        "les libellés des boutons manquent de clarté",
+        "reprocher l'absence d'un moteur de recherche",
+        "restructurer entièrement le produit avant toute autre correction"
+      ],
+      "expected_verdict": "FAIL",
+      "should_refuse": false,
+      "note": "Le produit interne dans son état typique : la navigation range l'organigramme et les tables, pas ce que les gens viennent faire. Le périmètre est déclaré COMPLET — c'est ce qui autorise à déclarer l'orphelin et l'impasse, et nulle part ailleurs. Deux constats sont bloquants : une tâche fréquente déclarée dont l'écran existe et que rien ne relie, et un écran d'où l'on ne peut plus rien faire après avoir répondu à un client. D'où FAIL. Le piège de proportion est dans la correction : le premier geste est de renommer et de relier, pas de restructurer."
+    }
+  },
+  {
+    "id": "nav-subtle-deux-chemins",
+    "skill": "better-navigation",
+    "kind": "subtle-defect",
+    "delivery_mode": "hybride",
+    "artifact": "ENTRÉE : liste des écrans avec leurs liens, plus le parcours enregistré\nde deux personnes en test.\nPÉRIMÈTRE : complet — les 12 écrans du produit et tous leurs liens.\n\nPRODUIT : outil de facturation pour indépendants.\nTÂCHES FRÉQUENTES DÉCLARÉES : créer une facture · relancer un impayé ·\nretrouver une facture envoyée.\n\nNAVIGATION PRINCIPALE (4 entrées)\n  Factures · Clients · Relances · Mon compte\n\nÉCRANS ET LIENS\n\n  Accueil (/)\n    sortants : Factures, Clients, Relances, Mon compte\n\n  Factures (/factures)\n    entrants : navigation principale, Accueil, Nouvelle facture (après envoi)\n    sortants : Nouvelle facture, Facture (/factures/[id])\n\n  Facture (/factures/[id])\n    entrants : Factures, Recherche, lien partagé direct\n    sortants : Factures, Modifier, Relancer cette facture\n    affiche : le détail complet, avec l'historique des relances\n\n  Nouvelle facture (/factures/nouvelle)\n    entrants : Factures, Client (/clients/[id])\n    sortants : Factures (après envoi)\n    NOTE DU TEST : le bouton « Précédent » du navigateur, depuis l'étape 2 du\n    formulaire, ramène à l'étape 1 vidée de ce qui avait été saisi.\n\n  Modifier (/factures/[id]/modifier)\n    entrants : Facture\n    sortants : Facture (après envoi), Facture (annuler)\n\n  Clients (/clients)\n    entrants : navigation principale, Accueil\n    sortants : Client (/clients/[id]), Nouveau client\n\n  Client (/clients/[id])\n    entrants : Clients, Facture\n    sortants : Clients, Nouvelle facture, Factures de ce client\n\n  Factures de ce client (/clients/[id]/factures)\n    entrants : Client\n    sortants : Facture (/factures/[id])\n\n  Nouveau client (/clients/nouveau)\n    entrants : Clients\n    sortants : Clients (après envoi), Clients (annuler)\n\n  Relances (/relances)\n    entrants : navigation principale, Accueil\n    sortants : Suivi de relance (/relances/[id])\n\n  Suivi de relance (/relances/[id])\n    entrants : Relances\n    sortants : Relances\n    affiche : le détail de la facture concernée, SANS son historique de relances,\n    et sans lien vers /factures/[id]\n    NOTE DU TEST : les deux personnes ont cru consulter deux factures\n    différentes.\n\n  Mon compte (/compte)\n    entrants : navigation principale, Accueil\n    sortants : Accueil, Aide\n\nINDICATION DE POSITION\n  Section courante marquée sur les 12 écrans. Aucun écran n'affiche le chemin.\n\nACCÈS AUX TÂCHES DÉCLARÉES, depuis un lien partagé vers Facture\n  créer une facture      : navigation principale -> Factures -> Nouvelle (2 pas)\n  retrouver une facture  : navigation principale -> Factures (1 pas)\n  relancer un impayé     : navigation principale -> Relances -> Suivi (2 pas)\n                           ou Facture -> Relancer cette facture (1 pas)",
+    "golden": {
+      "expected_findings": [
+        "deux chemins mènent à la même facture et aboutissent à deux états différents",
+        "le suivi de relance ne renvoie pas vers la facture qu'il décrit",
+        "le retour arrière depuis la deuxième étape vide ce qui avait été saisi",
+        "aucun écran n'affiche le chemin parcouru"
+      ],
+      "forbidden_findings": [
+        "recommander de fusionner les sections Factures et Relances",
+        "reprocher l'absence d'un tableau de bord de synthèse",
+        "les libellés de la navigation principale sont trop courts",
+        "restructurer entièrement le produit avant toute autre correction"
+      ],
+      "expected_verdict": "PASS WITH FIXES",
+      "should_refuse": false,
+      "note": "Navigation qui paraît saine — quatre entrées claires, tâches en deux pas, position marquée — et dont le défaut ne se voit qu'en suivant DEUX chemins jusqu'au même objet. La facture atteinte par Relances n'affiche pas son historique de relances et ne renvoie pas vers elle-même : deux personnes en test ont cru consulter deux factures. C'est le constat que ce cas existe pour attraper, et il est invisible écran par écran — donc invisible aux neuf autres skills. Une sévérité critique, d'où PASS WITH FIXES."
+    }
+  },
+  {
+    "id": "nav-out-of-scope-atelier",
+    "skill": "better-navigation",
+    "kind": "out-of-scope",
+    "delivery_mode": "classique",
+    "artifact": "ENTRÉE : liste des écrans avec leurs liens, plus les captures des\ntrois écrans principaux et leurs textes.\nPÉRIMÈTRE : complet — les 9 écrans du produit et tous leurs liens.\n\nPRODUIT : réservation de créneaux dans un atelier partagé.\nTÂCHES FRÉQUENTES DÉCLARÉES : réserver un créneau · annuler une réservation ·\nvoir ses réservations.\n\nNAVIGATION PRINCIPALE (3 entrées)\n  Réserver · Mes réservations · Mon compte\n\nÉCRANS ET LIENS\n\n  Accueil (/)          sortants : Réserver, Mes réservations, Mon compte, Aide\n  Réserver (/reserver) entrants : navigation principale, Accueil, Mes réservations\n                       sortants : Choisir un créneau\n  Choisir un créneau (/reserver/[date])\n                       entrants : Réserver\n                       sortants : Confirmer, Réserver (retour)\n  Confirmer (/reserver/[date]/confirmer)\n                       entrants : Choisir un créneau\n                       sortants : Mes réservations (après envoi), Choisir un créneau (retour)\n  Mes réservations (/reservations)\n                       entrants : navigation principale, Accueil, Confirmer\n                       sortants : Réservation, Réserver\n  Réservation (/reservations/[id])\n                       entrants : Mes réservations, lien partagé direct\n                       sortants : Mes réservations, Annuler cette réservation\n  Annuler cette réservation (/reservations/[id]/annuler)\n                       entrants : Réservation\n                       sortants : Mes réservations (après envoi), Réservation (retour)\n  Mon compte (/compte) entrants : navigation principale, Accueil\n                       sortants : Accueil, Aide\n  Aide (/aide)         entrants : Accueil, Mon compte, pied de page\n                       sortants : Accueil\n\nINDICATION DE POSITION\n  Section courante marquée sur les 9 écrans. Chemin affiché sur les écrans de\n  réservation.\n\nACCÈS AUX TÂCHES DÉCLARÉES, depuis un lien partagé vers Réservation\n  réserver un créneau    : navigation principale -> Réserver -> Choisir (2 pas)\n  annuler                : Réservation -> Annuler (1 pas)\n  voir ses réservations  : navigation principale -> Mes réservations (1 pas)\n\nCE QUE MONTRENT LES CAPTURES\n  Écran « Choisir un créneau » : les créneaux disponibles et indisponibles sont\n  distingués par la seule couleur, sans autre marque.\n  Écran « Confirmer » : le bouton principal porte le libellé « Valider ».\n  Écran « Mes réservations » : quand la liste est vide, l'écran affiche\n  « Aucun résultat » sans indiquer quoi faire ensuite.\n  Les trois écrans emploient trois styles de bouton différents.",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "les créneaux se distinguent par la seule couleur",
+        "le bouton principal porte un libellé vague",
+        "la liste vide ne dit pas quoi faire ensuite",
+        "trois styles de bouton cohabitent sur les écrans"
+      ],
+      "expected_verdict": "PASS",
+      "should_refuse": false,
+      "note": "Les chemins sont bons : neuf écrans, chacun relié, chaque tunnel avec son retour, position et chemin affichés, trois tâches en un ou deux pas. Le matériau ajoute des captures, et elles portent quatre vrais défauts qui appartiennent à d'autres : la couleur comme seul signal (better-accessibility), un libellé vague (better-writing), un état vide muet (better-states), trois styles de bouton (better-consistency). Les SIGNALER en dépendance est prévu par le contrat de sortie ; en faire des constats échoue le cas. C'est la tentation la plus forte de ce skill : on lui montre des écrans, il doit continuer à ne regarder que les chemins."
+    }
+  },
+  {
+    "id": "nav-insufficient-capture-seule",
+    "skill": "better-navigation",
+    "kind": "insufficient",
+    "delivery_mode": "classique",
+    "artifact": "ENTRÉE : une capture d'écran.\nPÉRIMÈTRE : un seul écran, aucun lien déclaré.\n\nCE QUI A ÉTÉ FOURNI\n  Une image de l'écran « Tableau de bord » d'une application de gestion.\n  On y distingue une barre latérale portant sept entrées : Vue d'ensemble,\n  Projets, Équipe, Rapports, Intégrations, Facturation, Paramètres.\n  Le contenu central montre quatre cartes de synthèse et un tableau.\n\nCE QUI N'A PAS ÉTÉ FOURNI\n  Aucun autre écran. Aucune indication de ce que chaque entrée de la barre\n  latérale ouvre. Aucun lien entrant vers cet écran. Aucune liste de routes.\n  Aucun parcours enregistré. Le nombre total d'écrans du produit n'est pas connu.\n\nDEMANDE INITIALE\n  « Est-ce que ma navigation est claire ? Les gens me disent qu'ils se perdent. »",
+    "golden": {
+      "expected_findings": [],
+      "forbidden_findings": [
+        "sept entrées dans la barre latérale, c'est trop",
+        "les entrées de la barre latérale ne sont pas regroupées",
+        "aucun fil d'ariane sur cet écran",
+        "la navigation de ce produit est claire et bien rangée",
+        "reprocher l'absence d'un écran de recherche"
+      ],
+      "expected_verdict": "BLOCKED",
+      "should_refuse": true,
+      "note": "Une capture, et une vraie question derrière : les gens se perdent. Il n'empêche qu'aucun chemin n'est visible — on ignore ce que chaque entrée ouvre, comment on arrive sur cet écran, et combien le produit compte d'écrans. Juger une navigation là-dessus, c'est deviner le plan d'un bâtiment en regardant une porte. Les deux trahisons sont piégées : le reproche (« sept entrées, c'est trop » — on ne sait pas ce qu'elles recouvrent) et la rassurance (« c'est bien rangé »). La sortie attendue demande ce qui manque : la liste des écrans et de leurs liens, ou l'arbre des routes."
+    }
+  }
+]