** 一个代理技能，可以将复杂的终端输出转化为你真正想阅读的样式化 HTML 页面。**

请你的客服解释系统架构，审查差异，或将需求与计划进行比较。它不再是ASCII艺术和框图表格，而是生成一个独立的HTML页面，并在浏览器中打开。

https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec

为什么

每个编码代理在你要求图表时默认使用ASCII艺术。方框绘制字符、等宽对齐技巧、文本箭头。这对琐碎情况有效，但超过三格流程图的话就变得一团乱麻。

表格更糟。让客服把15个需求和一个计划对比，终端里会变成一堵管道和破折号的墙。数据确实存在，但读起来很痛苦。

这项技能解决了这个问题。真实的排版、暗/浅主题、手绘图表，能动画并响应读者。正常技能使用没有构建步骤，也没有浏览器以外的依赖;可选的MCP和PPTX工具使用小的节点依赖。

visual-explainer

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

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, hand-drawn diagrams that animate and respond to the reader. Normal skill use has no build step and no dependency beyond a browser; optional MCP and PPTX utilities use small Node dependencies.

Step through a state machine one event at a time: the route each event took lights up, jobs pile into queues and drain, and each step says why it happened (example).

Install