visual-explainer

ターミナル出力を「読みたくなる」スタイル付き HTML に変えるエージェントスキル。アーキテクチャ図・diff レビュー・計画比較などを、ASCII アートではなく自己完結した HTML ページとしてブラウザで開けます。

1 — 概要

なぜ visual-explainer か

コーディングエージェントは図を頼まれると ASCII アートで返すことが多い。罫線文字や等幅の配置で、3 箱程度のフローならまだしも、それ以上は読みづらい。表も同様で、要求と計画を 15 項目比較するとパイプとダッシュの壁になり、データはあるが読むのがつらい。

visual-explainer はそこで使うスキル。実際のタイポグラフィ、ダーク/ライトテーマ、ズーム・パン対応の Mermaid 図。ビルド不要で、ブラウザ以外の依存もありません。

自動発動: ターミナルに 4 行以上または 3 列以上の表を出そうとしたとき、代わりに HTML をレンダリングします。

2 — インストール

導入方法

Claude Code（マーケットプレース）

/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplace

コマンドは /visual-explainer:コマンド名 のように名前空間付きになります。

Pi（手動）

# リポジトリをクローン
git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer

# スキルをインストール
cp -r /tmp/visual-explainer/plugins/visual-explainer ~/.pi/agent/skills/visual-explainer

# スラッシュコマンド用プロンプトをインストール
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.pi/agent/prompts/

# 後片付け
rm -rf /tmp/visual-explainer

OpenAI Codex

git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
cp -r /tmp/visual-explainer/plugins/visual-explainer ~/.agents/skills/visual-explainer
mkdir -p ~/.codex/prompts
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/
rm -rf /tmp/visual-explainer

$visual-explainer で呼び出すか、プロンプトを入れた場合は /prompts:diff-review などを利用できます。

3 — コマンド一覧

コマンド	説明
`/generate-web-diagram`	任意のトピックで HTML 図を生成
`/generate-visual-plan`	機能・拡張のビジュアル実装計画を生成
`/generate-slides`	雑誌品質のスライドデッキを生成
`/diff-review`	アーキテクチャ比較とコードレビュー付きのビジュアル diff レビュー
`/plan-review`	計画とコードベースの比較とリスク評価
`/project-recap`	プロジェクトに戻るためのメンタルモデルスナップショット
`/fact-check`	ドキュメントの内容を実際のコードと照合して検証
`/share`	HTML を Vercel にデプロイして公開 URL を取得

4 — スライドモード

スクロール可能なページを出すコマンドには --slides を付けると、スライドデッキ形式で出力できます。

/diff-review --slides
/project-recap --slides 2w

5 — 仕組み

スキルは用途に応じて自動でアプローチを切り替えます。フローチャート・図は Mermaid、アーキテクチャ概要は CSS Grid、データは HTML テーブル、ダッシュボードは Chart.js など。

.claude-plugin/
├── plugin.json           ← マーケットプレース用
└── marketplace.json      ← プラグインカタログ
plugins/
└── visual-explainer/
    ├── .claude-plugin/
    │   └── plugin.json   ← プラグインマニフェスト
    ├── SKILL.md          ← ワークフローとデザイン原則
    ├── commands/         ← スラッシュコマンド
    ├── references/       ← 生成前にエージェントが参照
    │   ├── css-patterns.md
    │   ├── libraries.md
    │   ├── responsive-nav.md
    │   └── slide-patterns.md
    ├── templates/
    │   ├── architecture.html
    │   ├── mermaid-flowchart.html
    │   ├── data-table.html
    │   └── slide-deck.html
    └── scripts/
        └── share.sh      ← Vercel へデプロイ用

出力先: ~/.agent/diagrams/ファイル名.html に保存され、ブラウザで開きます。

6 — 制限

表示にはブラウザが必要
OS のテーマ切り替え後、Mermaid の SVG を反映するにはページの再読み込みが必要
結果はモデルの能力に依存する

7 — クレジット・ライセンス

Anthropic の frontend-design skill と interface-design のアイデアを参考にしています。

ライセンス：MIT

リポジトリ：nicobailon/visual-explainer（GitHub）