visual-explainer

Установка

npx skillfoxx add skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .claude/skills
cp -R "$tmp/plugins/visual-explainer" .claude/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .github/skills
cp -R "$tmp/plugins/visual-explainer" .github/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .devin/skills
cp -R "$tmp/plugins/visual-explainer" .devin/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .cline/skills
cp -R "$tmp/plugins/visual-explainer" .cline/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .roo/skills
cp -R "$tmp/plugins/visual-explainer" .roo/skills/visual-explainer

npx skills add nicobailon/visual-explainer --skill visual-explainer -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nicobailon/visual-explainer.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/visual-explainer/
git -C "$tmp" checkout 7163c3e10660912e0b89e1af465db9f387282b88
mkdir -p .agents/skills
cp -R "$tmp/plugins/visual-explainer" .agents/skills/visual-explainer

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

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл учит агента отдавать визуальные объяснения не текстовой графикой в терминале, а готовой HTML-страницей, которая открывается в браузере. Он собирает самодостаточные документы со встроенными стилями и скриптами: схемы архитектуры, диаграммы Mermaid с зумом и панорамированием, разбор диффов, ревью планов, сравнительные таблицы, итоги по проекту и слайды. Команды вроде diff-review, plan-review, generate-web-diagram, generate-slides и project-recap запускают нужный формат. Перед версткой скилл сначала выбирает палитру, роли шрифтов и схему раскладки, чтобы страница не выглядела шаблонной. Базовое использование не требует сборки и зависит только от браузера, а отдельные утилиты MCP и экспорт в PPTX подключают небольшие пакеты Node.

Для кого. Для разработчиков, технических писателей и команд, которым нужны читаемые визуальные объяснения вместо ASCII в терминале.

Пример запроса к агенту

Нарисуй схему нашего процесса аутентификации и открой ее в браузере

Ограничения

Результат это HTML-файлы, которые открываются в браузере. Опциональные утилиты MCP и экспорт в PPTX требуют пакетов Node, а экспорт в PPTX рассчитан только на простые колоды, источником правды остается HTML. MCP-сервер локальный, работает только через stdio и пишет в выделенный каталог, по умолчанию ~/.agent/diagrams/.

Как отключить. Удалите плагин visual-explainer через /plugin, либо удалите скопированную папку скилла и запись MCP-сервера из конфигурации.

Проверка безопасности

• Пишет HTML-файлы в каталог на вашей машине
• Опциональные утилиты запускают скрипты рендеринга на Node

Коротко о README

README представляет скилл, который превращает сложный вывод в терминале в оформленные HTML-страницы, которые удобно читать. Автор объясняет, что агенты по умолчанию рисуют ASCII, и это плохо работает для схем сложнее трех блоков и для больших таблиц, а скилл дает нормальную типографику, темную и светлую темы и интерактивные диаграммы Mermaid. Описаны способы установки для Claude Code, Pi, Antigravity CLI, Codex, OpenCode, Cursor и других сред, а также локальный MCP-сервер и утилита экспорта в PPTX. Указано, что итоговая страница это самодостаточный HTML со встроенными стилями и скриптами. Лицензия MIT.

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.

Похожие