visual-explainer 用于生成自包含的 HTML 文件，呈现技术图表、编辑类可视化和数据表格。加载该技能后，结果应在浏览器中打开，不应退回到 ASCII 艺术。
主要能力：当需要以终端 ASCII 表格展示结构化数据（对比、审计、功能矩阵、状态报告、来源核验网格等）时，若表格有 4 行以上或 3 列以上，应自动改为生成 HTML 页面并告知文件路径，聊天中仍可保留简短文字摘要。
可用命令（提示模板位于 ./commands/）：generate-web-diagram 生成任意主题的 HTML 图表；generate-visual-plan 生成功能的可视化实施计划；generate-slides 生成杂志级幻灯片；diff-review 可视化 diff 评审，含架构对比与代码评审；plan-review 将计划与代码库对比并做风险评估；project-recap 生成用于切换回项目的心智模型快照；fact-check 对照实际代码核验文档准确性；share-page 将 HTML 页面部署到 Vercel 并获得在线 URL。在 Claude Code 中带命名空间（/visual-explainer:diff-review），在 Pi 中为斜杠命令（/diff-review），在 Codex 中用 /prompts:diff-review 或调用 $visual-explainer。
工作流程：先确定方向，视觉为默认，散文元素仅作点缀；再按内容类型选择渲染方式，如架构、流程图、时序图、ER、状态机、思维导图、类图、C4 用 Mermaid，数据表格用 HTML <table>，时间线用 CSS，仪表盘用 CSS Grid + Chart.js；最后应用排版、配色与层次原则。Mermaid 需使用 theme: 'base' 与自定义 themeVariables，复杂图用 layout: 'elk'，并始终使用带缩放控件的 .mermaid-wrap 容器，避免裸 <pre class="mermaid">。
限制：资料未提供收费、价格、平台支持范围等具体信息；部分命令与模板依赖本地文件结构，AI 插图功能依赖 surf-cli 是否可用。