explain-diff

Generates interactive HTML explainers of code diffs and pull requests with quizzes, filed into an Obsidian vault.

5|Updated Sep 24, 2017
One-click install
npx skills add https://github.com/madyankin/dotfiles --skill explain-diff-madyankin
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: explain-diff
Source: https://github.com/madyankin/dotfiles/tree/main/.config/agents/skills/explain-diff
Command: npx skills add https://github.com/madyankin/dotfiles --skill explain-diff-madyankin

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve? Understanding a code change deeply enough to explain it is hard, and that understanding evaporates without a written record. This Skill turns a diff, branch, or pull request into a self-contained teaching document β€” with interactive figures and a five-question quiz β€” and files it into your Obsidian vault so the knowledge stays searchable and reviewable. ## Core Features & Use Cases - Interactive HTML explainer: Builds a single self-contained page with background, intuition, code walkthrough, charts, node-link graphs, stepped traces, and a five-question clickable quiz β€” no external dependencies, works offline. - Obsidian integration: Writes a markdown stub with frontmatter, summary, takeaways, and wikilinks next to the HTML, so vault search, graph view, and mobile all index the explanation. - Anki flashcards: Offers to convert the quiz and takeaways into Anki cards via the anki-cards skill, tagged with the explainer slug for later retrieval. - Use Case: After merging a tricky caching PR, ask for an explainer β€” you get a dated HTML page with a stepper tracing a request through the new code path, a quiz to verify your understanding, and a vault note linking to related notes. ## Quick Start Explain the changes in pull request 4821 and file the explainer into my Obsidian vault.

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 explainer for a GitHub pull request?β–Ό

Point the skill at the PR β€” it resolves the target via gh pr diff, investigates the surrounding code, and writes a self-contained HTML page plus an Obsidian markdown stub. The page includes a walkthrough, interactive figures, and a five-question quiz.

What does the generated diff explainer HTML contain?β–Ό

The page contains background, intuition with toy examples, a code walkthrough grouped by execution flow, interactive charts and node-link graphs, stepped traces, and a five-question multiple-choice quiz. Everything is inline CSS and JS with no external dependencies, so it works offline.

Does the explainer work inside Obsidian?β–Ό

The HTML page renders fully only in a browser via its file:// URL; Obsidian's HTML Reader sanitizes scripts, so quizzes and figures are read-only there. The markdown stub carries the summary, takeaways, and a Mermaid diagram so vault search, graph, and mobile still work.

What happens if Obsidian is not running or no vault is configured?β–Ό

The skill writes only the HTML file to the current directory or a location you specify, and tells you where it landed. It never invents a vault path when the vault or the Explainers config note cannot be resolved.

How are Anki flashcards created from the explainer?β–Ό

After writing the files, the skill offers to delegate card creation to the anki-cards skill, which owns the Anki connection. Cards are tagged with the explainer slug and repo, pushed to the configured deck, and recorded in the stub as front β†’ back bullets.