React Flow

This is expert guidance for building interactive node-based UIs with React Flow v12+. It covers the whole spectrum: basic setup, custom nodes and edges, state management with Zustand, TypeScript patterns, layout integration with dagre or elkjs, and advanced patterns like undo/redo and computed flows. The skill enforces the actual React Flow team's recommendations, like always using custom nodes over built-in ones and defining node types outside component bodies to prevent re-render hell. Strong focus on the common gotchas that waste hours: blank canvases from missing container heights, edges that don't connect because handles use display none instead of opacity zero, and Zustand context warnings from duplicate package versions. If you're building flowcharts, diagrams, or any canvas-based tool in React, this cuts through the trial and error.

skills.sh installs: 857
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add framara/react-flow-skill --skill react-flow --agent claude-code

Installs into .claude/skills of the current project.

Files

React Flow

Overview

Use this skill to build, customize, debug, and optimize interactive node-based UIs with React Flow (@xyflow/react v12+). Covers everything from basic setup to advanced patterns like computed flows, sub-flows, and external layout integration.

Version and source policy

Guidance reviewed against @xyflow/react 12.12.0 on 2026-09-28. Check the target project's installed version and lockfile before applying an API; “v12+” does not mean every minor release has every feature. Preserve the project's state and styling choices unless the task requires changing them.

Use the official documentation index to find a specific guide or API page. For version-sensitive behavior, check release notes and the installed package's declarations/source. Read only the references relevant to the task. Examples with omitted imports or ... are integration sketches, not standalone applications.