visual-explainer skill
A skill that replaces terminal ASCII with self-contained HTML pages: diagrams, diff reviews, plan reviews, tables and slide decks
- 10,968 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Writes HTML files into a directory on your machine
- Optional utilities run Node render scripts
Install
- Works in
Manual install
/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplaceIn Claude Code the commands are namespaced under /visual-explainer:.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Writes HTML files into a directory on your machine
- Optional utilities run Node render scripts
This is third-party code. Review the repository files before installing.
What it does
The skill teaches the agent to deliver visual explanations as a ready HTML page opened in the browser rather than as terminal text graphics. It builds self-contained documents with embedded styles and scripts: architecture overviews, Mermaid diagrams with zoom and pan, diff reviews, plan reviews, comparison tables, project recaps and slide decks. Commands such as diff-review, plan-review, generate-web-diagram, generate-slides and project-recap trigger the right format. Before writing markup the skill first picks a palette, type roles and a layout concept so the page does not look templated. Basic use needs no build step and depends only on a browser, while the optional MCP utilities and PPTX export pull in small Node packages.
Who it is for. For developers, technical writers and teams who want readable visual explanations instead of terminal ASCII.
Good fit when
- You need to draw an architecture or process diagram and open it in the browser
- You need a visual diff review or plan review
- You need a comparison table, a project recap or a slide deck
Not a fit when
- The answer must stay in the terminal or in plain text
- There is no browser to open the generated HTML pages
Example request
Draw a diagram of our authentication flow and open it in the browserLimitations
The output is HTML files opened in a browser. The optional MCP utilities and PPTX export need Node packages, and the PPTX export targets only simple decks while HTML stays the source of truth. The MCP server is local, stdio only, and writes into a dedicated output directory, by default ~/.agent/diagrams/.
How to disable. Uninstall the visual-explainer plugin via /plugin, or remove the copied skill folder and the MCP server entry from your configuration.
FAQ
Which agents does it work with?
There is a Claude Code plugin, a Pi install, a local MCP server, and copying the skill folder into Cursor, Codex, OpenCode and the Antigravity CLI.
Is a build step required?
Not for normal use, a browser is enough. Node packages are only needed for the optional MCP utilities and PPTX export.
Discussion
No questions or reviews yet.
Related
SkillsA skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
Skill that draws architecture, flowchart and sequence diagrams as hand-placed SVG in one house style
A skill that draws a clickable Mermaid diagram in HTML: how a feature, a data flow or database tables work, with code per node
stack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
A Codex skill for reviewing AI-written code: explains blocks, names files and lines, checks goals against evidence.
A skill that turns code into interactive diagrams: eleven types, source-line evidence and a single offline HTML file.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| visual-explainer (this card) | no | 10,968 | |
| Lavish Editor (lavish-axi) | no | 4,556 | the agent builds a plan or comparison as an HTML page |
| MLView | no | 466 | a plugin for Claude Code |
README in short
The README introduces a skill that turns complex terminal output into styled HTML pages that are easy to read. The author explains that agents default to ASCII, which fails for diagrams beyond three boxes and for large tables, while the skill provides real typography, dark and light themes and interactive Mermaid diagrams. It documents installation for Claude Code, Pi, the Antigravity CLI, Codex, OpenCode, Cursor and other environments, plus a local MCP server and a PPTX export utility. It notes that the final page is self-contained HTML with embedded styles and scripts. MIT license.
README badge
Original SKILL.md
--- name: 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, and other visual explanations. license: MIT compatibility: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation. metadata: author: nicobailon version: "0.11.0" --- # Visual Explainer Generate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually. Use this skill for diagram requests, architecture overviews, diff/plan reviews, project recaps, comparison tables, slide decks, and any visual explanation. ## Trigger and delivery rules - Prefer an HTML page over terminal ASCII when the output is inherently visual. - If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary. - Write files to `~/.agent/diagrams/` or the explicit eval output path. Use descriptive filenames. - Generate a Markdown companion only when the user explicitly asks for AI-readable output or a source brief. Keep HTML as the final visual output; Markdown is a companion, never the source for HTML.