explain-diff

Generates self-contained HTML explanations of code changes, diffs, commits, and pull requests.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill explain-diff-alex-jordan547
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: explain-diff
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/2026-09-10/explain-diff
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill explain-diff-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Understanding what changed in a codebase—whether from a diff, branch, commit, PR, or an agent's work—often requires digging through raw diffs and surrounding code. This Skill produces a single readable HTML document that teaches the change to a human reviewer, including background, intuition, code walkthrough, behavior, and risks. ## Core Features & Use Cases - Self-contained HTML output: Writes one .html file with embedded CSS and lightweight JavaScript, saved outside the repo with a date-prefixed filename so it never enters version control. - Structured explanation sections: Enforces required sections—Background, Intuition, Code, Behavior And Proof, and Risks And Follow-Ups—with a table of contents and narrative flow. - Rich visual aids: Supports callouts, HTML/CSS diagrams (UI mockups, data-flow, before/after states), and whitespace-preserving code blocks. - Use Case: After an orchestrator worker finishes a substantial implementation, invoke the skill to produce a reviewable handoff artifact at /tmp/2026-07-02-explanation-<slug>.html that links to tests, screenshots, and logs as proof. ## Quick Start Ask the agent to explain the current diff or a specific PR as a self-contained HTML artifact and return the absolute file path.

Frequently Asked Questions about explain-diff

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

FAQPage Schema
How do I generate an HTML explanation of a code diff or PR?

Invoke the skill with the diff, branch, commit, or PR you want explained. It explores the surrounding code, then writes one self-contained HTML file with embedded CSS covering background, intuition, code walkthrough, behavior, and risks, returning the absolute file path.

What sections should a code change explanation document include?

The skill enforces five required sections: Background on the existing system, Intuition behind the change, a Code walkthrough grouped by concept, Behavior And Proof linking to tests or screenshots, and Risks And Follow-Ups covering edge cases and residual concerns.

Where is the generated HTML explanation file saved?

The file is written to a global path outside the repository, such as /tmp, so it never enters version control. The filename must start with today's date in YYYY-MM-DD format so explanations sort chronologically.

Can the HTML explanation replace tests or verification artifacts?

No. The explanation is for human understanding, not verification. It links to tests, screenshots, videos, logs, and other proof artifacts when they exist, and explicitly states anything that was not verified.

Why do code blocks in generated HTML lose their line breaks?

Line breaks are lost when custom code wrappers lack proper CSS. The skill requires white-space: pre or pre-wrap on code blocks and checks that whitespace preservation is present before saving the file.