What problem does it solve? Building interactive node-edge graph applications in React often leads to performance bottlenecks, tangled state management, and layout chaos when handling large hierarchical datasets. This Skill provides proven patterns for creating production-grade ReactFlow applications that remain fast and maintainable. ## Core Features & Use Cases - Hierarchical Tree Navigation: Implement expandable/collapsible node trees with incremental rendering that only builds visible nodes and edges. - Performance Optimization: Apply memoization, incremental rendering, debounced Dagre auto-layout, and a graph performance analyzer to keep large graphs responsive. - Advanced State Management: Use reducer patterns with undo/redo history, focus mode, and search-based navigation for complex graph interactions. - Use Case: Imagine building an organizational chart or process flow diagram with thousands of nodes. Use this Skill to implement lazy expansion, automatic Dagre layout, and focus mode so users can navigate the hierarchy without lag. ## Quick Start Ask the AI to create a ReactFlow graph component with expandable hierarchical nodes, Dagre auto-layout, and memoized node rendering.
