Дизайн: Интерактивная граф-схема системы автоматизации Лидерры

Дата: 2026-05-13
Статус: Approved
Файл результата: docs/automation-graph.html

Цель

Создать единый HTML-файл с интерактивным графом, который наглядно показывает все компоненты системы автоматизации Claude Code для проекта Лидерра: плагины, скилы, хуки, правила, агенты, MCP-серверы, lefthook jobs, memory-файлы — и связи между ними. Целевая аудитория — нетехнический владелец проекта.

Технология

vis.js Network 9.x — загружается через CDN (https://unpkg.com/vis-network/standalone/umd/vis-network.min.js)
Один самодостаточный .html файл (без Node.js, без сборщика)
Работает при открытии файла прямо в браузере (file://)

Визуальный стиль

Тема: Solarized Dark
Фон холста: #1e1e2e
Фон страницы: #0d0d1a
Основной текст: #fdf6e3
Вторичный текст: #839496

Узлы — 8 категорий (~72 штуки)

Категория	Цвет узла	Узлы
Правила	`#268bd2` (синий)	Pravila v1.13, CLAUDE.md v1.92, PSR_v1 v2.1, Tooling v1.17
Плагины	`#859900` (зелёный)	Superpowers, Frontend Design, UI UX Pro Max, claude-md-management, hookify
Скилы Superpowers	`#6c71c4` (фиолетовый)	brainstorming, TDD, systematic-debugging, writing-plans, executing-plans, verification-before-completion, parallel-work, worktree, finishing-pr, subagent-driven-development, writing-skills, spec-review, code-review, elements-of-style
Скилы проекта	`#d33682` (розовый)	rls-check, q-item-add
Хуки (.claude)	`#2aa198` (бирюзовый)	PreToolUse:CLAUDE.md-warn, PostToolUse:markdownlint-fix, PostToolUse:schema-changelog-reminder, SessionStart:context-inject, UserPromptSubmit:economy-mode-parser
Агенты	`#b58900` (жёлтый)	pest-parallel-debugger, rls-reviewer, statusline-setup, claude-code-guide, Explore, general-purpose, Plan, hookify:conversation-analyzer, plugin-dev:agent-creator, plugin-dev:plugin-validator, plugin-dev:skill-reviewer
MCP-серверы	`#cb4b16` (оранжевый)	playwright, github, laravel-boost, semgrep, sentry, redis
Lefthook jobs	`#dc322f` (красный тёмный)	gitleaks, markdownlint, cspell, stylelint, pint, larastan, squawk, eslint-vue, gitleaks-full-history, lychee-links
Memory files	`#586e75` (серый)	user_profile, feedback_communication, feedback_environment, feedback_superpowers, feedback_plugin_paired_stack, project_state, project_phase1, reference_archive, reference_github, reference_handoff, + 5 других

Размер узла отражает «важность» (правила — крупнее, memory — мельче).

Рёбра

Обычные рёбра (серые `#586e75`)

Направленные стрелки с подписями на русском. Примеры подписей:

«инвокирует при задаче»
«вызывает при коммите»
«читает для контекста»
«подчиняется всегда»
«запускает при git push»
«блокирует при нарушении»

Конфликтные рёбра (красные `#ff5f57`, пунктир)

6 конфликтов:

#	Узел А	Узел Б	Суть конфликта
1	PSR_v1	CLAUDE.md	T2.2: CLAUDE.md §5п.10 требует правок только через claude-md-management. PSR_v1 не дублирует это ограничение явно — риск прямых Edit без skill'а
2	UI UX Pro Max	Frontend Design	PSR_v1 R14.5: нельзя использовать параллельно, но оба активны в settings.json одновременно
3	21st Magic MCP	Frontend Design	PSR_v1 R14.5: то же — нельзя параллельно, оба потенциально доступны
4	rls-check (skill)	rls-reviewer (agent)	Оба покрывают одну область (RLS compliance). Нет чёткого разграничения: skill — для ручной проверки одной таблицы, agent — для review PR/diff. При вызове agent'ом Claude может выбрать любой
5	hookify	PreToolUse:CLAUDE.md-warn	hookify создаёт новые PreToolUse хуки динамически — может перезаписать или затенить существующий CLAUDE.md-warn hook
6	economy-mode (UserPromptSubmit)	Superpowers §12 hard rule	Economy hook может выставить Economy=100% и «экономить» на вызове skill'а, что технически нарушает Pravila §12 hard rule — §12 неотменяем

Панель легенды (правая сторона)

Появляется при клике на узел. Содержит 5 секций на простом русском:

Что это делает — одно предложение
Кому подчиняется — список с условием («подчиняется Pravila — всегда»)
Кто подчиняется ему — список с условием
С кем работает одновременно — список + случай
Конфликты — если есть, красным: что именно не так и какое правило нарушается

Функции UI

Zoom: колёсико мыши
Pan: перетаскивание пустого пространства
Drag узла: перетаскивание конкретного узла мышью
Клик на узел: открывает панель легенды справа
Поиск: строка вверху — фильтр по имени узла (подсвечивает найденный)
Кнопка «Зафиксировать»: останавливает физику, узлы замирают на месте
Кнопка «Расшевелить»: запускает физику снова
Кнопка «Сбросить вид»: возвращает камеру в центр
Легенда категорий: цветные кружки внизу с названиями категорий

Структура файла

docs/automation-graph.html
├── <head> — стили Solarized, vis.js CDN
├── <body>
│   ├── #toolbar — строка поиска + кнопки
│   ├── #graph-container — холст vis.js (80% ширины)
│   ├── #legend-panel — панель легенды (20% ширины, скрыта до клика)
│   └── #category-legend — цветные метки категорий внизу
└── <script>
    ├── nodes[] — массив всех ~60 узлов с метаданными
    ├── edges[] — массив всех рёбер с подписями и цветами
    ├── nodeDetails{} — данные для панели легенды по каждому узлу
    └── vis.Network() — инициализация + обработчики событий

Ограничения

Файл требует интернет для загрузки vis.js CDN. Для offline: скачать vis-network.min.js и заменить CDN-ссылку на локальный путь.
Memory files показаны как упрощённые узлы — без детализации содержимого каждого файла.
Lefthook jobs показаны как узлы, но их внутренняя последовательность (parallel: false) не визуализируется.

8.3 KiB Raw Blame History Unescape Escape