複雑なターミナル出力を実際に読みたいスタイル付きのHTMLページに変換するエージェントスキル。

エージェントにシステムアーキテクチャの説明を求めたり、差分を確認したり、要件と計画を比較してもらいましょう。ASCIIアートやボックス図面表の代わりに、自己完結型のHTMLページを生成し、ブラウザで開きます。

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

なぜ

すべてのコーディングエージェントは、図を求められるとASCIIアートをデフォルトで使います。ボックス描画の文字、単スペースのアライメントハック、テキスト矢印。些細なケースには使えますが、3ボックスのフローチャートを超えると読めない混乱になります。

テーブルはさらに悪いです。担当者に15の要件をプランと比較してもらうと、ターミナル内でパイプやダッシュの壁が巻きつき壊れてしまいます。データはありますが、読むのが苦痛です。

このスキルはそれを解決します。リアルなタイポグラフィ、暗色・明るいテーマ、読者に反応しアニメーションする手描き図。通常のスキル使用にはビルドステップがなく、ブラウザ以外の依存関係はありません。オプションのMCPやPPTXユーティリティは小さなNode依存関係を利用します。

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