/diff-review
Generate a visual diff review for code changes
> /plugin marketplace add nicobailon/visual-explainer > /plugin install visual-explainer@visual-explainer-marketplace
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/diff-review
Context preview
What this command does when you run it.
Generate a visual diff review for code changes
Command definition
diff-review.mdname: diff-review
description: Generate a visual diff review for code changes
Load the visual-explainer skill and generate a self-contained HTML diff review.
Scope detection
Interpret `$@` as a branch, commit, range, PR, or `HEAD`. If no argument is given, compare the working tree against `main`/`master`.
Data gathering before HTML
Run the relevant git commands for: diff stats, name-status, changed files, line counts, public API/type/function changes, added/removed files, docs/changelog changes, tests touched, dependencies/config changes. Read changed files in full plus surrounding code paths needed to validate behavior. If reviewing committed work, read commit messages. If this session created the work, use available progress/plan notes for rationale.
Source verification
Before generating, know and cite:
- exact changed files and line-count scope;
- each function/type/module name referenced;
- before/after behavior for important changes;
- likely coupling and test impact.
Use file paths, command outputs, or file:line evidence. Do not invent rationale or code paths.
Required page sections
1. Executive summary: intuition, problem solved, factual scope. 2. File map: full tree, color-coded new/modified/deleted; compact, `<details>` if long. 3. Architecture impact: Mermaid or hybrid diagram when relationships matter. 4. Before/after behavior: side-by-side visual comparison. 5. Risk review: correctness, tests, API compatibility, security/privacy, performance, maintainability. 6. Coupling map: dependencies, hidden coupling, migration/release concerns. 7. Review recommendation: merge/readiness, blockers, follow-ups.
Use diff color language consistently: red removed/before, green added/after, amber modified/risk, blue neutral context. Use responsive section navigation for 4+ sections. Follow the skill’s Mermaid and overflow rules.
Write to `~/.agent/diagrams/` and open in browser.
Read more
name: diff-review description: Generate a visual diff review for code changes
Load the visual-explainer skill and generate a self-contained HTML diff review.
Scope detection
Interpret `$@` as a branch, commit, range, PR, or `HEAD`. If no argument is given, compare the working tree against `main`/`master`.
Data gathering before HTML
Run the relevant git commands for: diff stats, name-status, changed files, line counts, public API/type/function changes, added/removed files, docs/changelog changes, tests touched, dependencies/config changes. Read changed files in full plus surrounding code paths needed to validate behavior. If reviewing committed work, read commit messages. If this session created the work, use available progress/plan notes for rationale.
Source verification
Before generating, know and cite:
- exact changed files and line-count scope;
- each function/type/module name referenced;
- before/after behavior for important changes;
- likely coupling and test impact.
Use file paths, command outputs, or file:line evidence. Do not invent rationale or code paths.
Required page sections
1. Executive summary: intuition, problem solved, factual scope. 2. File map: full tree, color-coded new/modified/deleted; compact, `<details>` if long. 3. Architecture impact: Mermaid or hybrid diagram when relationships matter. 4. Before/after behavior: side-by-side visual comparison. 5. Risk review: correctness, tests, API compatibility, security/privacy, performance, maintainability. 6. Coupling map: dependencies, hidden coupling, migration/release concerns. 7. Review recommendation: merge/readiness, blockers, follow-ups.
Use diff color language consistently: red removed/before, green added/after, amber modified/risk, blue neutral context. Use responsive section navigation for 4+ sections. Follow the skill’s Mermaid and overflow rules.
Write to `~/.agent/diagrams/` and open in browser.
An agent skill that turns complex terminal output into styled HTML pages you actually want to read. Ask your agent to explain a system architecture, review a diff, or compare requirements against a plan.
Repo: nicobailon/visual-explainer
Other commands on visual-explainer-marketplace.
- /fact-check
Verify a generated document against actual code and git history
Open command - /generate-slides
Generate a slide deck as a self-contained HTML page
Open command - /generate-visual-plan
Generate a visual implementation plan
Open command - /generate-web-diagram
Generate a standalone HTML diagram and open it in the browser
Open command - /plan-review
Compare an implementation plan against the current codebase
Open command - /project-recap
Generate a visual project recap for context switching
Open command

