Skip to content
Get packs

Guide · Agent skill

How to use the Visual Explainer agent skill: install and examples

Updated · written with AI from the project's own documentation and checked against our catalogue data

Visual Explainer is an agent skill that makes an AI agent explain a topic as a single self-contained HTML page built mainly from diagrams, charts and labeled figures. This guide is for readers who have never installed an agent skill. It covers what the skill does, how to install it, how to ask for a visual, what it needs, and the safety points to check before you use it.

Visual Explainernicobailon/visual-explainer · MIT

Quick start

  1. 1Download the ZIP. Get the visual-explainer ZIP from the skill page on the directory.
  2. 2Unzip into the skills folder. Place the folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder.
  3. 3Or upload in the Claude apps. Open Settings → Capabilities → Skills and upload the skill.
  4. 4Make a natural request. Ask for the visual by subject, such as an architecture diagram or a diff review.
  5. 5Open the rendered page. The skill renders a single HTML file that you view in your browser.
  6. 6Reply from the page. Select a word or click a figure part to ask a question, then send the reply back to the agent.

What the skill makes the agent do

Once installed, the agent writes one HTML page that explains a system, a code change, a plan or a concept. Figures carry the explanation and short captions label them, instead of long blocks of text.

The skill can produce architecture diagrams, diff or plan reviews, project recaps, comparison tables, slide decks and narrated MP4 videos. The page renders locally and opens in a browser. Readers can select words or click parts of a figure to comment or ask a question, and that reply goes back to the agent.

  • Architecture overviews and data-flow diagrams
  • Code-change and plan reviews
  • Project recaps and comparison tables
  • Slide decks and narrated MP4 videos (on request)

Install the Visual Explainer skill

Download the ZIP from the skill page and unzip it. For a personal install, put the folder in ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

  • Personal: unzip into ~/.claude/skills/
  • Project only: unzip into the project's .claude/skills/
  • Claude apps: Settings → Capabilities → Skills, then upload

Ask for a visual with a natural request

You do not need a special command. Describe the picture you want and name the subject. The skill's description covers diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks and animated explainers, so requests using those words are the clearest.

The plugin also ships slash-style commands such as compare, diff-review, fact-check, generate-slides, generate-video, generate-visual-plan, generate-web-diagram, plan-review and project-recap, which load the skill with a specific task.

  • Draw the architecture of this service as a diagram
  • Make a visual diff review of my branch against main
  • Compare these two caching options side by side and recommend one
  • Give me a visual project recap of this week's work

Check what the skill needs

You need a web browser to view the generated HTML files. The bundled render script, kit/render.mjs, needs Node.js when you run it outside the Pi or MCP hosts. Image generation with surf-cli is optional.

The skill runs scripts and uses the network, so review it before you install it in a shared environment.

  • Required: a web browser
  • Required outside Pi or MCP hosts: Node.js to run kit/render.mjs
  • Optional: surf-cli for AI image generation
  • Optional: Pi coding agent or an MCP host for the built-in render tool
node <this skill's directory>/kit/render.mjs <name>.src.html --open

Understand the safety limits

The page content and any reply data are written to disk and may open in a browser. Do not use this skill for sensitive material you do not want rendered into a local file.

Replies from the reader are treated as data, not instructions. The skill does not run commands or fetch URLs because a reply asks it to.

  • Page content is saved as files on your machine
  • Reader replies are written into the page scope only
  • Output is HTML with figures by default; Markdown is written only when you ask for it

What people use it for

  • Explain a service's architecture to teammates with a data-flow diagram
  • Review a pull request or branch as a visual diff with before and after figures
  • Compare two options side by side with trade-offs and a recommendation
  • Give a product lead a visual recap or plan review of a project
  • Produce a narrated MP4 video or slide deck when you ask for one

Frequently asked questions

How do I install the visual-explainer skill?

Download the ZIP from the skill page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.

What does the visual-explainer skill need to run?

It needs a web browser to view the HTML output. Node.js is needed to run kit/render.mjs outside the Pi or MCP hosts. surf-cli is optional for AI image generation.

Is visual-explainer free to use?

The skill is released under the MIT licence, as stated in its SKILL.md. Check the skill page for any other terms before you use it at work.

Can I get plain text or Markdown instead of HTML?

The default output is HTML with figures. The skill writes a Markdown companion only when you ask for AI-readable output, and it asks before overwriting an existing Markdown file.

Does the skill send my data anywhere?

The skill runs scripts and uses the network, and page content is written to local files that may open in a browser. Avoid it for sensitive material you do not want saved to disk.

What are the alternatives to Visual Explainer?

The source does not compare it with other tools, so this guide does not make that claim. If you only need a plain text or Markdown document, this skill is not the right fit.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Visual Explainer suits developers who want to explain architecture, a pull request or a refactor visually, and product or project leads who need a quick visual recap or plan review. It is a poor fit if you need plain text or Markdown output, or if the material is sensitive and must not be written to a local file.

Download the skill