New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Explain Diff

by nicknisi in nicknisi/claude-plugins

Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz.

MITAuto-check passedEducation

Install Explain Diff

skills CLI
$ npx skills add nicknisi/claude-plugins --skill explain-diff -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nicknisi/claude-plugins explain-diff --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nicknisi/claude-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/essentials/skills/explain-diff .claude/skills/explain-diff && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
explain-diff
GitHub stars
114
Token cost
~1.1k tokens
SKILL.md length
561 words
Files
1
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz.

  • Works in 4 steps: Background — Explain the existing system… → Intuition — Explain the core idea of the… → Code — A high-level walkthrough of the… → …
  • The user asks to explain
  • SKILL.md covers Resolve the change, Sections, Output format and Writing style, plus 1 more section
  • Calls git and gh

What it does

Explain Diff is an agent skill from nicknisi/claude-plugins. Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz. Use whenever the user asks to explain or deeply understand a diff, PR, branch, or commit — "explain this PR", "walk me through this change", "what does this diff actually do", "make an explainer for this branch" — or wants a shareable document that teaches someone else what changed and why. Output is an HTML file opened in the browser, not a chat reply.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Education, covering Diagrams. It works with Git. The repository describes itself as: Nick's own marketplace of Claude Plugins. The licence is MIT.

When your agent uses it

  • The user asks to explain
  • Deeply understand a diff
  • Commit — explain this PR
  • Walk me through this change

Example prompts

  • “explain this PR”
  • “walk me through this change”
  • “what does this diff actually do”
  • “/explain-diff”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Background — Explain the existing system this change slots into. The reader's familiarity is unknown, so layer it: a deep background for…
  2. Intuition — Explain the core idea of the change: what problem existed, what insight the change embodies, why this approach. Focus on the…
  3. Code — A high-level walkthrough of the changes. Group and order them for understanding — by concept or data flow — not by file order in…
  4. Quiz — Five interactive multiple-choice questions testing whether the reader understood the substance. Medium difficulty: answerable only…

What it can do on your machine

Read from SKILL.md and the folder at commit 6a6decd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git
    • gh

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git and gh, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Explain Diff loads about 1.1k tokens when it runs. Until then it costs about 133 tokens; SKILL.md has 561 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~133
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nicknisi/claude-plugins at commit 6a6decd, republished under its MIT licence (© nicknisi). 561 words, ~1,059 tokens.

