A skill covering the complete API documentation of the React Flow library. Depending on the user's task, read the appropriate README.md and follow it to the individual files.
Directory structure
skills/react-flow/
SKILL.md
references/
learn/
README.md
accessibility.md
adding-interactivity.md
built-in-components.md
building-a-flow.md
computing-flows.md
custom-edges.md
custom-nodes.md
devtools-and-debugging.md
edge-labels.md
getting-started-with-react-flow-components.md
handles.md
hooks-providers.md
layouting.md
mind-map-app-with-react-flow.md
multiplayer.md
performance.md
react-flow-and-the-web-audio-api.md
slide-shows-with-react-flow.md
ssr-ssg-configuration.md
state-management.md
sub-flows.md
terms-and-definitions.md
testing.md
the-viewport.md
theming.md
typescript.md
uncontrolled-flow.md
utility-classes.md
whiteboard.md
troubleshooting/
README.md
common-errors.md
migrate-to-v10.md
migrate-to-v11.md
migrate-to-v12.md
remove-attribution.md
components/
README.md
ReactFlow.md
ReactFlowProvider.md
Background.md
Controls.md
ControlButton.md
MiniMap.md
Handle.md
Panel.md
BaseEdge.md
EdgeLabelRenderer.md
EdgeText.md
EdgeToolbar.md
NodeResizer.md
NodeResizeControl.md
NodeToolbar.md
ViewportPortal.md
hooks/
README.md
useReactFlow.md
useNodes.md
useEdges.md
useNodesState.md
useEdgesState.md
useNodesData.md
useNodesInitialized.md
useNodeId.md
useNodeConnections.md
useHandleConnections.md
useInternalNode.md
useConnection.md
useOnSelectionChange.md
useOnViewportChange.md
useViewport.md
useStore.md
useStoreApi.md
useUpdateNodeInternals.md
useKeyPress.md
types/
README.md
Node.md
NodeChange.md
NodeConnection.md
NodeHandle.md
NodeMouseHandler.md
NodeOrigin.md
NodeProps.md
NodeTypes.md
InternalNode.md
MiniMapNodeProps.md
Edge.md
EdgeChange.md
EdgeMarker.md
EdgeMouseHandler.md
EdgeProps.md
EdgeTypes.md
DefaultEdgeOptions.md
MarkerType.md
OnReconnect.md
Connection.md
ConnectionLineComponent.md
ConnectionLineComponentProps.md
ConnectionLineType.md
ConnectionMode.md
ConnectionState.md
IsValidConnection.md
HandleConnection.md
OnBeforeDelete.md
OnConnect.md
OnConnectEnd.md
OnConnectStart.md
OnDelete.md
OnEdgesChange.md
OnEdgesDelete.md
OnError.md
OnInit.md
OnMove.md
OnNodeDrag.md
OnNodesChange.md
OnNodesDelete.md
OnSelectionChangeFunc.md
Viewport.md
XYPosition.md
Position.md
Rect.md
CoordinateExtent.md
FitViewOptions.md
PanelPosition.md
PanOnScrollMode.md
SnapGrid.md
Align.md
AriaLabelConfig.md
BackgroundVariant.md
ColorMode.md
DeleteElements.md
Handle.md
KeyCode.md
ProOptions.md
ReactFlowInstance.md
ReactFlowJsonObject.md
ResizeParams.md
SelectionDragHandler.md
SelectionMode.md
ZIndexMode.md
utils/
README.md
addEdge.md
applyEdgeChanges.md
applyNodeChanges.md
getBezierPath.md
getConnectedEdges.md
getIncomers.md
getNodesBounds.md
getOutgoers.md
getSimpleBezierPath.md
getSmoothStepPath.md
getStraightPath.md
getViewportForBounds.md
isEdge.md
isNode.md
reconnectEdge.md
examples/
README.md
edges.md
grouping.md
interaction.md
layout.md
misc.md
nodes.md
styling.md
whiteboard.md
samples/
README.md
basic-flow.md
interactive-flow.md
custom-nodes.md
custom-edges.md
state-management-zustand.md
auto-layout-dagre.md
sub-flows.md
computing-flows.md
use-react-flow-hook.md
scripts/
README.md
install.md
testing.md
ui-components.md
Exploration procedure
Look up the category from the task, and identify the target page in the category's README.md:
- Find the category corresponding to the task in the mapping table below
- For that category,
references/{category}/README.mdto identify the target page - of the relevant page
.mdand check the details
Task → Category Mapping
| Task | Category | Reference README |
|---|---|---|
| Want to understand the basic concepts and terminology | learn | references/learn/README.md |
| Want to know the procedures for flow construction, interaction, and customization | learn | references/learn/README.md |
| Want to implement custom nodes / edges, layout, and SSR | learn | references/learn/README.md |
| Want to refer to tutorials such as mind maps, slideshows, and Web Audio integration | learn | references/learn/README.md |
| Want to handle errors and perform version migration | troubleshooting | references/troubleshooting/README.md |
| Want to remove the attribution | troubleshooting | references/troubleshooting/README.md |
| Want to look up the props of components such as ReactFlow, Background, Controls, and MiniMap | components | references/components/README.md |
| Want to use UI components such as Handle, NodeResizer, EdgeToolbar, and Panel | components | references/components/README.md |
| Want to use hooks such as useReactFlow, useNodes, useEdges, and useStore | hooks | references/hooks/README.md |
| Want to subscribe to viewport operations, selection changes, and connection states | hooks | references/hooks/README.md |
| Want to look up type definitions such as Node, Edge, Connection, and Viewport | types | references/types/README.md |
| Want to look up event handler types and custom node / edge props types | types | references/types/README.md |
| Want to use utilities such as addEdge, applyNodeChanges, and getBezierPath | utils | references/utils/README.md |
| Want to perform graph traversal and path generation for nodes / edges | utils | references/utils/README.md |
| Want to refer to implementation examples such as drag & drop, grouping, and whiteboards | examples | references/examples/README.md |
| Want to refer to implementation examples of dagre / elkjs layout and custom styling | examples | references/examples/README.md |
| Want to see sample code for typical usage | samples | samples/README.md |
| Want to know about installation, CLI commands, and test environment setup | scripts | scripts/README.md |