pretty-good-software-org/show-me

Hilf dem Benutzer, das aktuelle Gesprächsthema visuell zu verstehen. Lass die Einleitung weg und halte den Text kurz. Wähle die kleinste Ansicht, die den Kernpunkt deutlich macht.

Wenn eine andere Fähigkeit oder ein Workflow die Ansichtsform benennt, verwende diese Form direkt. Überspringe die Formauswahl und jegliche HTML-Artefakt-Option; behalte die Ausgabe im angeforderten Umfang und Format des Aufrufers.

• Zeige Logik oder einen Algorithmus als Pseudocode:

on(speichern)
  wenn Inhalt unverändert
    gib zwischengespeichertes Ergebnis zurück
  schreibe neuen Inhalt
  gib frisches Ergebnis zurück

• Zeige den Laufzeit-Kontrollfluss als Aufrufbaum:

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• Zeige die UI-Struktur als Komponentenbaum, inklusive relevanter Zustands- und Modulgrenzen:

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

• Zeige eine exportierte API- oder Schnittstellenänderung als API-Oberflächen-Diff, gruppiert nach Datei. Füge nur geänderte exportierte Symbole oder Signaturen hinzu, mit expliziten Hinzufügungen, Entfernungen und Ersetzungen:

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

• Zeige Dateizuständigkeit oder eine umfassende Refaktorisierung als flachen Dateibaum:

src/
├── commands/       # parst Benutzeraktionen
├── sessions/       # verwaltet Sitzungszustand
└── transport/      # sendet API-Anfragen

• Zeige Komponenteninteraktion, Kontrollfluss oder Datenfluss mit Mermaid. Wenn das Thema verzweigte Workflows, Zustandsübergänge, Domänen- oder Datenbeziehungen, Architektur, Abhängigkeiten oder Bereitstellungstopologie umfasst, lies die Mermaid-Diagrammtypen und wähle die passende Form. Bleibe bei Flussdiagramm, Sequenzdiagramm, Zustandsdiagramm, Klassendiagramm und ER-Diagramm: Das sind die Arten, die Terminal-Renderer zeichnen können. Halte ein Diagramm unter 120 Spalten breit mit kurzen Beschriftungen und wenigen Knoten; ein breiteres wird durch einen Hinweis im Terminal ersetzt. Auf einer Oberfläche, die eingerahmtes Mermaid als Rohtext anzeigt, bevorzuge die Aufrufbaum- oder Pseudocode-Form und sage, dass das Diagramm herabgestuft wurde.

  Verwende ein Sequenzdiagramm, wenn die Reihenfolge der Interaktionen über die Zeit der Punkt ist:

sequenceDiagram
    participant Benutzer
    participant UI
    participant Dienst
    Benutzer->>UI: Befehl auswählen
    UI->>Dienst: erweiterte Eingabeaufforderung senden
    Dienst-->>UI: Ergebnis streamen

• Verwende diff, wenn der Punkt ist, was sich ändert, und die umgebende Form bereits existiert. Passe die Diff-Form an das Thema an.

Für eine Komponentenänderung:

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

Für eine Dateistrukturänderung:

 src/
 ├── commands/
+│   └── show-me.ts       # erweitert den Schrägstrichbefehl
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

Für eine Aufrufbaum- oder Aufrufstack-Änderung:

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

Für eine Zustands- oder Kontrollflussänderung:

 on(speichern)
-  Inhalt schreiben
+  wenn Inhalt unverändert
+    gib zwischengespeichertes Ergebnis zurück
+  neuen Inhalt schreiben
+  Cache ungültig machen

• Zeige den gesamten Block, wenn der Großteil davon neu ist, wenn ausgelassener Kontext die Zuständigkeit oder Reihenfolge verbergen würde, oder wenn der Benutzer eine kopierfähige Zielform benötigt:

function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `benutze die ${skillName} Fähigkeit`
}

• Für eine visuelle UI, ein Layout, einen Zustandsvergleich oder ein Konzept, das für Mermaid zu dicht ist, schreibe eine fokussierte HTML-Datei – ein Diagramm, eine Infografik oder eine kurze Präsentation, je nachdem, was zum Punkt passt. Passe die Farben, Schriftarten, Abstände und Komponenten des Produkts an; verwende echte Bezeichnungen und Daten; unterstütze Desktop und Mobilgeräte. Öffne sie auf einem lokalen Terminal mit dem plattformeigenen Öffner; auf einer gehosteten Oberfläche veröffentliche sie als Artefakt und gib den Link:

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

Anleitung

Platziere jede visuelle Darstellung neben dem kurzen Text, den sie unterstützt. Behalte nur die Aufrufe, Dateien, Eigenschaften, Zustände und Grenzen, die nötig sind, um die aktuelle Frage des Benutzers oder die Optionen zur Lösung des aktuellen Diskussionspunkts zu beantworten.

Du kannst eine davon verwenden, du kannst mehrere verwenden, es ist unwahrscheinlich, dass du alle verwendest. Nutze dein Urteilsvermögen und überfordere den Benutzer nicht.