skills.rest
ivanov-i
ivanov-iCOMMUNITY
Explore all skills by this author →
GitHub

visual-diff-review

Generate self-contained HTML diff review pages comparing before/after states.

Updated Aug 12, 2018
Search Tags:#workflow#architecture#html#code-review#diff-review#visual-diff#change-analysis
One-click install
npx skills add https://github.com/ivanov-i/dots --skill visual-diff-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-diff-review
Source: https://github.com/ivanov-i/dots/tree/main/codex/skills/visual-diff-review
Command: npx skills add https://github.com/ivanov-i/dots --skill visual-diff-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate a visual HTML diff review with before/after architecture, code review findings, and decision context. Use when the user asks to review changes against a branch, commit, range, PR, or current working tree.

Core Features & Use Cases

  • Use the visual-explainer diff-review prompt template to perform deep, evidence-backed change analysis.
  • Resolve diff scope from user input (branch, commit, PR, range, or default behavior defined in the prompt).
  • Build the required fact sheet, then generate the HTML review exactly per template constraints.
  • Write output to ~/.agent/diagrams/, open it in the browser, and report the file path.

Quick Start

Request a visual diff review for a specific branch, commit, range, or PR to generate and view an HTML diff in your browser.

Frequently Asked Questions about visual-diff-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a visual HTML diff review for my code changes?▼

You request a review against a branch, commit, PR, range, or working tree. The tool builds a fact sheet and generates a self-contained HTML diff review page with before/after architecture visuals and code review findings.

What is a visual diff review and when do I need one?▼

A visual diff review is an HTML page comparing before and after states of code changes with architecture visuals. You need it when you want an evidence-backed, visual analysis of changes across branches or commits instead of a plain text diff.

Can I review changes from a specific pull request or commit range?▼

Yes, you can review changes from a specific pull request, branch, commit, commit range, or the current working tree. The tool resolves the diff scope from your input and generates the visual HTML review accordingly.

Where are the generated HTML diff review files saved?▼

The generated HTML diff review files are exported to the ~/.agent/diagrams/ directory. The tool automatically opens the generated file in your browser and reports the exact file path.

What's the best way to analyze code changes with architecture visuals?▼

The best way to analyze code changes with architecture visuals is using a visual diff review tool that generates self-contained HTML pages. It compares before/after states and includes a fact sheet with evidence-backed findings for deep change analysis.

Does visual diff review work without any external dependencies?▼

Yes, visual diff review works without external dependencies. It uses the visual-explainer diff-review template internally to assemble a fact sheet and generate the HTML output, requiring no additional components to function.

Related Skills

Explore More Software Engineering Skills→
selfagencyselfagency

git-commit

Generate Conventional Commits from git diffs with type, scope, and description.

Community
Intermediate
ivanov-iivanov-i

visual-explainer

Convert terminal outputs into self-contained HTML pages with Mermaid diagrams.

Community
Advanced
dhofheinzdhofheinz
9

Quality Analysis Skill

Score marketplace plugins 0-100 and generate markdown, JSON, and HTML reports.

Community
Intermediate
jpfieldingjpfielding
1

visual-explainer

Turns terminal output and structured text into self-contained HTML pages for browser-based sharing.

Community
Advanced