Навык агента, который превращает сложные терминальные выводы в стилизованные 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