# HumanLayer 的 show-me skill 把程式碼變更轉成可快速核對的結構化視圖

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：Matt Pocock (@mattpocockuk) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥🔥 · 日期：2026-09-04

> 原始來源：https://x.com/mattpocockuk/status/2095460192871698728

## 證據與延伸閱讀

- [HumanLayer 的 show-me skill 把程式碼變更轉成可快速核對的結構化視圖。](https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md) — 官方 Repository · 最後核對：2026-09-04 · 支持主張：The skill tells a coding agent to choose the smallest visual that makes the key point clear, offering pseudocode, call trees, component trees, shallow file trees, Mermaid, diff-shaped views, whole-block context when ownership or order would otherwise be hidden, and one focused self-contained HTML artifact for dense UI; visuals stay beside brief supporting prose and are not decorative output.
- [HumanLayer 的 show-me skill 改善 PR 說明與程式碼解釋](https://x.com/mattpocockuk/status/2095460192871698728)

## 中文摘要

HumanLayer 的 show-me skill 把程式碼變更轉成可快速核對的結構化視圖。

**核心事件** Matt Pocock 在 2026 年 9 月 3 日指出，HumanLayer 的 `show-me` skill 能改善 Agent 撰寫的 pull request 說明與程式碼解釋，重點不是產生裝飾性圖像，而是讓人更快理解並驗證內容。其完整規範可見 [HumanLayer 的 `show-me` SKILL.md](https://github.com/humanlayer/skills/blob/main/plugins/show-me/skills/show-me/SKILL.md)。

**視覺形式** 這個 skill 會依照問題選擇最小、最直接的呈現方式，而不是把所有說明都硬塞成圖表：

- 用 pseudocode 說明邏輯。
- 用 call trees 呈現執行流程。
- 用 component trees 表示 UI 的擁有關係。
- 用 shallow file trees 說明模組責任。
- 用 Mermaid 展示互動與資料流。
- 用 diff-shaped views 聚焦「改了什麼」。
- 當省略內容會掩蓋擁有者或執行順序時，保留完整相關區塊。

**HTML 展示** 對於密集 UI、版面配置、狀態比較，或不適合用 Mermaid 表達的概念，skill 允許產生一個聚焦且自包含的 HTML artifact，並以真實產品的色彩、字體、間距、標籤與資料呈現，支援桌面與行動裝置檢視。它要求每個視覺內容緊鄰所支援的簡短文字，只納入當前問題需要的呼叫、檔案、props、狀態與邊界。

**實際影響** 這套做法把 Agent 產生的程式碼說明，從冗長文字轉成可快速瀏覽的結構化視圖；讀者可以依問題直接檢查執行路徑、檔案責任、UI 擁有關係與變更範圍。來源未提供安裝方式、renderer 支援範圍或圖表與 HTML artifact 的大小限制。

## 標籤

Skills, show-me, HumanLayer