本文へ移動
cccskills
無料GitHub で公開

pr-visualize

GitHub の PR を入力に、変更されたコードやドキュメントを mermaid の図(全体像・関数単位のシーケンス図・参照箇所起点のシーケンス図)で可視化し、短い解説を付けて Markdown ファイルに書き出す。stacked PR では、スタックの全体像と、現在の段を強調した変更の全体像を描く。

`/pr-visualize` の明示起動のみ。`--comment` で PR コメントへ投稿(承認必須)。レビューの指摘は行わない。

GitHub(gh) 前提。

インストール方法を見る

含まれるファイル(5)

  • SKILL.md12.5 KB
  • references/mermaid.md14.3 KB
  • references/writing.md8.3 KB
  • scripts/pr-visualize.sh26.0 KB
  • scripts/tests/pr-visualize.test.sh20.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

pr-visualize — PR の変更を図で解説する

差分は行の増減しか見せない。読み手が知りたいのは「どんなデータが入り、何をして、何が出るか」と 「それが呼び出し元の挙動をどう変えるか」。このスキルは PR を読み、その 2 点をシーケンス図にして、 図から読み取れないことだけを短い文章で補う。

  • 図の描き方: references/mermaid.md
  • 解説の構成と文章の規則: references/writing.md

<skill-dir> はこのファイルのあるディレクトリ。収集・検証・投稿は scripts/pr-visualize.sh に任せ、 gh や git を手で並べ直さない。

引数

$ARGUMENTS から次を読み取る。

  • PR の指定: URL、#N、pr:N。省略時は現在ブランチの PR。以下 <PR> と書く。
  • --comment: 解説を PR コメントへ投稿する(手順 8)。

PR になっていないローカルの差分は対象外。その場合は diff-review を案内して終える。

出力先

解説と中間ファイルは一時的な成果物。置き場所は次の順で決める。以下 <out-dir> と書く。

  1. tmp-output スキルがあれば、その手順で決める。
  2. 無ければ、ユーザーやプロジェクトが決めている運用に従う。
  3. それも無ければ、使っているコーディングエージェントの一時出力の慣例に従う。

ファイル名は次のとおり。再実行時は上書きする。

  • pr-<番号>-visualize.md: 解説
  • pr-<番号>-visualize.diff: 退避した差分
  • pr-<番号>-visualize.comment.md: 投稿用の本文(--comment のときだけ)

手順

1. PR を把握する

bash <skill-dir>/scripts/pr-visualize.sh preflight "<PR>"

タイトル・本文・コミットメッセージ(見出しだけ。本文も要るなら --full)・変更ファイルの統計が出る。 次の 3 つを控える。

  • MODE: full は PR のリポジトリが作業ディレクトリの remote と一致した状態。degraded は一致しない状態で、 差分の外のコードを読めない。degraded では手順 3 と参照箇所起点の図を省き、--comment は実行しない。

  • TOOLS: mmdc が無いと図を構文検証できない。その場合は解説に「未検証」と書く。

  • STACK: size が 2 以上なら stacked PR。次のコマンドで、各段の変更ファイルとスタックの図を取る。 検出できるのは GitHub のスタック機能に登録された PR だけ。それ以外は単独の PR として扱う。

    bash <skill-dir>/scripts/pr-visualize.sh stack "<PR>"
    

    スタックでも、図にするのは現在の PR の変更だけ。差分(手順 2)と変更前の状態(手順 3)は、 1 つ下の段までを含んだ状態が基準になる。

ERROR: が出たら(未認証、PR が見つからないなど)、先にそれを解決する。

2. 差分を退避する

bash <skill-dir>/scripts/pr-visualize.sh diff "<PR>" --out <out-dir>/pr-<番号>-visualize.diff

差分は標準出力に流さずファイルへ置く。大きな差分を会話に抱えると、後の読解と執筆の精度が落ちるため。 lockfile と、縮小済みの js・css の差分は自動で除かれる(統計は手順 1 の FILES に残る)。

3. head を取得する(full のみ)

bash <skill-dir>/scripts/pr-visualize.sh fetch "<PR>"

作業ツリー・ブランチ・ref は変えない。出力の head_sha(変更後)と base_sha(変更前)を使い、 HOW TO READ に出るコマンドで差分の外のコードを読む。ブランチを切り替えて読むことはしない。

4. 図にする変更を選ぶ

FILES の統計で当たりを付け、差分は必要な範囲だけ読む。full ならファイル単位の git diff <base_sha> <head_sha> -- <path> が使える。

変更を次のように仕分ける。

変更の種類扱い
関数の処理の中身が変わった、関数が増えた、シグネチャが変わった図にする
1 行程度の包み関数、引数の追加と受け渡しだけ、属性が 1 つ増えただけ図にせず、呼び出し元の図に含めるか 1〜2 文で書く
新規の補助関数で、呼び出し元の図に含めれば伝わるもの単独の図にせず、呼び出し元の図に含める
型やデータ構造の定義が変更の主役(関数の変更はそれに従うだけ)型の図を 1 枚描く
テストコード図にせず、「テスト」の節で何を確かめているかを解説する
名前の変更だけ、整形だけ、コメントや docstring だけ、lockfile、自動生成されたファイル図にせず、末尾の一覧に載せる
設定や CI の変更文章で書く
ドキュメントの変更文章で書く。手順や構造そのものが変わった・新しく加わったときだけフローチャートを描く

