existential-birds avatar

React Flow Code Review

This catches the usual React Flow footguns: nodeTypes defined inside components that cause every node to remount, missing memo wrappers that kill performance, and useReactFlow called outside the provider boundary. It walks through five review gates in sequence, from locating flow code to closing out checklists on performance and common mistakes. The real value is in the concrete antipatterns with file:line citations, things like inline callbacks breaking memoization and mutating node state directly. If you're code reviewing anything that uses @xyflow/react, this gives you a structured checklist so you're not just eyeballing for problems.

skills.sh installs
324
GitHub stars
87
last updated
Aug 21, 2026

Install

$ npx -y skills add existential-birds/beagle --skill react-flow-code-review --agent claude-code

Installs into .claude/skills of the current project.

Files

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)

  1. Locate flow code — Search the review scope for ReactFlow, ReactFlowProvider, useReactFlow, @xyflow/react, nodeTypes, and edgeTypes. Pass: a short list of file paths (or explicit “none in scope” after searching).

  2. Provider boundary — For each useReactFlow() (and other hooks that require the provider), trace the component tree to an enclosing ReactFlowProvider, or record a concrete mismatch with file:line.

  3. Stable types and memo surfaces — For each custom node or edge component, note whether it uses memo and typed props (NodeProps<...>, etc.). For each nodeTypes / edgeTypes value passed into <ReactFlow>, confirm a stable reference (module scope, or useMemo with deps you can point to) or flag unstable recreation with file:line.

  4. 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.

Sponsors

Details

Repository
github.com/existential-birds/beagle
Categories
Frontend Development, Git & Pull Requests, Code Review & Quality, Debugging
First seen
Jun 3, 2026

More from existential-birds/beagle

All 40
1gentleman-programming avatarangular-architecturegentleman-programming/gentleman-skillsAngular architecture: Scope Rule, project structure, file naming, style guide. Trigger: When structuring Angular projects or deciding where to place components.322skills.sh installs
2vudovn avatarfrontend-designvudovn/antigravity-kitfrontend design320skills.sh installs
3hairyf avatarreact-native-expohairyf/skillsBuild and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use when configuring Expo projects, adding native m316skills.sh installs
4alfredoperez avatarangular-best-practices-rule-creatoralfredoperez/angular-best-practicesangular best practices rule creator312skills.sh installs
5secondsky avatarnuxt-studiosecondsky/claude-skillsThis skill should be used when the user asks to "set up Nuxt Studio", "configure Studio OAuth", "deploy Studio to Cloudflare", "add visual editor to Nuxt", "con308skills.sh installs
6pproenca avatarios-ui-refactorpproenca/dot-skillsPrincipal-level SwiftUI UI review and refactoring patterns for iOS 26 / Swift 6.2 clinic-architecture apps, grounded in Rams, Segall, and Edson principles. Use 291skills.sh installs