# Diff Viewer

> Use when the user asks to render, inspect, open, or share the current git diff as a browser-readable HTML report, or explicitly invokes /diff-viewer, $diff-viewer, "diff viewer", "HTML diff", "split diff", or "unified diff".

- Skill: `chann/diff-viewer` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add chann/diff-viewer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chann/diff-viewer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: chann (https://skillmd.com/u/chann)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chann/diff-viewer

---


# 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:

   ```bash
   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

```bash
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`.