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

**Дата:** 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 секций** на простом русском:

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

---

## Функции 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) не визуализируется.
