技能包

explain-diff-html：把 PR 和程式碼 diff 變成一頁 HTML 講解的 Claude Code Skill

想在 Claude Code 裡把一個 PR 或程式碼 diff 變成一頁自包含的 HTML 講解時最合適；使用前需要 POSIX shell 環境（Linux/macOS 或 WSL/Git Bash）、git，講 PR 還需已認證的 gh，產生的頁面存到家目錄的 code-explanations 下。

官方來源 · explain-diff-html

安裝

git clone https://github.com/malav2110/explain-diff-html.git ~/.claude/skills/explain-diff-html

適合誰

  • 適合想在 Claude Code 中快速理解一段程式碼改動的人：例如接手陌生倉庫、查看別人的 PR，或想給同事留一份「這次改動到底改了什麼、為什麼」的可分享講解。
  • 它把程式碼變更變成一頁自包含的 HTML 教學頁面，輸出到倉庫之外，不碰你的程式碼。
  • 不適合的情況：不在 Claude Code 中工作、需要 PowerShell 或 cmd.exe（官方明確不支援，必須 POSIX shell 才能執行）、想直接修改或回滾程式碼（它只產生講解頁面）。每次執行都需要 git；講 pull request 需要已認證的 gh（用 gh auth status 檢查）；用 Mermaid 繪圖的頁面會從 CDN 載入圖庫，需要網路。除此之外官方未說明的依賴或限制，本文不作猜測。

3 分鐘完成第一次嘗試

前提：已安裝 Claude Code，環境是 Linux、macOS，或 Windows 上的 WSL / Git Bash；本機有 git。

安裝：把倉庫複製到 Claude Code 的全域 skills 目錄（官方主路徑）：

git clone https://github.com/malav2110/explain-diff-html.git \
  ~/.claude/skills/explain-diff-html

如果只想在某個專案裡用，官方說明改為複製到 <your-repo>/.claude/skills/explain-diff-html。

首次任務建議選一次低風險的唯讀嘗試：在 Claude Code 中用一句自然語言發起，例如「explain PR 1234」（指向一個你無權合併、唯讀旁觀的公開倉庫的 PR）。這個動作不需要 gh 以外的額外操作，但要先確認 gh auth status 已通過。

成功訊號：skill 會把講解頁寫到家目錄下的 code-explanations 資料夾，檔名形如 YYYY-MM-DD-<KEY>-explanation.html，並把路徑回報給你。看到該路徑和產生的 HTML 檔案即代表完成。注意：純程式碼講解頁可離線開啟；若頁面含 Mermaid 狀態圖、時序圖等，需連網才能渲染圖形。

官方只說明其命令是 POSIX shell，未說明是否讀寫其他檔案、執行哪些內部命令或存取哪些網路端點，這些行為未知。

使用案例

案例一：看懂一個 PR。情境：你要了解一個不熟悉的開源倉庫改動。在 Claude Code 中說「explain PR 1234」。skill 會走它的 PR 講解流程，產生一頁 HTML，解釋這次變更的邏輯流程。你可期待的結果是得到 $HOME/code-explanations 下以日期命名的頁面；前提是 gh 已認證。至於頁面是否含 Mermaid 圖，取決於該改動本身，含圖時開啟頁面需連網。

案例二：理解一次本地 diff。情境：你在倉庫裡剛完成或拉取了一次提交，想給團隊講清楚它改了什麼。在 Claude Code 中用自然語言讓它解釋這次改動。可確認的是它會產出同一類自包含 HTML 教學頁，輸出到相同的 code-explanations 目錄並回報路徑；官方未列出針對本地 diff 的具體命令措辭，因此到「用一句自然語言描述這次改動」為止是可確認的，具體觸發語以倉庫 README 為準。

使用邊界

  • 檔案與網路：它會把產生的 HTML 寫入 $HOME/code-explanations（刻意放在倉庫外），不會寫進你的倉庫；頁面含 Mermaid 圖時從 CDN 載入圖庫、需要網路。除這些外，是否讀寫其他檔案、執行哪些命令，官方未說明。
  • 確認點：講 PR 前先跑 gh auth status 確認認證；產生動作本身會新建 HTML 檔案，介意檔案產生的使用者應在發起前知曉這一點。
  • 執行環境：Linux 和 macOS 直接可用，Windows 需 WSL 或 Git Bash；PowerShell 與 cmd.exe 明確不支援。每次執行需要 git；PR 情境需要認證的 gh；校驗 Mermaid 圖需要透過 npx 使用 node。
  • 官方限制：輸出固定寫到家目錄的 code-explanations 資料夾；頁面除 Mermaid CDN 外自包含、可離線。
  • 未確認資訊：官方未說明它支援哪些文字語言、除 Claude Code 外是否在其他 agent 生效，這些請以倉庫最新文件為準，不要憑客戶端清單推斷。