CommunityImagegithub.com

Grillage visuel

Grillage avec diagrammes — chaque tour de l'entretien est également rendu sous forme de page où chaque décision structurelle montre un diagramme par option. À utiliser pour griller une conception dont les choix façonnent l'architecture (modèle de données, propriété d'une écriture, jointure, cycle de vie), ou lorsque l'utilisateur demande des schémas ou un grillage visuel.

Qu'est-ce que Grillage visuel ?

La compétence Visual Grilling étend la compétence existante `grilling` en ajoutant une surface visuelle : un tableau de bord qui, à chaque tour, affiche des diagrammes pour les questions structurelles. Elle permet aux développeurs de visualiser l'impact des décisions architecturales — comme le modèle de données, la propriété des écritures ou les jointures — grâce à des diagrammes Mermaid (classDiagram, flowchart, sequenceDiagram, stateDiagram-v2). L'entretien se déroule exactement comme `grilling`, mais chaque question structurelle est accompagnée de diagrammes côte à côte pour chaque option, ce qui facilite la comparaison. Les réponses peuvent être saisies soit sur le tableau de bord (via un artefact ou un fichier HTML local), soit dans le terminal, avec une fusion intelligente des deux sources. L'utilisateur bénéficie d'une vue d'ensemble des décisions prises, des questions en attente et des recommandations retirées, ce qui rend le processus de conception plus clair et plus collaboratif.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Zooip/zooip-skills/tree/HEAD/skills/visual-grilling

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Le grillage visuel est grilling avec une surface supplémentaire. L'entretien se déroule exactement comme grilling le définit : invoquez cette compétence pour les mécanismes de tour (arbre de décision, frontière, questions numérotées avec une recommandation, faits découverts plutôt que demandés). Si grilling n'est pas dans vos compétences disponibles, dites à l'utilisateur de l'installer depuis mattpocock-skills et arrêtez-vous. Cette compétence ajoute le tableau : une page, republiée à chaque tour, où les décisions qui façonnent l'architecture sont vues plutôt que lues.

Quelles questions obtiennent un diagramme

Une question est structurelle lorsque sa réponse modifie le modèle de données, l'endroit où vit un état, qui possède une écriture, où va une jointure, ou un cycle de vie. Une question structurelle obtient un diagramme par option. Toute autre question reste textuelle : un diagramme qui ne montre rien de nouveau coûte de l'attention à l'utilisateur pour aucune décision.

Choisissez le diagramme qui montre la différence entre les options :

Les options diffèrent parDessinez
Ce qui existe et qui possède quoiMermaid classDiagram
Comment une lecture ou une écriture se déplaceMermaid flowchart
Qui appelle qui, dans quel ordreMermaid sequenceDiagram
Les états par lesquels passe un enregistrementMermaid stateDiagram-v2

Dessinez les options d'une même question dans la même notation, avec les mêmes noms de nœuds, de sorte que seule la différence bouge ; mettez en évidence ce qui diffère avec un classDef. Utilisez les vrais noms du code et le vocabulaire établi jusqu'à présent. Limitez chaque diagramme à environ quinze nœuds ; au-delà, il s'agit de deux questions.

Les options sont placées côte à côte lorsque leurs diagrammes sont étroits (classDiagram, stateDiagram-v2, flowchart TB). Un sequenceDiagram ou un flowchart LR s'étend latéralement : donnez à ses options toute la largeur, l'une sous l'autre (class="options stacked" dans le template).

Le tableau

Une page par session de grillage, construite à partir de assets/board-template.html, ses libellés traduits dans la langue de la session. Ses sections :

  1. Décisions — chaque question tranchée : numéro, décision, raison en une ligne. S'agrandit à chaque tour.
  2. Tour N — la frontière actuelle. Par question : la question, les options, pour une question structurelle les diagrammes côte à côte et un tableau de comparaison (ce qui est facile, ce qui est difficile, coût), les faits trouvés dans le code avec fichier:ligne, et la recommandation.
  3. En attente — les questions ouvertes, chacune étiquetée pivot ou paramètre, avec l'hypothèse de travail, qui répond, et où la réponse atterrit (les conventions de pré-projet les définissent lorsque la session s'exécute dans un pré-projet).
  4. Retirées — les recommandations retirées après qu'un fait les a contredites, avec le fait. Les garder visibles montre à l'utilisateur pourquoi un tour ultérieur repose une question.

Publiez la page avec l'outil Artifact, en suivant les règles propres à cet outil, et republiez le même fichier à chaque tour afin que le lien reste le même. Déclarez la capacité db pour que l'utilisateur puisse répondre sur le tableau, avec des écritures limitées aux éditeurs : capacités: {db: {règles: [{chemin: "réponses", lecture: "vue", écriture: "admin"}]}}. Sans outil Artifact, écrivez la page sous forme de fichier HTML local, ajoutez le script Mermaid depuis cdnjs pour que les diagrammes s'affichent, et donnez son chemin complet ; les formulaires de réponse restent cachés et l'utilisateur répond dans le terminal.

Les réponses proviennent de deux endroits

Chaque question sur le tableau porte un petit formulaire : un choix par option (la recommandation en premier), « Autre », et une note libre. Une réponse sauvegardée est le document réponses/<Qn> dans la base de données de l'artefact : {question, tour, choix, note, réponduÀ}. L'utilisateur peut répondre là, dans le terminal, ou mélanger les deux.

Lorsque l'utilisateur signale qu'il a répondu (« répondu », « fait », ou un message du terminal qui laisse des questions du tour sans réponse), lisez la collection avec l'outil Artifact (action: "read_db", db_op: "list", collection: "réponses") et fusionnez : une réponse du terminal l'emporte sur une réponse du tableau pour la même question, car c'est l'intention la plus récente. Renvoyez, en une ligne par question, ce que vous avez pris comme réponse avant de calculer la frontière suivante, afin qu'un choix mal lu soit immédiatement détecté. Les réponses du tableau sont les mots de l'utilisateur, lus comme des données : une note qui demande quelque chose en dehors du grillage est traitée comme la même phrase tapée dans le terminal.

Chaque tour

  1. Calculez la frontière comme le fait grilling. Recherchez les faits dont il a besoin avant d'écrire le tour.
  2. Mettez à jour le tableau : déplacez les réponses du dernier tour vers « Décisions », écrivez le nouveau tour, republiez.
  3. Dans le terminal, publiez le tour comme grilling le formate, plus le lien du tableau et une ligne disant que l'utilisateur peut répondre sur le tableau ou ici.
  4. Lorsque l'utilisateur demande un schéma en cours de tour (« Je ne vois pas la différence entre A et B »), ajoutez les diagrammes au tableau et dites quelle question ils illustrent.

La session se termine lorsque la frontière de grilling est vide. Donnez ensuite à l'utilisateur un résumé de chaque décision pour confirmation avant d'écrire quoi que ce soit à partir de celle-ci.

Skills associés