show-me

show-me 是一个面向对话场景的可视化解释技能，目标是帮助用户以视觉方式理解当前讨论的主题。它的核心约定是：跳过开场白，保持文字简短，并选择能让关键点清晰的最小视图。

用途该技能用于把当前话题转化为直观的视觉表达，适用于解释逻辑、控制流、UI 结构、文件职责、组件交互、数据流以及变更点等。

主要能力与展示形式

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

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：用 Mermaid 展示组件交互、控制流或数据流。示例：

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

diff：当重点是“什么发生了变化”且周边形态已经存在时使用 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`
}

聚焦 HTML 文件：对于视觉 UI、布局、状态对比或 Mermaid 难以承载的密集概念，编写一个聚焦的 HTML 文件——图表、信息图或短幻灯片，哪种适合表达要点就用哪种。匹配产品的颜色、字体、间距与组件；使用真实标签与数据；支持桌面与移动端。然后为用户打开它：

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

使用方式将每个可视化放在其支撑的短文本旁边。只保留回答用户当前问题或解决当前讨论点所需的调用、文件、props、状态和边界。

使用指导可以选用上述形式中的一种，也可以选用多种，但不太可能全部使用。需运用判断力，避免让用户信息过载。

适用场景适用于需要直观理解当前话题的对话场景，例如解释算法逻辑、展示运行时控制流、说明 UI 结构、描述文件职责与重构、呈现组件交互与数据流、突出变更点，以及在密集概念下生成聚焦的 HTML 可视化产物。

限制资料未提供具体平台、收费、价格等信息。该技能强调只保留必要信息，避免过度展示导致用户信息过载。

技能介绍