React Flow Usage Guide

Comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+).

When to Use This Skill

Apply these guidelines when:

• Building workflow editors, flow diagrams, or node-based interfaces
• Creating custom node or edge components
• Implementing drag-and-drop functionality for visual programming
• Optimizing performance for graphs with 100+ nodes
• Managing flow state, save/restore, or undo/redo
• Implementing auto-layout with dagre, elkjs, or custom algorithms
• Integrating React Flow with TypeScript

Rule Categories by Priority