React Flow

This gives Claude the ability to scaffold React Flow implementations, from basic node-based graphs to full workflow editors with custom nodes and edges. You'd reach for it when building visual programming interfaces, process diagrams, or any interactive graph UI. The skill covers the essentials well: controlled state management with useNodesState and useEdgesState, custom node components with proper TypeScript typing, edge path utilities like getBezierPath, and viewport controls through useReactFlow. One thing to note is that React Flow has a learning curve around handle positioning and the nodrag className patterns, but this skill front-loads those gotchas so Claude can help you avoid the common mistakes right away.

skills.sh installs: 1.3K
GitHub stars: 87
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

React Flow

React Flow (@xyflow/react) is a library for building node-based graphs, workflow editors, and interactive diagrams. It provides a highly customizable framework for creating visual programming interfaces, process flows, and network visualizations.

Quick Start

Installation

pnpm add @xyflow/react

Basic Setup

import { ReactFlow, Node, Edge, Background, Controls, MiniMap } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes: Node[] = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Input Node' },
    position: { x: 250, y: 5 },
  },
  {
    id: '2',
    data: { label: 'Default Node' },
    position: { x: 100, y: 100 },
  },
  {
    id: '3',
    type: 'output',
    data: { label: 'Output Node' },
    position: { x: 400, y: 100 },
  },
];

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

SKILL.md on GitHub