react-flow-code-review
React Flow Code Review
When reviewing React Flow code, complete the gates below in order. Each step has an objective pass condition before moving on.
Review gates (sequenced)
-
Locate flow code — Search the review scope for
ReactFlow,ReactFlowProvider,useReactFlow,@xyflow/react,nodeTypes, andedgeTypes. Pass: a short list of file paths (or explicit “none in scope” after searching). -
Provider boundary — For each
useReactFlow()(and other hooks that require the provider), trace the component tree to an enclosingReactFlowProvider, or record a concrete mismatch with file:line. -
Stable types and memo surfaces — For each custom node or edge component, note whether it uses
memoand typed props (NodeProps<...>, etc.). For eachnodeTypes/edgeTypesvalue passed into<ReactFlow>, confirm a stable reference (module scope, oruseMemowith deps you can point to) or flag unstable recreation with file:line. -
Report with evidence — For each finding you will deliver, record file path and line number(s) (or a minimal quoted snippet). Pass: no critical or high-severity issue is stated without that citation.
-
Close the checklists — Use Performance Checklist and Common Mistakes; each item is satisfied, not applicable (with reason), or open with evidence. Pass: no item left silently ambiguous.
Critical Anti-Patterns
1. Defining nodeTypes/edgeTypes Inside Components
More from existential-birds/beagle
langgraph-code-review
Reviews LangGraph code for bugs, anti-patterns, and improvements. Use when reviewing code that uses StateGraph, nodes, edges, checkpointing, or other LangGraph features. Catches common mistakes in state management, graph structure, and async patterns.
825react-flow
React Flow (@xyflow/react) for workflow visualization with custom nodes and edges. Use when building graph visualizations, creating custom workflow nodes, implementing edge labels, or controlling viewport. Triggers on ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView.
770tailwind-v4
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
594react-flow-advanced
Advanced React Flow patterns for complex use cases. Use when implementing sub-flows, custom connection lines, programmatic layouts, drag-and-drop, undo/redo, or complex state synchronization.
426python-code-review
Reviews Python code for type safety, async patterns, error handling, and common mistakes. Use when reviewing .py files, checking type hints, async/await usage, or exception handling.
426docling
Docling document parser for PDF, DOCX, PPTX, HTML, images, and 15+ formats. Use when parsing documents, extracting text, converting to Markdown/HTML/JSON, chunking for RAG pipelines, or batch processing files. Triggers on DocumentConverter, convert, convert_all, export_to_markdown, HierarchicalChunker, HybridChunker, ConversionResult.
378