Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket. Use when implementing workflow visualization dashboards, creating custom agent node components, integrating ELK layout algorithms, or wiring execution state into React components. Activate on "ReactFlow", "workflow visualization", "DAG visualization", "ELKjs", "custom nodes", "node-based editor", "graph visualization". NOT for writing Mermaid diagrams (use mermaid-graph-writer), general React development, or static diagram rendering.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket. Use when implementing workflow visualization dashboards, creating custom agent node components, integrating ELK layout algorithms, or wiring execution state into React components. Activate on "ReactFlow", "workflow visualization", "DAG visualization", "ELKjs", "custom nodes", "node-based editor", "graph visualization". NOT for writing Mermaid diagrams (use mermaid-graph-writer), general React development, or static diagram rendering.
allowed-tools
Read,Write,Edit,Bash,Grep,Glob
metadata
{"tags":["reactflow","workflow-visualization","dag-visualization"],"pairs-with":[{"skill":"websocket-streaming","reason":"Live DAG state updates flow through WebSocket connections to ReactFlow visualizations"},{"skill":"human-gate-designer","reason":"Human approval gates are rendered as interactive ReactFlow custom nodes"},{"skill":"task-decomposer","reason":"Decomposed task DAGs are visualized as ReactFlow node graphs with ELKjs layout"}]}
ReactFlow Expert
Builds DAG visualizations using ReactFlow v12 with custom agent nodes, ELKjs auto-layout, Zustand state management, and live execution state updates.
When to Use
✅ Use for:
Building workflow/DAG visualization dashboards
Creating custom ReactFlow node components for agent state
Integrating ELKjs auto-layout for automatic graph positioning
Wiring WebSocket execution events into ReactFlow state
Implementing zoom, pan, selection, and node interaction
nodeTypes defined inside component → infinite re-render
Define OUTSIDE component or wrap in useMemo
State update doesn't trigger re-render
Must create NEW node object: { ...node, data: { ...node.data, ...update } }
xPos/yPos in custom node → undefined
Use positionAbsoluteX/positionAbsoluteY (v12 rename)
nodeInternals → undefined
Use nodeLookup (v12 rename)
ELK layout ignores node size
Pass node.measured?.width and height explicitly
fitView fires before DOM paint
Wrap in requestAnimationFrame(() => fitView())
Interactive elements drag the node
Add className="nodrag" to inputs, buttons, selects
Anti-Patterns
Canvas Rendering for Debugging
Wrong: Using canvas-based libraries (GoJS) where you can't inspect nodes in dev tools.
Right: ReactFlow renders SVG + HTML. Every node is inspectable in React DevTools and the DOM.
Re-running Layout on Every State Update
Wrong: Calling ELK layout every time a node's status changes (expensive, causes visual jitter).
Right: Only re-layout when topology changes (add/remove node/edge). Status color changes are just data updates — no layout needed.
Monolithic Node Component
Wrong: One giant node component handling all node types.
Right: Register separate node types: agentNode, humanGateNode, pluripotentNode. Each is a focused React component.
