React Flow Architecture

This gives you architectural patterns for React Flow before you commit to building a node-based UI. It walks through a four-step decision workflow (name interactions, classify scale, place state, recheck alternatives) that helps you catch mismatches early, like trying to render 10k nodes or forcing collaboration patterns React Flow doesn't handle well. The source material is concrete: it shows three state management approaches with actual code, explains the xyflow package split between vanilla TypeScript core and framework wrappers, and includes a performance table that tells you when to enable viewport culling versus when to bail to WebGL. Most useful if you're past the prototype stage and need to make stack decisions that stick.

Install to Claude Code

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