mcpField
D
diff-viewer

diff-viewer

github.com/chann開発044 回インストール4 週間前に更新
リポジトリ

diff-viewer について

diff-viewerは現在のGit作業ツリーの差分をHTMLレポートにし、変更の確認やコメント追加を行う開発者向けスキルです。コードレビューや指摘の生成は行わず、差分を表示します。

主な機能

  1. 01git diff HEADからHTMLレポートを生成
  2. 02統合・分割差分ビュー
  3. 03単語単位の変更箇所を強調表示
  4. 04行範囲へのレビューコメント
  5. 05コメントをMarkdownで出力

活用シーン

  1. 01ブラウザーでステージ済み・未ステージの変更を確認
  2. 02変更行の範囲にコメント
  3. 03レビューのやり取りをMarkdownで出力

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/chann/skills --skill diff-viewer

インストール後、Claude Code で/diff-viewerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
assets/
diff-template.html
evals/
evals.json
scripts/
generate_diff_report.py

詳細

Diff Viewer

概要

現在の作業ツリーの差分を HTML レポートとして表示します。これはビューアーのみであり、コードレビューを実行したり、指摘事項を生成したりすることはありません。

ワークフロー

  1. 同梱スクリプトで現在の差分を取得します。

    python3 <skill-path>/scripts/generate_diff_report.py

  2. -o が指定されていない場合、スクリプトは .diffs/<YYYY-MM-DD>_<working|clean|short-sha>.html に書き込みます。

  3. 生成された HTML ファイルをブラウザーで開きます。

  4. ファイル数、追加・削除された行数、出力先パスを報告します。

  5. スクリプトに Suggestion: add .diffs/ to .gitignore と表示された場合は、その提案を伝えます。.gitignore を自動的に編集しないでください。

オプション

python3 <skill-path>/scripts/generate_diff_report.py \
  --view unified \
  --theme auto \
  --language auto \
  --code-scheme github \
  -o .diffs/my-diff.html

--view に指定できる値は unified と split です。--theme に指定できる値は auto、light、dark です。--language に指定できる値は auto、en、ko です。auto はブラウザーの設定に従います。--code-scheme に指定できる値は github、atom-one、monokai、dracula、nord、tokyo-night、solarized、gruvbox です。各スキームにはライトとダークのバリアントがあり、ページのテーマに応じて自動的に切り替わり、構文トークンの色とコード領域の背景色の両方に適用されます。ブラウザーのコントロールから後で変更でき、選択内容は localStorage に保存されます。

ブラウザーの機能

  • 右上のコントロールにある韓国語／英語の切り替えでは、すべてのラベル、ファイルの状態、概要のキャプション、コメントのコントロール、エクスポートされる Markdown の見出しが切り替わります。差分の内容はコードであり、翻訳されません。選択内容は localStorage に保存されます。
  • 行内の単語単位の差分ハイライトでは、統合ビューと分割ビューの両方で、変更された行の内部にある変更トークンが示されます。
  • 行番号をドラッグして範囲を選択し、その行にまたがるレビューコメントを 1 件残せます。
  • レビューコメントは生成された HTML レポートに紐づきます。そのため、同じリポジトリで新しいレポートを生成したときに、以前のレポートのコメントが再表示されることはありません。
  • 右上のコントロールにあるコメントをクリアを使うと、現在のレポートのコメントが削除されます。サイドバーのコメント一覧から各コメントに戻って、個別に編集または削除することもできます。
  • サイドバーは < ボタンで折りたたみ、フローティングメニューアイコンで展開できます。また、右端をドラッグしてサイズを変更できます。しきい値を超えて下方向にドラッグすると、自動的に折りたたまれます。幅と状態は localStorage に保存されます。
  • Markdown をコピーはサイドバーの下部にあり、現在のレビュースレッドを Markdown レポートとしてコピーします。

対象範囲

  • git diff HEAD を使用するため、ステージ済みの変更と未ステージの変更がまとめて表示されます。
  • HTML のみを生成します。Markdown レポートや分析は生成しません。
  • 実際のレビュー指摘が必要な場合は、code-review または code-review-md を使用してください。

コメント

Markdown 対応