pretty-good-software-org/show-me

Ayuda al usuario a entender visualmente el tema actual de la conversación. Omite los preámbulos y mantén la prosa breve. Elige la vista más pequeña que haga claro el punto clave.

Cuando otro skill o flujo de trabajo nombre la forma de la vista, usa esa forma directamente. Omite la selección de forma y cualquier opción de artefacto HTML; mantén la salida dentro del alcance y formato solicitados por el llamante.

• Muestra lógica o un algoritmo como pseudocódigo:

al(save)
  si el contenido no ha cambiado
    devuelve resultado en caché
  escribe nuevo contenido
  devuelve resultado fresco

• Muestra flujo de control en tiempo de ejecución como un árbol de llamadas:

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• Muestra estructura de UI como un árbol de componentes, incluyendo estados y límites de módulo que importan:

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

• Muestra un cambio en una API o interfaz exportada como un diff de superficie de API, agrupado por archivo. Incluye solo símbolos o firmas exportados que hayan cambiado, con adiciones, eliminaciones y reemplazos explícitos:

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

• Muestra la responsabilidad de archivos o una refactorización amplia como un árbol de archivos plano:

src/
├── commands/       # analiza las acciones del usuario
├── sessions/       # gestiona el estado de la sesión
└── transport/      # envía solicitudes API

• Muestra interacción de componentes, flujo de control o flujo de datos con Mermaid. Cuando el tema involucra flujos de trabajo ramificados, transiciones de estado, relaciones de dominio o datos, arquitectura, dependencias o topología de despliegue, lee tipos de diagramas Mermaid y elige la forma adecuada. Mantente dentro de diagramas de flujo, secuencia, estado, clase y ER: esos son los tipos que los renderizadores de terminal dibujan. Mantén un diagrama con menos de 120 columnas de ancho, con etiquetas cortas y pocos nodos; uno más ancho se reemplaza por un aviso en la terminal. En una superficie que muestre Mermaid entre comillas como texto sin formato, prefiere la forma de árbol de llamadas o pseudocódigo y di que el diagrama fue degradado.

  Usa un diagrama de secuencia cuando el orden de las interacciones a lo largo del tiempo sea el punto clave:

sequenceDiagram
    participant Usuario
    participant UI
    participant Demonio
    Usuario->>UI: elige comando
    UI->>Demonio: envía prompt expandido
    Demonio-->>UI: transmite resultado

• Usa diff cuando el punto sean los cambios y la forma circundante ya exista. Haz coincidir la forma del diff con el tema.

Para un cambio de componente:

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

Para un cambio de diseño de archivos:

 src/
 ├── commands/
+│   └── show-me.ts       # expande el comando slash
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

Para un cambio en un árbol de llamadas o pila de llamadas:

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

Para un cambio en el estado o flujo de control:

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

• Muestra todo el bloque cuando la mayor parte sea nueva, cuando omitir contexto ocultaría la propiedad o el orden, o cuando el usuario necesite una forma de destino copiable:

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

• Para una UI visual, diseño, comparación de estados o concepto demasiado denso para Mermaid, escribe un archivo HTML enfocado — un diagrama, una infografía o una presentación corta, lo que mejor se ajuste al punto. Haz coincidir los colores, tipo, espaciado y componentes del producto; usa etiquetas y datos reales; soporta escritorio y móvil. En una terminal local, ábrelo con el abridor de plataforma; en una superficie alojada, publícalo como artefacto y proporciona el enlace:

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

guía

Coloca cada visual junto al texto corto que apoya. Mantén solo las llamadas, archivos, props, estados y límites necesarios para responder a la pregunta actual del usuario o las opciones para resolver el punto de discusión actual.

Puedes usar uno de estos, puedes usar varios, es poco probable que los uses todos. Usa tu criterio y no abrumes al usuario.