gedsys/react-flow-usage
Comprehensive React Flow (@xyflow/react) patterns and best practices for building node-based UIs, workflow editors, and interactive diagrams. Use when working with React Flow for (1) building flow editors or node-based interfaces, (2) creating custom nodes and edges, (3) implementing drag-and-drop workflows, (4) optimizing performance for large graphs, (5) managing flow state and interactions, (6) implementing auto-layout or positioning, or (7) TypeScript integration with React Flow.
95
95%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
_sections.mdrules/
Section Metadata
This file defines the structure and organization of React Flow usage rules.
1. Setup & Configuration
Prefix: setup-
Impact: CRITICAL
Description: Essential patterns for initializing and configuring React Flow properly.
2. Node Patterns
Prefix: node-
Impact: HIGH
Description: Best practices for creating, customizing, and managing nodes.
3. Edge Patterns
Prefix: edge-
Impact: HIGH
Description: Patterns for edge creation, customization, and connection handling.
4. Hooks Usage
Prefix: hook-
Impact: MEDIUM
Description: Proper usage of React Flow hooks for state management and interactions.
5. Performance Optimization
Prefix: perf-
Impact: CRITICAL
Description: Patterns to maintain performance with large graphs and frequent updates.
6. Layout & Positioning
Prefix: layout-
Impact: MEDIUM
Description: Auto-layout, positioning, and viewport management patterns.
7. Interaction Patterns
Prefix: interaction-
Impact: MEDIUM
Description: User interaction handling like drag-drop, selection, and context menus.
8. State Management
Prefix: state-
Impact: HIGH
Description: Patterns for managing flow state, save/restore, and undo/redo.
9. TypeScript Integration
Prefix: typescript-
Impact: MEDIUM
Description: TypeScript patterns for type-safe React Flow applications.