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

• 如果要点是展示变更，且周围结构已经存在，请使用 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、布局、状态对比或概念，请编写一个重点突出的 HTML 文件，可以是图表、信息图或简短幻灯片，选择最合适的形式。匹配产品的配色、字体、间距和组件；使用真实标签和数据；支持桌面端和移动端。然后为用户打开该文件：

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

指南

将每个视觉内容放在其所支持的简短文字旁边。仅保留回答用户当前问题或解决当前讨论要点所需的调用、文件、属性、状态和边界。

你可以使用其中一种，也可以使用多种；不太可能用到全部。请自行判断，不要让用户应接不暇。