Skip to content
Get packs

Visual Explainer

Turns explanations, diffs, plans and data into self-contained HTML visual pages you can open in a browser.

Source Download skill
Repository
nicobailon/visual-explainer
Stars
10,741
Licence
MIT
Files
15 files

What it does

Once installed, the agent builds a single HTML page that explains a topic mainly through diagrams, charts and labeled figures, with short captions instead of long text. It can make architecture diagrams, code-change or plan reviews, project recaps, comparison tables, slide decks and narrated MP4 videos. It renders the page locally and opens it in a browser, and readers can click parts of the page to ask questions or leave comments that get sent back to the agent.

Great for

  • Developers who want to explain architecture, a pull request, or a refactor to teammates visually
  • Product or project leads who need a quick visual recap or plan review
  • Anyone who prefers seeing a system drawn out rather than reading a long document

Skip it if

  • Tasks that need plain text or a Markdown-only output, since the default output is HTML with figures (the skill only writes Markdown when asked)
  • Sensitive material you do not want rendered into a local file, because the page content and any reply data are written to disk and may be opened in a browser

Try asking

  • “Draw the architecture of this service as a visual explainer with the request path and cache layer”
  • “Make a visual review of the diff on my current branch with risks and next steps”
  • “Turn this project's recent commits into a visual recap page”
  • “Create a comparison page of these two database options with trade-offs”
Step-by-step guide: how to use Visual ExplainerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    visual-explainer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip visual-explainer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip visual-explainer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the audience and goal in your request so the agent picks the right page shape and depth
  • Ask for a specific output (diagram, slide deck, video) to avoid the default page when you need something else
  • Review the generated page in your browser and use the comment or ask features to request targeted changes

What's inside

  • .claude-plugin/plugin.json
  • commands/compare.md
  • commands/diff-review.md
  • commands/fact-check.md
  • commands/generate-slides.md
  • commands/generate-video.md
  • commands/generate-visual-plan.md
  • commands/generate-web-diagram.md
  • commands/plan-review.md
  • commands/project-recap.md
  • commands/state-machine.md
  • extension.ts
  • kit/ask.css
  • kit/ask.js
  • SKILL.md

Redistributed unmodified from nicobailon/visual-explainer under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.