Download SKILL.mdSave it as .claude/skills/explain-diff/SKILL.md (or your agent's skills folder).
name
explain-diff
description
Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz. Use whenever the user asks to explain or deeply understand a diff, PR, branch, or commit — "explain this PR", "walk me through this change", "what does this diff actually do", "make an explainer for this branch" — or wants a shareable document that teaches someone else what changed and why. Output is an HTML file opened in the browser, not a chat reply.

Explain Diff

Create a rich, interactive HTML explanation of a code change. The reader may be a teammate encountering the codebase for the first time or the author checking their own understanding — the document should serve both.

Resolve the change

Pin down exactly what to explain before writing anything:

  • PR number or URL — gh pr diff <number> for the diff, gh pr view <number> for the title, description, and discussion
  • Branch — git diff <base>...<branch> against the repo's default branch
  • Commit — git show <sha>
  • Nothing specified — the working tree (git diff HEAD); if clean, the current branch against the default branch

Then explore beyond the diff: read the touched files in full, their callers, and the subsystem they belong to. The Background section lives or dies on your understanding of the surrounding system, not just the delta.

Sections

The explanation has four sections, in this order:

  1. Background — Explain the existing system this change slots into. The reader's familiarity is unknown, so layer it: a deep background for beginners (marked as skippable for readers who already know the system), then a narrower background directly relevant to the change.

  2. Intuition — Explain the core idea of the change: what problem existed, what insight the change embodies, why this approach. Focus on the essence, not the full details. Use concrete examples with toy data, and use figures and diagrams liberally.

  3. Code — A high-level walkthrough of the changes. Group and order them for understanding — by concept or data flow — not by file order in the diff.

  4. Quiz — Five interactive multiple-choice questions testing whether the reader understood the substance. Medium difficulty: answerable only by someone who actually understood the change, but no gotchas. On click, reveal whether the answer was correct with a short explanation either way — the feedback is where the learning happens.

Show full SKILL.md (260 more words)Show less

Output format

Produce a single self-contained HTML file:

  • All CSS and JavaScript inline, no external requests (CDNs, fonts, images) — the file is opened locally and must work offline.
  • One long page with section headers and a table of contents. Don't use tabs for the top-level structure.
  • Basic responsive styling so it reads well on a phone.
  • Save it outside the repo so it stays out of version control, with the filename starting with today's date so the files stay time-sorted: /tmp/YYYY-MM-DD-explanation-<slug>.html.
  • When done, open it in the browser (open <path> on macOS) and tell the user the path.

Writing style

Write with the clarity and flow of Martin Kleppmann — engaging, classic style, with smooth transitions between sections. Use callouts for key concepts, definitions, and important edge cases.

Diagrams

  • Pick a small number of diagram families and reuse them throughout to explain different cases — a repeated visual form makes each new instance easier to parse. Useful families:
    • A simplified version of the UI the user sees in the app, for explaining UI changes.
    • A system diagram showing data flow or communication between components — always populated with example data.
  • Build diagrams from simple HTML and CSS, and lists from HTML lists. Never use ASCII art — it breaks under responsive layouts and proportional fonts.
  • Use <pre> tags for code blocks. If a custom-styled div is used instead, its CSS must include white-space: pre or pre-wrap, or the browser will collapse every newline into a single line. Before saving the file, scan each code block in the HTML source and confirm its whitespace handling.

© nicknisi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/essentials/skills/explain-diff of nicknisi/claude-plugins.

Open the folder on GitHubat commit 6a6decd

Compare with similar skills

Explain Diff next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Explain Diff compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Explain Diff this skillnicknisi/claude-plugins114—~1.1kAutomated safety check: PassMIT
Repo TutorMathews-Tom/armory328—~3.1kAutomated safety check: PassMIT
Visual Reviewai-dynamo/dynamo8.2k—~4.5kAutomated safety check: PassApache-2.0
Mermaid Diagramsjjmartres/opencode1336 repos~1.9kAutomated safety check: PassMIT
Ljt Repo Architectx554960766/wechat-mp-tools171—~933Automated safety check: PassCustom licence
Diagram312362115/claude107—~2.7kAutomated safety check: PassMIT

Similar skills

  • Repo Tutor

    Mathews-Tom/armory

    A skill your agent uses when a user supplies a local repository path or remote Git URL and asks to "teach me this repo", "explain this codebase simply", "show how this system works", "help me use…

    328 GitHub stars~3.1k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

  • Visual Review

    ai-dynamo/dynamo

    Create self-contained interactive HTML code-review dashboards from GitHub or GitLab pull requests, checked-out branch diffs, or supplied unified diffs, with correctness and safe-to-merge scores…

    8.2k GitHub stars~4.5k tokensUpdated today
    DevelopmentAuto-check passed

  • Mermaid Diagrams

    jjmartres/opencode

    Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.

    133 GitHub starsUsed in 6 repos~1.9k tokens
    DevelopmentAuto-check passed

  • Ljt Repo Architect

    x554960766/wechat-mp-tools

    Produce a repository architecture analysis and staged learning guide.

    171 GitHub stars~933 tokensUpdated 9 days ago
    DevelopmentAuto-check passed

  • Diagram

    312362115/claude

    专业图表生成技能：根据需求自动选择合适的图表类型，生成符合设计规范的 PNG 图表. An agent skill from 312362115/claude.

    107 GitHub stars~2.7k tokensUpdated 4 mo ago
    DevelopmentAuto-check passed

  • Miro Code Review

    miroapp/miro-ai

    A skill your agent uses when the user wants to create a visual code review on a Miro board from a pull/merge request (GitHub, GitLab, or any forge), local uncommitted changes, or a branch comparison…

    160 GitHub stars~4.8k tokensUpdated 21 days ago
    DevelopmentAuto-check: warnings

More from nicknisi/claude-plugins

All 12 skills in this repo

  • Blog Post Writer

    nicknisi/claude-plugins

    Turn Nick Nisi's raw material into a blog post draft in his voice.

    114 GitHub stars~1.8k tokensUpdated 1 mo ago
    Auto-check passed

  • Image Gen

    nicknisi/claude-plugins

    Generate or edit images via Google Gemini (nano-banana-pro) or OpenAI gpt-image-2.

    114 GitHub stars~502 tokensUpdated 1 mo ago
    Auto-check passed

  • Prototype

    nicknisi/claude-plugins

    Build a throwaway prototype to answer a design question before committing to real implementation.

    114 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Squad Review

    nicknisi/claude-plugins

    Review the current branch with six specialist lenses (security, correctness, conventions, tests, architecture, duplication), then put every finding through an adversarial verifier that tries to…

    114 GitHub stars~751 tokensUpdated 1 mo ago
    Auto-check passed

  • Tmux

    nicknisi/claude-plugins

    Read and drive other tmux panes when Claude runs inside tmux.

    114 GitHub stars~3.1k tokensUpdated 1 mo ago
    Auto-check passed

  • Youtube Notes

    nicknisi/claude-plugins

    Pull captions from a YouTube video and turn them into chapter-aligned notes where every claim carries a clickable timestamp.

    114 GitHub stars~2.8k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Explain Diff

What does Explain Diff do?

Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz. Explain Diff is an agent skill from nicknisi/claude-plugins. Produce a rich, self-contained HTML explainer for a code change — deep background, core intuition with diagrams, a guided code walkthrough, and an interactive quiz.

When should I use Explain Diff?

Explain Diff fits situations like: the user asks to explain; deeply understand a diff; commit — explain this PR; walk me through this change.

How do I install Explain Diff in Claude Code?

Run `npx skills add nicknisi/claude-plugins --skill explain-diff -a claude-code`. Or copy the skill folder (plugins/essentials/skills/explain-diff in nicknisi/claude-plugins) into .claude/skills/explain-diff in your project. Claude Code loads it when a task matches its description.

How do I install Explain Diff in Codex?

Run `npx skills add nicknisi/claude-plugins --skill explain-diff -a codex`. Or copy the skill folder (plugins/essentials/skills/explain-diff in nicknisi/claude-plugins) into .agents/skills/explain-diff in your project. Codex loads it when a task matches its description.

Can I use Explain Diff in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nicknisi/claude-plugins --skill explain-diff -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/explain-diff, .gemini/skills/explain-diff, .github/skills/explain-diff and .opencode/skills/explain-diff in your project.

What does Explain Diff need to run?

Going by SKILL.md and its folder, Explain Diff needs the command-line tools its instructions call (git and gh).

Does Explain Diff access the network?

SKILL.md contains no URLs. Its commands use git and gh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Explain Diff safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Explain Diff use?

Explain Diff is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Explain Diff use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Explain Diff?

Skills that share tags, products or a category with Explain Diff: Repo Tutor (Mathews-Tom/armory, 328 stars), Visual Review (ai-dynamo/dynamo, 8.2k stars), Mermaid Diagrams (jjmartres/opencode, 133 stars) and Ljt Repo Architect (x554960766/wechat-mp-tools, 171 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Explain Diff?

nicknisi (a GitHub user) maintains it in nicknisi/claude-plugins, which has 114 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on August 11, 2026.

Source: nicknisi/claude-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.