Agent skill · design visual · aradotso
agent-flow-visualization
VS Code extension for real-time visualization of Claude Code agent orchestration as interactive node graphs
Why this skill is useful
Provides domain-specific visualization capabilities for Claude Code agent orchestration that the AI wouldn't generate on its own.
What it needs
Requires claude-code-cli, node, vscode installed locally. About 6k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
Agent Flow Skill by ara.so — Daily 2026 Skills collection. Agent Flow is a VS Code extension that provides real-time visualization of Claude Code agent orchestration. It renders agent execution as an interactive node graph, showing tool calls, branching, subagent coordination, and timing — turning Claude Code's black-box execution into a transparent, debuggable flow. Installation Via VS Code Marketplace 1. Open VS Code Extensions (Cmd+Shift+X) 2. Search for Agent Flow by simon-p 3. Click Install Or install directly: marketplace.visualstudio.com/items?itemName=simon-p.agent-flow Requirements VS Code 1.85 or later Claude Code CLI installed and accessible Node.js (for Claude Code) Quick Start Or use the keyboard shortcut: Mac: Cmd+Alt+A Win/Linux: Ctrl+Alt+A Commands Command Description --------- ------------- Agent Flow: Open Agent Flow Open visualizer in current editor column Agent Flow: Open Agent Flow to Side Open in a side editor column Agent Flow: Connect to Running Agent Manually connect to a specific agent session Agent Flow: Configure Claude Code Hooks Set up Claude Code hooks for live event streaming Configuration Settings available in VS Code settings (settings.json): Auto-Open on Agent Start Claude Code Hooks Setup Agent Flow uses Claude Code's hook system for zero-latency event streaming. Hooks are configured automatically on first open, but you can reconfigure manually. Automatic Configuration Run from Command Palette: Manual Hook Configuration If you need to configure hooks manually, Agent Flow starts a local HTTP server that receives events. The hooks forward Claude Code lifecycle events (tool calls, responses, session start/end) to the extension. Claude Code hooks are configured in ~/.claude/settings.json or project-level .claude/settings.json: Agent Flow manages this configuration automatically — prefer using the command palette command. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/agent-flow-visualization