Reactflow Fundamentals

This covers the essentials for building node-based editors with React Flow, from basic setup through event handling. You get clear examples of nodes, edges, handles, and the built-in plugin components like Background, Controls, and MiniMap. The code samples are practical and show real configuration options, which matters because React Flow has a lot of knobs to turn. It's focused on fundamentals rather than advanced customization, so expect setup patterns and component APIs but not complex state management or custom node implementations. Good for getting a flow diagram running quickly or understanding how the pieces fit together before you start building something elaborate.

skills.sh installs: 138
GitHub stars: 200
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thebushidocollective/han --skill reactflow-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

React Flow Fundamentals

Build customizable node-based editors and interactive diagrams with React Flow. This skill covers core concepts, setup, and common patterns for creating flow-based interfaces.

Installation

# npm
npm install @xyflow/react

# pnpm
pnpm add @xyflow/react

# yarn
yarn add @xyflow/react

Basic Setup

import { useCallback } from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  addEdge,
  Background,
  Controls,
  MiniMap,
  type Node,
  type Edge,
  type OnConnect,
} from '@xyflow/react';

import '@xyflow/react/dist/style.css';

const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Start' },
    position: { x: 250, y: 0 },
  },
  {
    id: '2',
    data: { label: 'Process' },
    position: { x: 250, y: 100 },
  },
  {
    id: '3',
    type: 'output',
    data: { label: 'End' },
    position: { x: 250, y: 200 },
  },
];

const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3' },
];

SKILL.md on GitHub