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.

Agent behavior contract (follow these rules)