show-me

以可视化方式帮助用户理解当前对话主题。跳过开场白，文字保持简洁。选择能清楚说明要点的最小视图。

• 用伪代码展示逻辑或算法：

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

• 用调用树展示运行时控制流：

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• 用组件树展示 UI 结构，包括重要的状态和模块边界：

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

• 用浅层文件树展示文件职责或大范围重构：

src/
├── commands/       # parses user actions
├── sessions/       # owns session state
└── transport/      # sends API requests

• 用 Mermaid 展示组件交互、控制流或数据流：

sequenceDiagram
    participant User
    participant UI
    participant Daemon
    User->>UI: choose command
    UI->>Daemon: send expanded prompt
    Daemon-->>UI: stream result

• 如果重点是发生了哪些变化，且周边结构已存在，请使用 diff。让 diff 的结构与主题相匹配。

对于组件变更：

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

对于文件布局变更：

 src/
 ├── commands/
+│   └── show-me.ts       # expands the slash command
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

对于调用树或调用栈变更：

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

对于状态或控制流变更：

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

• 如果大部分内容都是新增的、缺少上下文会掩盖归属关系或顺序，或者用户需要可复制的目标结构，请展示完整代码块：

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

• 对于可视化 UI、布局、状态对比，或 Mermaid 难以表达的复杂概念，请编写一个聚焦的 HTML 文件——根据主题选择图表、信息图或简短幻灯片。匹配产品的配色、字体、间距和组件；使用真实标签和数据；兼容桌面端和移动端。然后为用户打开该文件：

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

指南

将每个可视化内容放在它所辅助的简短文字旁边。只保留回答用户当前问题或解决当前讨论点所需的调用、文件、属性、状态和边界。

可以使用其中一种，也可以使用多种，但几乎不可能全部用上。请自行判断，避免让用户应接不暇。