explain-diff

Generates an interactive HTML explanation page with diagrams and quizzes for a code change.

1|Updated Aug 6, 2025
One-click install
npx skills add https://github.com/azaidrahman/zaid-sani-dotfiles --skill explain-diff-azaidrahman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: explain-diff
Source: https://github.com/azaidrahman/zaid-sani-dotfiles/tree/main/dot_claude/skills/explain-diff
Command: npx skills add https://github.com/azaidrahman/zaid-sani-dotfiles --skill explain-diff-azaidrahman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Understanding a code change—whether a diff, commit, branch, or pull request—often requires digging through files and reconstructing context manually. This Skill produces a rich, self-contained explanation page that teaches the change so the reader can explain it back in their own words. ## Core Features & Use Cases - Structured Explanation Page: Builds a single HTML artifact with four sections—Background, Intuition, Code walkthrough grouped by idea, and an interactive five-question quiz. - Diagrams and Interactivity: Requires three to six inline SVG or HTML diagrams (UI sketches, data-flow diagrams, before/after pairs) plus a scored multiple-choice quiz with per-question feedback. - Publishing Workflow: Writes the dated file to the active context directory and publishes it via the Artifact tool, with links to the source PR or ticket in the masthead. - Use Case: After finishing a branch, ask for an explanation of the work; you receive a published page with background context, a concrete example, a grouped code walkthrough, and a quiz to verify understanding. ## Quick Start Ask the assistant to explain the changes on the current branch or a specific pull request and publish the explanation as an interactive page.

Frequently Asked Questions about explain-diff

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

FAQPage Schema
How do I get an explanation of a pull request or branch?

Point the skill at a commit, branch, uncommitted work, or a GitHub/Bitbucket pull request. It reads the diff and surrounding files, then publishes a single HTML page with background, intuition, a code walkthrough grouped by idea, and a quiz.

What does the generated explanation page contain?

The page has four sections in order: Background with beginner and focused layers, Intuition with a concrete toy example, a Code walkthrough grouped by idea rather than by file, and a five-question interactive multiple-choice quiz with scoring.

Can it explain a GitHub or Bitbucket pull request?

Yes. It fetches the diff with gh pr diff for GitHub or twg bb pull-requests diff for Bitbucket, and places a real hyperlink to the PR in the page masthead. If no PR exists, it links the ticket instead.

When should I not use this skill for code review?

Use it to understand how a change works, not to judge it. For finding bugs and risks use a code-review skill, for security findings use a security review, and for a one-line answer about a single change just ask in chat.

Where is the explanation file saved?

The HTML file is written to the active context directory with a date-prefixed kebab-case name, then published via the Artifact tool so you receive a shareable link. A local-only file is possible if you skip publishing.