スキル

explain-diff-html：PR やコード diff を 1 ページの HTML 解説に変える Claude Code Skill

Claude Code で PR やコード diff を自己完結型の 1 ページ 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 を確認するとき、あるいは「この変更で何を・なぜ変えたのか」という解説を同僚に共有したいときなど。
  • コードの変更内容を、自己完結型の 1 ページ HTML チュートリアルページに変換し、リポジトリの外に出力します。あなたのコードには一切触れません。
  • 向いていないケース：Claude Code を使っていない場合、PowerShell や cmd.exe が必要な場合（公式が明確に非対応、実行には POSIX shell が必要）、コードを直接修正・ロールバックしたい場合（この skill は解説ページを生成するだけです）。実行には毎回 git が必要で、PR を解説するには認証済みの 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 であることだけで、他のファイルを読み書きするか、どの内部コマンドを実行するか、どのネットワークエンドポイントにアクセスするかについては言及がなく、これらの挙動は不明です。

使用例

例 1：PR を理解する。シナリオ：よく知らないオープンソースリポジトリの変更を把握したい。Claude Code で「explain PR 1234」と言う。skill は PR 解説のフローを実行し、この変更のロジックフローを説明する 1 ページの HTML を生成します。期待できる結果は $HOME/code-explanations 以下に日付名のページが生成されること。前提は gh が認証済みであること。ページに Mermaid 図が含まれるかはその変更内容次第で、図がある場合はページを開くのにネット接続が必要です。

例 2：ローカルの 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 で動作するかどうかを明記していません。これらはリポジトリの最新ドキュメントを確認し、クライアントの対応リストから推測しないでください。