pretty-good-software-org/show-me

Aidez l'utilisateur à comprendre visuellement le sujet actuel de la conversation. Évitez le préambule et restez concis. Choisissez la vue la plus petite qui rend le point clair.

Lorsqu'une autre compétence ou un workflow nomme la forme de la vue, utilisez directement cette forme. Ignorez la sélection de forme et toute option d'artefact HTML ; restez dans la portée et le format demandés par l'appelant.

• Affichez la logique ou un algorithme sous forme de pseudocode :

on(save)
  if content is unchanged
    return cached result
  write new content
  return fresh result

• Affichez le contrôle d'exécution sous forme d'arbre d'appels :

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• Affichez la structure UI sous forme d'arbre de composants, en incluant l'état et les limites de modules pertinents :

<SessionPage> (apps/example/src/routes/session.tsx)
  useSessionEvents()
  <SessionToolbar>
    <RunSkillButton> (packages/ui)

• Affichez une modification d'API ou d'interface exportée sous forme de diff de surface d'API, groupé par fichier. Incluez uniquement les symboles ou signatures exportés modifiés, avec les ajouts, suppressions et remplacements explicites :

 internal/api/suggestion.go
-ApplySuggestion(client, prNumber, commentID)
+ApplySuggestion(client, target SuggestionTarget)
+
 internal/api/types.go
 type SuggestionTarget struct {
+  PullRequest int
+  CommentID   int
 }

• Affichez la responsabilité d'un fichier ou un refactoring large sous forme d'arbre de fichiers peu profond :

src/
├── commands/       # analyse les actions utilisateur
├── sessions/       # gère l'état des sessions
└── transport/      # envoie les requêtes API

• Affichez l'interaction entre composants, le contrôle d'exécution ou le flux de données avec Mermaid. Lorsque le sujet implique des workflows avec branches, des transitions d'état, des relations de domaine ou de données, une architecture, des dépendances ou une topologie de déploiement, lisez Types de diagrammes Mermaid et choisissez la forme correspondante. Restez dans les types flowchart, sequence, state, class et ER : ce sont ceux que les rendus terminaux dessinent. Gardez un diagramme sous 120 colonnes avec des étiquettes courtes et peu de nœuds ; un diagramme plus large sera remplacé par un avertissement dans le terminal. Sur une surface qui affiche le code Mermaid en texte brut, préférez la forme arbre d'appels ou pseudocode et indiquez que le diagramme a été rétrogradé.

  Utilisez un diagramme de séquence lorsque l'ordre des interactions dans le temps est le point clé :

sequenceDiagram
    participant User
    participant UI
    participant Daemon
    User->>UI: choisir la commande
    UI->>Daemon: envoyer le prompt enrichi
    Daemon-->>UI: diffuser le résultat

• Utilisez diff lorsque le point est ce qui change et que la forme environnante existe déjà. Adaptez la forme du diff au sujet.

Pour un changement de composant :

 <SessionPage>
   useSessionEvents()
   <SessionToolbar>
+    <RunSkillButton />
   <SessionTimeline>
+    <SkillResultCard />

Pour un changement de disposition de fichiers :

 src/
 ├── commands/
+│   └── show-me.ts       # développe la commande /slash
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

Pour un changement d'arbre d'appels ou de pile d'appels :

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
     launchAgent
-  navigateToSession
+  navigateToSession
+    subscribeToEvents

Pour un changement d'état ou de contrôle d'exécution :

 on(save)
-  write content
+  if content is unchanged
+    return cached result
+  write new content
+  invalidate cache

• Affichez le bloc entier lorsque la majeure partie est nouvelle, lorsque le contexte omis cacherait la propriété ou l'ordre, ou lorsque l'utilisateur a besoin d'une forme cible copiable :

function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `use the ${skillName} skill`
}

• Pour une UI visuelle, une disposition, une comparaison d'état ou un concept trop dense pour Mermaid, écrivez un fichier HTML ciblé — un diagramme, une infographie ou un court diaporama, selon ce qui convient. Utilisez les couleurs, la typographie, l'espacement et les composants du produit ; utilisez des étiquettes et des données réelles ; prenez en charge desktop et mobile. Sur un terminal local, ouvrez-le avec l'ouvreur de la plateforme ; sur une surface hébergée, publiez-le comme artefact et donnez le lien :

Bash(open path/to/show-me-{description}.html)

directives

Placez chaque visuel à côté du texte court qu'il soutient. Gardez uniquement les appels, fichiers, propriétés, états et limites nécessaires pour répondre à la question actuelle de l'utilisateur ou pour résoudre le point de discussion en cours.

Vous pouvez en utiliser un, plusieurs, mais il est peu probable que vous les utilisiez tous. Faites preuve de jugement et ne submergez pas l'utilisateur.