# Visual Explainer

Generates self-contained HTML visuals for systems, diffs, plans and data.

- Repository: https://github.com/nicobailon/visual-explainer (10732 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nicobailon/visual-explainer --skill visual-explainer -g -a claude-code -y`
Codex: `npx skills add nicobailon/visual-explainer --skill visual-explainer -g -a codex -y`
Cursor: `npx skills add nicobailon/visual-explainer --skill visual-explainer -g -a cursor -y`
Gemini CLI: `npx skills add nicobailon/visual-explainer --skill visual-explainer -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nicobailon/visual-explainer`

## Description

Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, animated explainers, narrated MP4 videos, and other visual explanations.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Visual Explainer

Turn what you know into something a person understands in ten seconds. The default output is one HTML page whose spine is figures; text is caption, not content. Animate when motion helps the reader understand a process, a flow, a change of state, or cause and effect; keep what is static still.

## Deliver

The rest: https://github.com/nicobailon/visual-explainer/blob/HEAD/plugins/visual-explainer/SKILL.md