show-me

Ajude o usuário a entender visualmente o tópico atual da conversa. Pule o preâmbulo e mantenha a prosa breve. Escolha a menor representação que torne claro o ponto principal.

Quando outra skill ou fluxo de trabalho nomear o formato a ser usado, utilize esse formato diretamente. Pule a seleção de formato e qualquer opção de artefato HTML; mantenha a saída dentro do escopo e formato solicitados pelo chamador.

• Mostre lógica ou um algoritmo como pseudocódigo:

ao(salvar)
  se conteúdo não foi alterado
    retorna resultado em cache
  escreve novo conteúdo
  retorna novo resultado

• Mostre fluxo de controle em tempo de execução como uma árvore de chamadas:

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• Mostre estrutura de UI como uma árvore de componentes, incluindo estado e limites de módulo relevantes:

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

• Mostre uma interface de API exportada ou mudança como um diff de superfície de API, agrupado por arquivo. Inclua apenas símbolos exportados alterados ou assinaturas, com adições, remoções e substituições explícitas:

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

• Mostre responsabilidade de arquivo ou uma refatoração ampla como uma árvore de arquivos rasa:

src/
├── commands/       # analisa ações do usuário
├── sessions/       # gerencia estado da sessão
└── transport/      # envia requisições de API

• Mostre interação entre componentes, fluxo de controle ou fluxo de dados com Mermaid. Quando o tópico envolver fluxos de trabalho ramificados, transições de estado, relacionamentos de domínio ou dados, arquitetura, dependências ou topologia de implantação, leia os tipos de diagrama Mermaid e escolha o formato correspondente. Limite-se a flowchart, sequence, state, class e ER: esses são os tipos que os renderizadores de terminal desenham. Mantenha um diagrama com menos de 120 colunas de largura com rótulos curtos e poucos nós; um diagrama mais largo será substituído por um aviso no terminal. Em uma superfície que mostra Mermaid em bloco como texto bruto, prefira o formato de árvore de chamadas ou pseudocódigo e informe que o diagrama foi reduzido.

  Use um diagrama de sequência quando a ordem das interações ao longo do tempo for o ponto central:

sequenceDiagram
    participant Usuário
    participant Interface
    participant Daemon
    Usuário->>Interface: escolher comando
    Interface->>Daemon: enviar prompt expandido
    Daemon-->>Interface: transmitir resultado

• Use diff quando o ponto central for o que mudou e o formato circundante já existir. Adapte o formato diff ao tópico.

Para uma mudança de componente:

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

Para uma mudança de estrutura de diretórios:

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

Para uma mudança na árvore de chamadas ou pilha de chamadas:

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

Para uma mudança de estado ou fluxo de controle:

 ao(salvar)
-  escreve conteúdo
+  se conteúdo não foi alterado
+    retorna resultado em cache
+  escreve novo conteúdo
+  invalida cache

• Mostre o bloco inteiro quando a maior parte for nova, quando o contexto omitido esconderia propriedade ou ordem, ou quando o usuário precisar de um formato alvo copiável:

function expandSkill(comando: string): string {
  const nomeSkill = comando.slice(1)
  return `use a skill ${nomeSkill}`
}

• Para uma UI visual, layout, comparação de estados ou conceito denso demais para Mermaid, escreva um arquivo HTML focado — um diagrama, um infográfico ou uma breve apresentação de slides, o que melhor se adequar ao ponto. Utilize as cores, tipografia, espaçamento e componentes do produto; use rótulos e dados reais; suporte desktop e mobile. Em um terminal local, abra-o com o abridor de plataforma; em uma superfície hospedada, publique-o como artefato e dê o link:

Bash(abrir caminho/para/show-me-{descrição}.html)

orientação

Coloque cada elemento visual ao lado do texto curto que ele suporta. Mantenha apenas as chamadas, arquivos, propriedades, estados e limites necessários para responder à pergunta atual do usuário ou às opções para resolver o ponto atual da discussão.

Você pode usar um destes, pode usar vários — é improvável que use todos. Use seu julgamento e não sobrecarregue o usuário.