nicobailon/visual-explainer

Registry 信息

项目简介

Visual Explainer 是一个 Claude Skill，用于生成丰富的 HTML 页面或幻灯片，涵盖图表、差异审查、计划审核、数据表格和项目回顾，帮助用户从结构化数据创建视觉化的解释内容。

要点

• 生成丰富的 HTML 页面或幻灯片
• 支持图表、差异审查和计划审核
• 创建数据表格和项目回顾
• 利用 Claude 的推理能力进行视觉化解释

使用场景

• 可视化代码或文档差异
• 使用丰富视觉效果审核项目计划
• 以交互式 HTML 呈现数据表格
• 为利益相关者创建架构概览
• 生成项目回顾幻灯片

README 摘要

<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/

话题

暂无话题