visual-explainer - Это навык агента, который преобразует сложный вывод терминала в стилизованные HTML-страницы, которые приятно читать.

Попросите своего агента объяснить архитектуру системы, просмотреть различия или сравнить требования с планом. Вместо ASCII-графики и таблиц с прямоугольниками он сгенерирует автономную HTML-страницу и откроет ее в вашем браузере.

Вывод: ~/.agent/diagrams/filename.html → открывается в браузере

Навык автоматически указывает на нужный подход: Mermaid для блок-схем и диаграмм, CSS-сетка для обзоров архитектуры, HTML-таблицы для данных, Chart.js для панелей мониторинга.

Инструкция по применению

Установка

Использование	Поддержка	Путь установки / поведение
Claude Code	Плагин Marketplace	Сохраненная форма marketplace с исходным кодом в `plugins/visual-explainer/`
Pi	Метаданные пакета плюс установщик	`package.json` сообщает о навыках и подсказках; `install-pi.sh` устанавливается в `~/.pi/agent/skills/visual-explainer` и `~/.pi/agent/prompts/`
Codex CLI	Собственный путь к навыкам плюс дополнительные подсказки	Скопируйте в `~/.codex/skills/visual-explainer`; дополнительные подсказки введите в `~/.codex/prompts/`, если ваша сборка Codex поддерживает их
Открытый код/opencode	Наблюдаемый навык/пути к командам	Скопировать в `~/.config/opencode/skill/visual-explainer`; необязательные команды ввести в `~/.config/opencode/command/`
Курсор	Руководство, основанное на правилах	Добавьте прилагаемое правило `.mdc`; Курсор не будет использоваться как поддержка собственных навыков агентов
OpenClaw	Облегченные АГЕНТЫ/руководство по правилам	Используйте прилагаемое руководство для АГЕНТОВ с каноническим справочником навыков

Claude Code (marketplace):

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

Примечание: Команды пространства имен плагинов Claude Code отображаются как /visual-explainer:command-name.

Pi:

pi install git:github.com/nicobailon/visual-explainer

Или из локальной кассы:

git clone --depth 1 https://github.com/nicobailon/visual-explainer.git
pi install ./visual-explainer

В манифесте пакета указаны канонические шаблоны навыков и команд:

"pi": {
  "skills": ["./plugins/visual-explainer"],
  "prompts": ["./plugins/visual-explainer/commands"]
}

Если вы ранее использовали старый установщик curl/вручную, удалите эти скопированные файлы перед использованием pi install; в противном случае Pi сообщит о конфликтах навыков и подсказок, поскольку копии на уровне пользователя затеняют ресурсы пакета:

rm -rf ~/.pi/agent/skills/visual-explainer
rm -f ~/.pi/agent/prompts/{diff-review,fact-check,generate-slides,generate-visual-plan,generate-web-diagram,plan-review,project-recap,share-page}.md

Устаревший установщик по-прежнему работает, если вы предпочитаете копировать файлы, а не управлять пакетами:

curl -fsSL https://raw.githubusercontent.com/nicobailon/visual-explainer/main/install-pi.sh | bash

Codex CLI:

git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer

mkdir -p ~/.codex/skills ~/.codex/prompts
cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.codex/skills/visual-explainer

# Optional, only if your Codex build supports prompt templates:
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/

rm -rf /tmp/visual-explainer

Вызовите команду $visual-explainer или попросите Codex использовать навык visual-explainer. Если установлены и поддерживаются подсказки, используйте /prompts:diff-review, /prompts:plan-review и т.д.

OpenCode/открытый код:

git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer

mkdir -p ~/.config/opencode/skill ~/.config/opencode/command
cp -R /tmp/visual-explainer/plugins/visual-explainer ~/.config/opencode/skill/visual-explainer

# Optional command templates:
cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.config/opencode/command/

rm -rf /tmp/visual-explainer

Активируйте его, попросив OpenCode использовать навык visual-explainer. Поведение шаблона команды зависит от установленного OpenCode/сборки opencode.

Cursor:

Добавьте configs/cursor/visual-explainer.mdc в свои правила управления курсором или скопируйте его содержимое в пользовательский интерфейс project rules. Это руководство, основанное на правилах, которое указывает курсору на канонический навык; оно не требует поддержки встроенных навыков агента.

OpenClaw:

Используйте configs/openclaw/AGENTS.md в качестве упрощенного руководства по проекту и скопируйте или ссылайтесь на plugins/visual-explainer/ в качестве канонического источника навыков. Собственный адаптер плагина OpenClaw в комплект не входит.

Commands

Команда	Что она делает
`/сгенерировать веб-диаграмму`	Сгенерировать HTML-диаграмму для любой темы
`/сгенерировать визуальный план`	Сгенерировать визуальный план реализации функции или расширения
`/сгенерировать слайды`	Сгенерировать набор слайдов журнального качества
`/обзор различий`	Визуальный обзор различий со сравнением архитектуры и кода
`/обзор плана`	Сравнение плана с кодовой базой с оценкой рисков
`/краткое описание проекта`	Моментальный снимок ментальной модели для возврата к контексту проекта
`/проверка фактов`	Проверка соответствия документа фактическому коду
`/share-page`	Разверните HTML-страницу в Vercel и получите URL-адрес в реальном времени

Агент также автоматически запускается, когда он собирается выгрузить сложную таблицу в терминал (более 4 строк или более 3 столбцов) — вместо этого он отображает HTML.

Режим слайд-шоу

Любая команда, которая создает страницу с возможностью прокрутки, поддерживает --slides для создания набора слайдов:

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

visual-explainer - agent skill, превращающий вывод терминала в красивые HTML

Файлы репозитория

Инструкция по применению

Установка

Commands

Режим слайд-шоу

Похожие Skills

Refactoring UI — Аудит интерфейса

Frontend Design Excellence