visual-explainer: a Claude Code skill by Nico Bailon
For developers who want diffs, plans and systems explained as a visual HTML page. Skip it if plain text answers in the terminal suit you fine.
- Score
- 59of 100
- Rank
- #226of 239
- Installs
- 861on skills.sh
- Stars
- 10.9Kon GitHub
- Security
- Mixed 5 scanners
- Updated
- 2026
- Context
- ~78tokens always
Install
npx skills add https://github.com/nicobailon/visual-explainer --skill visual-explainer
Run it in your terminal. View the source
Most people install it straight from GitHub, where it has 10.9K stars, so its skills.sh count understates how widely it is used.
Using the Claude app rather than Claude Code? You can add a skill there too. How to add it in the app
What does visual-explainer do?
visual-explainer is a skill that turns an explanation of a system, code change, plan or dataset into a self-contained HTML page built around figures. Claude writes a .src.html file with the bundled kit and draws hand-made SVG diagrams, steppers, small multiples and charts, one claim per figure with a one-line caption. A render script then checks the page in a browser and lists problems, which Claude fixes with small edits rather than a rewrite. Terminal tables with four or more rows become pages too. On request it also makes slide decks, PPTX files or a narrated MP4, and readers can click part of a figure to send a question back.
When should you use visual-explainer?
Use it when
- You want a diff or plan review you can scan visually
- You need an architecture overview for a teammate
- You want a project recap as a page, not a wall of text
Skip it when
- You prefer short text answers in the terminal
- You can't run Node.js locally
What it needs and what it can touch
You need
- Node.js, to run the bundled render script
- A browser to view the pages
What it can do
- Writes HTML files to ~/.agent/diagrams/ or a folder you name
- Runs the bundled Node render script, which opens the page
- Runs npx visual-explainer-video with playwright-core for MP4 videos
From reading its instructions, not from running it.
Why it scores 59
Strongest on upkeep (100 of 100), weakest on adoption (15).
Is visual-explainer safe to install?
At least one scanner raised a medium warning. Read the results below. Scanners often miss what other scanners catch, and a skill can change after a scan. Read its source before you install it.
| Scanner | Result | Date |
|---|---|---|
| Gen Agent Trust Hub | Passed | Nov 6, 2026 |
| Socket | Passed | Nov 6, 2026 |
| Snyk | Low risk | Nov 6, 2026 |
| Runlayer | Medium risk | Mar 10, 2026 |
| ZeroLeaks | Low risk | Apr 16, 2026 |
Details
- Installs
- 861
- Repository stars
- 10,948
- Last repository change
- Tokens always loaded
- about 78
- Tokens when used
- about 2,014
- License
- MIT
- Data confidence
- High
Did it do the job for you?
Alternatives to visual-explainer
All skills for this job-
Get archifyarchify
For developers who want checked, interactive HTML diagrams of systems, flows or schemas, including ones traced from a real repo.
-
Get Understand AnythingUnderstand Anything
For developers joining or auditing a large codebase who want an explorable map of it.
-
Get fireworks-tech-graphfireworks-tech-graph
For engineers who want clean architecture and workflow diagrams as SVG, PNG or GIF from a description.
-
Get anatomyanatomy
For writers and developers who want a detailed, animated isometric figure to explain a system.
visual-explainer