visual-explainer — скилл
Скилл, который вместо ASCII-схем в терминале собирает самодостаточные HTML-страницы: диаграммы, разбор диффов, ревью планов, таблицы и слайды
- 10 968 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Пишет HTML-файлы в каталог на вашей машине
- Опциональные утилиты запускают скрипты рендеринга на Node
Установка
- Работает в
Ручная установка
/plugin marketplace add nicobailon/visual-explainer
/plugin install visual-explainer@visual-explainer-marketplaceВ Claude Code команды получают префикс /visual-explainer:.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Пишет HTML-файлы в каталог на вашей машине
- Опциональные утилиты запускают скрипты рендеринга на Node
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл учит агента отдавать визуальные объяснения не текстовой графикой в терминале, а готовой HTML-страницей, которая открывается в браузере. Он собирает самодостаточные документы со встроенными стилями и скриптами: схемы архитектуры, диаграммы Mermaid с зумом и панорамированием, разбор диффов, ревью планов, сравнительные таблицы, итоги по проекту и слайды. Команды вроде diff-review, plan-review, generate-web-diagram, generate-slides и project-recap запускают нужный формат. Перед версткой скилл сначала выбирает палитру, роли шрифтов и схему раскладки, чтобы страница не выглядела шаблонной. Базовое использование не требует сборки и зависит только от браузера, а отдельные утилиты MCP и экспорт в PPTX подключают небольшие пакеты Node.
Для кого. Для разработчиков, технических писателей и команд, которым нужны читаемые визуальные объяснения вместо ASCII в терминале.
Подходит, если
- Нужно нарисовать схему архитектуры или процесса и открыть ее в браузере
- Нужно наглядно разобрать дифф или ревью плана
- Нужно собрать сравнительную таблицу, итоги проекта или набор слайдов
Не подходит, если
- Ответ должен остаться в терминале или в простом тексте
- Нет браузера, чтобы открыть готовые HTML-страницы
Пример запроса к агенту
Нарисуй схему нашего процесса аутентификации и открой ее в браузереОграничения
Результат это HTML-файлы, которые открываются в браузере. Опциональные утилиты MCP и экспорт в PPTX требуют пакетов Node, а экспорт в PPTX рассчитан только на простые колоды, источником правды остается HTML. MCP-сервер локальный, работает только через stdio и пишет в выделенный каталог, по умолчанию ~/.agent/diagrams/.
Как отключить. Удалите плагин visual-explainer через /plugin, либо удалите скопированную папку скилла и запись MCP-сервера из конфигурации.
Частые вопросы
С какими агентами работает?
Есть плагин для Claude Code, установка через Pi, локальный MCP-сервер и копирование папки скилла в Cursor, Codex, OpenCode и Antigravity CLI.
Нужна ли сборка?
Для обычного использования нет, хватает браузера. Пакеты Node нужны только опциональным утилитам MCP и экспорту в PPTX.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл рисует архитектуру системы одной HTML-страницей: схема с панорамой, фокусом на узле, светлой и темной темой.
Скилл рисует архитектурные схемы, блок-схемы и диаграммы последовательностей как размеченный вручную SVG в едином стиле
Скилл рисует кликабельную схему Mermaid в HTML: как устроены фича, поток данных или таблицы базы, с кодом по узлам
stack-diagram, скилл для архитектурных схем, встраивает логотипы и шрифты в HTML: готовый файл можно открыть без сети.
Codex-скилл для проверки кода после вайбкодинга: объясняет блоки, называет файлы и строки, сверяет цель с доказательствами.
Скилл строит интерактивные диаграммы по коду: одиннадцать типов, ссылки на строки-источники и один офлайн-файл HTML.
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| visual-explainer (эта карточка) | нет | 10 968 | |
| Lavish Editor (lavish-axi) | нет | 4 556 | агент рисует план или сравнение как HTML-страницу |
| MLView | нет | 466 | плагин для Claude Code |
Из блога
Коротко о README
README представляет скилл, который превращает сложный вывод в терминале в оформленные HTML-страницы, которые удобно читать. Автор объясняет, что агенты по умолчанию рисуют ASCII, и это плохо работает для схем сложнее трех блоков и для больших таблиц, а скилл дает нормальную типографику, темную и светлую темы и интерактивные диаграммы Mermaid. Описаны способы установки для Claude Code, Pi, Antigravity CLI, Codex, OpenCode, Cursor и других сред, а также локальный MCP-сервер и утилита экспорта в PPTX. Указано, что итоговая страница это самодостаточный HTML со встроенными стилями и скриптами. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: visual-explainer description: Generate self-contained HTML visual explanations for systems, code changes, plans, data, and technical concepts. Use for diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, slide decks, and other visual explanations. license: MIT compatibility: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation. metadata: author: nicobailon version: "0.11.0" --- # Visual Explainer Generate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually. Use this skill for diagram requests, architecture overviews, diff/plan reviews, project recaps, comparison tables, slide decks, and any visual explanation. ## Trigger and delivery rules - Prefer an HTML page over terminal ASCII when the output is inherently visual. - If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary. - Write files to `~/.agent/diagrams/` or the explicit eval output path. Use descriptive filenames. - Generate a Markdown companion only when the user explicitly asks for AI-readable output or a source brief. Keep HTML as the final visual output; Markdown is a companion, never the source for HTML.