visual-explainer
Agent skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables, and project recaps
Visual Explainer is an agent skill that transforms complex terminal output, diagrams, and data into rich, self-contained HTML pages with interactive visualizations. Instead of ASCII art and text-based tables, it generates styled HTML documents with Mermaid diagrams, Chart.js charts, responsive layouts, and switchable themes that open directly in your browser. The skill supports multiple AI agent platforms including Claude Code (as a marketplace plugin), Pi, MCP hosts, Antigravity CLI, Codex CLI, and others, providing slash commands for diff reviews, plan audits, architecture diagrams, slide decks, and project recaps.
Key Features
Use Cases
- 01Visualize system architecture and authentication flows as interactive Mermaid diagrams instead of ASCII boxes
- 02Review pull request diffs with side-by-side architecture comparisons and formatted code review tables
- 03Compare implementation plans against actual codebase with risk assessments and requirement tracking
- 04Generate magazine-quality slide decks for technical presentations with optional PPTX export
- 05Create project recap snapshots for context-switching back to work after breaks
- 06Verify documentation accuracy by fact-checking against actual code with structured comparison tables
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
visual-explainer — FAQ
What is visual-explainer?+
Visual-explainer is an agent skill that converts terminal-based output like diagrams, tables, and code reviews into styled, self-contained HTML pages with interactive Mermaid diagrams, Chart.js charts, and switchable themes. It works across multiple AI agent platforms including Claude Code, Pi, MCP hosts, and others.
How do I install visual-explainer for Claude Code?+
For Claude Code, install from the marketplace with '/plugin marketplace add nicobailon/visual-explainer' followed by '/plugin install visual-explainer@visual-explainer-marketplace'. Commands are namespaced as '/visual-explainer:command-name'.
Which AI agent platforms support visual-explainer?+
Visual-explainer supports Claude Code (marketplace plugin), Pi (native package tool), MCP hosts (stdio server), Antigravity CLI, Codex CLI, OpenCode, Cursor (rules-based), OpenClaw, and VS Code Copilot. Each platform has specific installation instructions.
Does visual-explainer require API keys or dependencies?+
Normal use requires only a browser with no build step or dependencies. Optional features use small Node dependencies: the MCP server requires Node.js, and PPTX export uses the bundled utility. No API keys are needed.
Is visual-explainer free to use?+
Yes, visual-explainer is open source and released under the MIT license, making it free for both personal and commercial use.
Where does visual-explainer save generated HTML files?+
By default, all generated HTML files are saved to '~/.agent/diagrams/' and automatically opened in your browser. You can request a different output path when invoking commands.
How do I install visual-explainer?+
Open the source repository on GitHub and follow its README. visual-explainer is a skill — MCP Agents Market links you directly to the official repo.
Is visual-explainer free?+
visual-explainer is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.