agent-flow-visualization — скилл для Claude Code: граф работы агентов
Скилл ставит расширение VS Code, которое рисует работу агентов Claude живым графом: вызовы инструментов, ветвления, субагенты, тайминги.
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-codeЧто делает agent-flow-visualization
Расширение Agent Flow показывает оркестрацию агентов Claude как интерактивный граф узлов. Каждый вызов инструмента, его результат, решение о ветвлении и возврат субагента к родителю — отдельный узел на канвасе. Раньше это приходилось вычитывать из логов, теперь видно глазами.
События идут через хуки Claude: расширение поднимает локальный HTTP-сервер, а хуки PreToolUse и PostToolUse шлют туда JSON через curl. Настройка делается автоматически при первом открытии, вручную — командой Agent Flow: Configure Claude Code Hooks. Есть режим JSONL: укажите путь в agentVisualizer.eventLogPath, и расширение будет дочитывать файл событий — удобно для разбора прошлых сессий и для мониторинга в CI. Несколько параллельных сессий раскладываются по вкладкам.
Нужен VS Code 1.85 или новее, установленный Claude CLI и Node.js. Хуки правят ~/.claude/settings.json или проектный .claude/settings.json — если у вас там уже свои хуки на те же события, проверьте, что автоматическая настройка их не перезаписала.
Какие задачи решает
- увидеть, какие инструменты агент дёргал в сессии
- найти место, где агент ушёл не туда и породил лишнего субагента
- разобрать прошлый прогон по сохранённому JSONL-логу
- следить за несколькими сессиями Claude одновременно
- показать коллеге запись работы агента
Примеры запросов агенту
- Открой Agent Flow и подключись к текущей сессии Claude
- Настрой хуки Claude для стриминга событий в визуализатор
- Покажи граф по логу
${workspaceFolder}/logs/agent-session.jsonl
Как установить agent-flow-visualization
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-code2Вручную: положить файлы
~/.claude/skills/agent-flow-visualization/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/agent-flow-visualization/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a codex2Вручную: положить файлы
.agents/skills/agent-flow-visualization/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a cursor2Вручную: положить файлы
.cursor/skills/agent-flow-visualization/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills agent-flow-visualization2Вручную: положить файлы
.github/skills/agent-flow-visualization/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/agent-flow-visualizationВручную: положить файлы
.devin/skills/agent-flow-visualization/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора42
Похожие
Рядом в теме «Настройка агента: память, контекст, субагенты»
Все скиллы по теме «Настройка агента: память, контекст, субагенты» →Вопросы о agent-flow-visualization
Как установить agent-flow-visualization в Claude?
Выполните npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-code. Скилл встанет в ~/.claude/skills/agent-flow-visualization/SKILL.md.
Что делает agent-flow-visualization?
Ставит расширение Agent Flow для VS Code, которое рисует оркестрацию агентов Claude как интерактивный граф: вызовы инструментов, ветвления, субагенты и тайминги.
Что нужно для работы Agent Flow?
VS Code 1.85 или новее, установленный Claude CLI и Node.js. События приходят через хуки Claude, поэтому расширение правит ~/.claude/settings.json или проектный .claude/settings.json.
