React Flow Implementation

Straightforward guide for implementing React Flow (the @xyflow/react library) without stepping on the common landmines. It covers the basics like nodes, edges, and handles, then walks through the four implementation gates that catch most bugs: missing CSS imports, useReactFlow called outside provider boundaries, recreating nodeTypes objects every render, and mismatched handle IDs on edges. The custom node examples show the memo wrapper pattern and the nodrag class for interactive elements, which you'll need the first time a button inside a node starts dragging the whole canvas. Includes TypeScript types, controlled state patterns, and viewport control. Good reference if you're building flowcharts, visual editors, or any node based UI and want to skip the documentation archaeology.

Install to Claude Code

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