mcpField
D
diff-viewer

diff-viewer

github.com/channDevelopment044 installsUpdated 4w ago
Repository

About diff-viewer

diff-viewer renders the current Git working-tree diff as an HTML report for developers who want to inspect changes and add review comments. It displays changes without performing code review or generating findings.

Key features

  1. 01HTML reports from git diff HEAD
  2. 02Unified and split diff views
  3. 03Word-level change highlighting
  4. 04Line-range review comments
  5. 05Export comments as Markdown

Use cases

  1. 01Inspect staged and unstaged changes in a browser
  2. 02Comment on a range of changed lines
  3. 03Export a review thread as Markdown

Install

Copy the command and run it in a terminal.

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

After installing, type/diff-viewerin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

Diff Viewer

Overview

Render the current working-tree diff as an HTML report. This is a viewer only: it does not perform a code review or produce findings.

Workflow

  1. Capture the current diff with the packaged script:

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

  2. The script writes .diffs/<YYYY-MM-DD>_<working|clean|short-sha>.html unless -o is provided.

  3. Open the generated HTML file in the browser.

  4. Report the file count, added/deleted line counts, and output path.

  5. If the script prints Suggestion: add .diffs/ to .gitignore, pass that suggestion along. Do not edit .gitignore automatically.

Options

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

Valid --view values are unified and split. Valid --theme values are auto, light, and dark. Valid --language values are auto, en, and ko; auto follows the browser. Valid --code-scheme values are github, atom-one, monokai, dracula, nord, tokyo-night, solarized, gruvbox — each ships a light and a dark variant that follows the page theme automatically and drives both the syntax-token colors and the code-area background. The browser controls can change these later and persist choices in localStorage.

Browser features

  • Korean/English toggle in the top-right controls switches every label, file status, summary caption, comment control, and exported Markdown heading. Diff content is code and is never translated. The choice persists in localStorage.
  • Within-line word diff highlighting marks changed tokens inside modified lines in both unified and split views.
  • Drag line numbers to select a range, then leave a single review comment that spans those lines.
  • Review comments are scoped to the generated HTML report, so comments from an older report should not reappear when a new report is generated for the same repository.
  • Clear comments in the top-right controls removes comments for the current report, and the sidebar comment list can jump back to each comment so it can be edited or deleted individually.
  • Sidebar can be collapsed via the < button, expanded via the floating menu icon, and resized by dragging its right edge. Drag below the threshold to auto-collapse. Width and state persist in localStorage.
  • Copy Markdown lives at the bottom of the sidebar and copies the current review thread as a markdown report.

Boundaries

  • Uses git diff HEAD so staged and unstaged changes are shown together.
  • Produces HTML only, with no markdown report and no analysis.
  • For actual review findings, use code-review or code-review-md.

Comments

Markdown supported