Claude Skill
nicobailon/visual-explainer
Visual Explainer is a Claude Skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables, and project recaps.
Overview
Repository
Install this Skill
git clone --depth 1 https://github.com/nicobailon/visual-explainer.gitRegistry
git clone --depth 1 https://github.com/nicobailon/visual-explainer.gitgit clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
Summary
Visual Explainer is a Claude Skill that generates rich HTML pages or slide decks for diagrams, diff reviews, plan audits, data tables, and project recaps, helping users create visually compelling explanations from structured data.
Claude Skill + 提示模板，用于生成视觉差异对比、架构概览、计划审核、数据表格和项目回顾的丰富HTML页面
Key features
- Generates rich HTML pages or slide decks
- Supports diagrams, diff reviews, and plan audits
- Creates data tables and project recaps
- Leverages Claude's reasoning for visual explanations
Use cases
- Visualizing code or document diffs
- Auditing project plans with rich visuals
- Presenting data tables in interactive HTML
- Creating architecture overviews for stakeholders
- Generating project recap slides
README excerpt
<p> <img src="banner.png" alt="visual-explainer" width="1100"> </p> # visual-explainer **An agent skill that turns complex terminal output into styled HTML pages you actually want to read.** [](LICENSE) 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 ## Why 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. ## Install | 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/
Topics
No topics yet.