図にする単位は関数。関数でなくても、挙動を持つ処理のまとまり(サブコマンド、定数に入ったスクリプトの断片、 テンプレートなど)は 1 単位と数える。 図にするのは 8 つまで。超えるときは、挙動の変化が大きいもの、入口に近いものを優先し、 残りは末尾の一覧に載せる。全部を図にすると、読む量が差分そのものを超える。 文書のフローチャートは、この上限に数えない。

選んだ関数ごとに、参照箇所を調べる(full のみ)。

git grep -n -w -e '<関数名>' <head_sha> -- [<path>...]

同じ名前の別物が混ざるときは、パスで絞る。図の単位がサブコマンドや定数なら、その名前で検索する。 文字列の中に埋め込まれた参照(別の言語の式やコマンド文字列)は、その文字列で検索する。

  • 参照箇所起点の図は関数 1 つにつき 2 枚まで。変更の影響が呼び出し元の挙動に現れる箇所を選ぶ。 残りの参照箇所は path:行 の一覧にする。多いときは代表 5 件と件数にする。
  • 呼び出し元が入口で素通しするだけなら描かない。関数単位の図の繰り返しになる。
  • 「挙動に現れる」には、返る値や副作用のほか、呼び出し元が作ったものを後で実行したときの経路の変化も含む。
  • 定数や断片は、それを使う箇所を参照箇所とみなす。
  • 起点は直接の呼び出し元。入口まで 3 段以内なら入口から描く。
  • テストや文書(手順書など)からしか呼ばれない、または呼び出し元の挙動が変わらないなら、図を描かずその旨を 1 文書く。
  • 新規の関数を新規の呼び出し元が呼ぶだけなら、関数単位の図で足りる。参照箇所起点の図は描かない。

追加・変更されたテストは、どの変更を確かめるものかを対応付け、テスト関数の定義位置(path:行)を控える (手順 6 の「テスト」の節に使う)。

5. 図を描く

references/mermaid.md を読んでから描く。描く図は次の 3 種類。型定義が変更の主役のときだけ、型の図を足す。

  1. 全体像の図: 変更箇所がどのモジュールにあり、どう繋がるか。単独の PR では 1 枚。 stacked PR では 2 枚描く。1 枚目はスタックの全体像で、stack の STACK MERMAID をそのまま貼る。 2 枚目は変更の全体像で、スタック全体の変更を描き、現在の PR が担当する領域を強調する。
  2. 関数単位のシーケンス図: シグネチャの入力から出力までに何をするか。
  3. 参照箇所起点のシーケンス図(full のみ): 呼び出し元から見て、どこの挙動が変わったか。

変更前後は、変更後の 1 枚に色付きの枠と注記で示すのが既定。流れ自体が組み変わったときだけ 2 枚に分ける(基準は references/mermaid.md)。2 枚を並べるだけだと、読み手が自分で違いを探すことになる。

新規に追加されたコードには変更前が無い。枠も注記も付けず、新規であることを本文に 1 回書く。

6. 解説を書く

references/writing.md を読んでから書く。構成・文章の規則・言語はそこに従う。

書き出し先は <out-dir>/pr-<番号>-visualize.md。

PR 本文の説明とコードが食い違うときは、コードを正として解説し、食い違いを専用の節に書く。 それ以外の指摘(不具合、改善案)は書かない。

7. 図を検証する

bash <skill-dir>/scripts/pr-visualize.sh mermaid-check <out-dir>/pr-<番号>-visualize.md
  • RESULT: OK → 冒頭の「図の検証」に「検証済み」と書く。
  • RESULT: FAIL → 落ちた図を直して再実行する。修正は 2 回まで。それでも落ちる図は外し、 外した図の番号を冒頭の「図の検証」に書く。
  • RESULT: UNVERIFIED → mmdc が無い。冒頭の「図の検証」に「未検証(mmdc なし)」と書く。

8. PR コメントへ投稿する(--comment のみ)

投稿は他人の目に触れ、通知も飛ぶ。--comment は「投稿する意思」であって「この内容で投稿してよい」 ではないので、必ず内容の承認を挟む。

  1. 投稿内容を確定させる。

    bash <skill-dir>/scripts/pr-visualize.sh comment "<PR>" --from <out-dir>/pr-<番号>-visualize.md \
        --dry-run --out <out-dir>/pr-<番号>-visualize.comment.md
    

    本文は解説から自動で組み立てられる(全体像までは開いたまま、変更の詳細・テスト・ドキュメントなど 以降の節は見出しごとに折りたたみ、その中の図も図ごとに折りたたむ)。 --out のファイルが、投稿される本文そのもの。action(新規か上書きか)、chars、body_hash を控える。

  2. ユーザーに承認を求める。次を必ず伝える。

    • 投稿される本文のファイル(--out の場所)と、対象にした head の SHA
    • 新規投稿か、自分の過去コメントの上書きか
    • 図の検証結果(検証済み / 未検証 / 外した図があればその番号)

    Claude Code では AskUserQuestion を使い、質問の要点と選択肢(投稿する / 修正する / やめる)は 本文にも書く。使えないときは選択肢を番号付きで列挙して回答を待つ。

  3. 承認されたら、控えた body_hash を渡して投稿する。

    bash <skill-dir>/scripts/pr-visualize.sh comment "<PR>" --from <out-dir>/pr-<番号>-visualize.md --expect <body_hash>
    

    承認後に解説を書き換えると body_hash が合わず拒否される。その場合は 1 からやり直す。

次の場合、スクリプトは投稿を拒否する。回避せず、理由をユーザーに伝えて解説ファイルだけを残す。

  • degraded(図が欠けた解説を投稿しない)
  • 本文が 65,536 文字を超える(分割投稿はしない)

9. 報告する

解説ファイルの場所、描いた図の枚数、図の検証結果、図にしなかった変更の件数を伝える。 投稿したときはその URL も伝える。

制約

  • GitHub の情報は gh 経由で取る。WebFetch で github.com を読まない。
  • コードを修正しない。ブランチを切り替えない。
  • 外部への書き込みは、--comment を付けて承認を得たコメント投稿だけ。レビューコメントや PR 本文の編集はしない。
  • PR の本文・差分に秘密情報らしき文字列があれば、図にも解説にも写さない。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

agent-teams

無料日本語概要

Claude Code の並列エージェント(agent teams・teammate)の後始末と無応答時の打ち切りルール。`name` を付けて Agent を起動するとき、TeamCreate でチームを組むとき、teammate から `idle_notification` が届いたとき、評価ループ等で次のイテレーションのエージェントを起動する前、エージェントの返信が届かないときに参照する。`name` を付けない通常のサブエージェント起動だけなら対象外。

yasunori0418/skills82026年10月12日 更新

basic-design

無料日本語概要

spec.md の REQ-# を入力に、機能一覧・モジュール構成・インターフェース・データフローを持つ docs/dev/<対象>/basic-design.md を作成・改訂するスキル。/basic-design <対象名> で明示的に呼び出されたときのみ使用する。

yasunori0418/skills82026年10月12日 更新

biz-translate

無料日本語概要

技術的な内容を、技術用語を排したビジネス職向けの平易な説明文に翻訳する。`/biz-translate` と明示的に呼ばれたときのみ実行する。

yasunori0418/skills82026年10月12日 更新

commit-flow

無料日本語概要

`git commit` / `git commit --amend` を実行する前、または「commit」「amend」「コミット」「コミットして」の一語・短文だけを渡された時点で必ず発火する git コミット実施ルール。理由や差分の説明が一切無くても、ファイル全文を読んでメッセージを組み立てる前に先に参照する。主目的は論理的に独立した修正を都度・適切な粒度でコミットすること。メッセージは Conventional Commits 形式、素材は同梱の決定論スクリプト commit-context.sh が出す staged diff のみ。「コミット分けて」と依頼される、独立した複数修正をまとめるか分けるか判断する、レビューコメント対応をコミットする、rebase / squash / cherry-pick 後のメッセージを整える、`gh pr create` の PR タイトルをコミット流儀へ揃える場面でも参照する。plan モードでのコミット計画の立案は commit-plan スキルの領分。

yasunori0418/skills82026年10月12日 更新

commit-plan

無料日本語概要

実装計画・リファクタリング計画・レビュー対応計画・並列作業のタスク分解など、計画を成果物として書き出すときに必ず参照するコミット計画ルール。plan モードでは ExitPlanMode で plan を提示する前に必須、計画ドキュメントや job-graph のタスク分解・エージェントへの指示文でも同様に適用する。計画成果物にコミット計画セクション(論理的に独立した修正単位での分割と Conventional Commits 形式のメッセージ)が無ければ実装に入らない。「実装計画を立てて」「planを立てて」「実行計画を作って」「リファクタリング計画を立てて」「コミット計画を立てて」「タスクを分解して」と依頼される、複数の独立した修正をまとめるか分けるか計画段階で判断する等の場面では、ユーザーが「コミット」に一切言及していなくても必ず発火する。コミットの実施(素材収集・メッセージ確定・git commit 実行)は commit-flow スキルが担う。

yasunori0418/skills82026年10月12日 更新

def-done

無料日本語概要

プロジェクトに 1 つの「完成の定義」docs/dev/definition-of-done.md を対話で構築・改訂し、機械判定節と人判定節の二部構成で書き出すスキル。/def-done で明示的に呼び出されたときのみ使用する。

yasunori0418/skills82026年10月12日 更新

yasunori0418 のスキルをすべて見る

このスキルの問題を報告する