Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By nicobailon
Generate self-contained HTML visual explainers for code diff reviews, implementation plans, slide decks, diagrams, and project recaps — with factual verification against git history and one-click deployment to Vercel.
npx claudepluginhub nicobailon/visual-explainer --plugin visual-explainerGenerate a visual HTML diff review — before/after architecture comparison with code review analysis
Verify the factual accuracy of a document against the actual codebase, correct inaccuracies in place
Generate a stunning magazine-quality slide deck as a self-contained HTML page
Generate a visual HTML implementation plan — detailed feature specification with state machines, code snippets, and edge cases
Generate a beautiful standalone HTML diagram and open it in the browser
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Visual report generation suite: wiki analysis, diff review, plan review, project recap, and fact-checking — self-contained HTML reports with interactive diagrams, responsive navigation, and curated design system
Sixteen HTML-output skills that help Claude Code reach for self-contained HTML artifacts (specs, diagrams, dashboards, prototypes, decks, mind maps, design tokens, comparison matrices, and more) instead of long-form markdown when HTML is the better surface.
Create beautiful, self-contained HTML visualizations from any content or idea. Use for slide decks, dashboards, infographics, flowcharts, timelines, cheat sheets, posters, and more.
Create beautiful HTML presentations from markdown specs using a Poimandres-themed template
Use this agent when creating visual narratives, designing infographics, building presentations, or communicating complex ideas through imagery. This agent specializes in transforming data and concepts into compelling visual stories that engage users and stakeholders. Examples:\n\n<example>\nContext: Creating app onboarding illustrations
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.
Convert MCP servers into standalone CLI tools for AI agents. Auto-detects npm/PyPI packages, generates Node.js wrappers, and registers them to CLAUDE.md.
An agent skill that turns complex terminal output into styled HTML pages you actually want to read.
Ask your agent to explain a system architecture, review a diff, or compare requirements against a plan. Instead of ASCII art and box-drawing tables, it generates a self-contained HTML page and opens it in your browser.
> draw a diagram of our authentication flow
> /diff-review
> /plan-review ~/docs/refactor-plan.md
https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec
Every coding agent defaults to ASCII art when you ask for a diagram. Box-drawing characters, monospace alignment hacks, text arrows. It works for trivial cases, but anything beyond a 3-box flowchart turns into an unreadable mess.
Tables are worse. Ask the agent to compare 15 requirements against a plan and you get a wall of pipes and dashes that wraps and breaks in the terminal. The data is there but it's painful to read.
This skill fixes that. Real typography, dark/light themes, interactive Mermaid diagrams with zoom and pan. No build step, no dependencies beyond a browser.
| Harness | Support | Install path / behavior |
|---|---|---|
| Claude Code | Marketplace plugin | Preserved marketplace shape with source at plugins/visual-explainer/ |
| Pi | Package metadata plus installer | package.json advertises the skill and prompts; install-pi.sh installs to ~/.pi/agent/skills/visual-explainer and ~/.pi/agent/prompts/ |
| Codex CLI | Native skill path plus optional prompts | Copy to ~/.codex/skills/visual-explainer; optional prompts go in ~/.codex/prompts/ if your Codex build supports them |
| OpenCode/opencode | Observed skill/command paths | Copy to ~/.config/opencode/skill/visual-explainer; optional commands go in ~/.config/opencode/command/ |
| Cursor | Rules-based guidance | Add the supplied .mdc rule; Cursor is not treated as native Agent Skills support |
| OpenClaw | Lightweight AGENTS/rules guidance | Use the supplied AGENTS guidance with the canonical skill directory |
Claude Code (marketplace):
/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplace
Note: Claude Code plugins namespace commands as /visual-explainer:command-name.
Pi:
pi install git:github.com/nicobailon/visual-explainer
Or from a local checkout:
git clone --depth 1 https://github.com/nicobailon/visual-explainer.git
pi install ./visual-explainer
The package manifest advertises the canonical skill and command templates:
"pi": {
"skills": ["./plugins/visual-explainer"],
"prompts": ["./plugins/visual-explainer/commands"]
}
If you previously used the old curl/manual installer, remove those copied files before using pi install; otherwise Pi will report skill and prompt conflicts because the user-level copies shadow the package resources:
rm -rf ~/.pi/agent/skills/visual-explainer
rm -f ~/.pi/agent/prompts/{diff-review,fact-check,generate-slides,generate-visual-plan,generate-web-diagram,plan-review,project-recap,share-page}.md
The legacy installer still works if you prefer copied files over package management:
curl -fsSL https://raw.githubusercontent.com/nicobailon/visual-explainer/main/install-pi.sh | bash
Codex CLI:
git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
mkdir -p ~/.codex/skills ~/.codex/prompts
cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.codex/skills/visual-explainer
# Optional, only if your Codex build supports prompt templates:
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/
rm -rf /tmp/visual-explainer
Invoke with $visual-explainer or ask Codex to use the visual-explainer skill. If prompts are installed and supported, use /prompts:diff-review, /prompts:plan-review, etc.
OpenCode/opencode:
git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
mkdir -p ~/.config/opencode/skill ~/.config/opencode/command
cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.config/opencode/skill/visual-explainer
# Optional command templates:
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.config/opencode/command/
rm -rf /tmp/visual-explainer
Activate it by asking OpenCode to use the visual-explainer skill. Command-template behavior depends on the installed OpenCode/opencode build.
Cursor:
Add configs/cursor/visual-explainer.mdc to your Cursor rules, or copy its contents into the project rules UI. This is rules-based guidance that points Cursor at the canonical skill; it does not claim native Agent Skills support.
OpenClaw: