大家好，我是小木头。Matt Pocock 大家应该不陌生了吧？他开源了许多极为流行的 Skills，昨天他推荐了一个叫 show-me 的 Skill。他说，这是一个非常棒的 Skill，能让 PR 描述变得相当的容易理解。今天我们就来看看这款 Skill 有什么过人之处，能让 Matt 都赞不绝口？从本质上来讲，show-me 是一整套更好的展示代码的方法。
Matt 在回复里把它称为一份展示 diff 的风格指南：Agent 先理解当前任务，再由 show-me 判断应该画什么、怎么画以及画到什么程度。它把视觉表达直接引入了代码讨论的工作流。show-me 的核心原则其实就一句话：选择能把关键点讲清楚的最小视图，可视化地呈现内容。
它在不同场景中的表现大致如下：逻辑问题用伪代码；执行过程用调用树；UI 结构用组件树；模块变化用文件树；系统交互用 Mermaid。如果这些都不合适，那么再尝试写一个专门的 HTML 页面来展示。并不是说图越大越好、越复杂越好，目的是让问题能刚刚好地以可视化的方式讲清楚。
先看逻辑问题：Agent 读完代码后，把它拆成两个分支——内容没变直接返回缓存；内容发生变化才写入清理缓存并增加版本号。逻辑判断和结果在一份伪代码里非常清晰地呈现出来，非常便于代码审核。换个场景：这次是运行时的流程，show-me 选择了调用树。
submitPrompt 是入口；创建会话、保存 prompt、启动 Agent、页面跳转、事件订阅。每个环节的先后与父子关系，一眼就看得清清楚楚。在 React 改动中，我们通常最关心的或许就是组件的归属关系了：生成的组件树直接显示出来了。RunSkillButton 属于 SessionToolbar；SkillResultCard 属于 SessionTimeline；事件状态仍由父级组件 SessionPage 来提供。
文件重构的场景则适合树形的 diff：比如原来的 transport.ts 被拆成 client 和 stream commands；下面新增了 show-me 目录。变化和职责的迁移，出现在同一个视图里。现在这个案例是来自于真实的 ChatOllama 项目里我的一个合并请求：22个文件、两千多行代码的改动，被整理成一条典型的时序图。
我们来简单地看一下吧：prompt 进入 streamText；增量发布为 model.delta；取消时，AbortController 把状态呢设置为了 cancelled。咱们继续升级：复杂拓扑现在可以用 HTML 来解读。这里有 Web UI 和 CLI 两个入口；三个并行的 Agent，以及共享日志沙箱环境 Sandbox 和策略引擎 Policy Engine。
看看输出的结果：HTML 页面很好地表达了层级、并行和约束关系。那咱们看看怎么使用吧？Skill 的安装非常简单，最近我在用 Codex，那就在 Codex 里给大家演示一下。在 Codex 用 Skill Installer 这个工具获取这个 Skill，把 HumanLayer 仓库里的这个 show-me Skill 的 URL 交给它。
show-me 随即安装成功，最后调用它提问就可以了。我觉得这个 Skill 最有价值的地方是：你和 Coding Agent 之间的交流变得更加轻松，也更加的具象。在日常的开发工作中，令我很头痛的就是面对一大堆的改动、一大堆的字符，实在是蛮抽象的，实在是难以理解。
它给 Agent 建立了三条表达方面的规则：第一点，视图的类型要匹配问题；第二点，只保留当前讨论需要的结构；第三点，图要放在它所支持的那段文字旁边。好了，show-me 的链接我会放在视频的描述中。你想拿它来解释哪一类问题呢？欢迎在评论区分享！
如果这期内容对你有帮助，记得一键三连哦。也欢迎大家继续关注我的频道，我是小木头，我们下期见。