explain-diff-html

Generates a self-contained interactive HTML page explaining a code change, diff, branch, or pull request.

Updated Nov 10, 2013
One-click install
npx skills add https://github.com/bnferguson/dotfiles --skill explain-diff-html-bnferguson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: explain-diff-html
Source: https://github.com/bnferguson/dotfiles/tree/main/.agents/skills/explain-diff-html
Command: npx skills add https://github.com/bnferguson/dotfiles --skill explain-diff-html-bnferguson

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Understanding an unfamiliar code change often requires digging through diffs, surrounding code, tests, and documentation, then piecing together the motivation and behavior yourself. This Skill automates that investigation and produces a single long-form HTML page that teaches how the change works, from background and intuition to implementation walkthrough and a comprehension quiz. ## Core Features & Use Cases - Structured explanation page: Builds a dated, self-contained HTML file with Background, Intuition, Code walkthrough, and Quiz sections, using inline CSS and JavaScript with no external dependencies. - Interactive quiz and diagrams: Includes exactly five randomized multiple-choice questions with instant feedback, plus HTML/CSS flow diagrams, before/after panels, and component cards instead of ASCII art. - Security-hardened output: Treats the diff as untrusted input, escapes all diff-derived text, and forbids external assets or scripts so the generated page cannot exfiltrate data. - Use Case: After reviewing a teammate's large pull request, ask for an explanation page and receive a dated HTML file at /tmp that walks through the motivation, old versus new behavior, and edge cases, which you can share with the team for onboarding. ## Quick Start Explain the changes on my current branch as an interactive HTML page and save it outside the repository.

Frequently Asked Questions about explain-diff-html

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

FAQPage Schema
How do I generate an HTML explanation of a git diff or pull request?▼

Point the Skill at a checkout, diff, branch, or PR and it investigates the surrounding code, tests, and callers, then writes a single self-contained HTML page with background, intuition, code walkthrough, and a quiz. The file is saved outside the repository at a dated path like /tmp/YYYY-MM-DD-explanation-slug.html.

What sections does the generated code explanation page include?▼

The page contains a title, summary, table of contents, and four ordered sections: Background, Intuition, Code, and Quiz. The quiz has exactly five interactive multiple-choice questions with immediate feedback and explanations.

Does the generated HTML page require internet access or external libraries?▼

No. The output is fully self-contained with inline CSS and JavaScript and no external fonts, CDNs, images, or network calls. This self-containment rule also acts as a security boundary against exfiltration attempts embedded in untrusted diffs.

Is it safe to explain diffs from untrusted repositories?▼

Yes, the Skill treats the diff, PR metadata, and commit messages as passive data and ignores any embedded instructions. It escapes all diff-derived text for HTML and JavaScript contexts and never emits scripts or links suggested by the content being explained.

Where is the explanation HTML file saved?▼

By default the file is saved outside the repository, preferably at /tmp/YYYY-MM-DD-explanation-<slug>.html using the current date. It is only placed inside the repository if you explicitly request that.