react-flow-skill
A Claude Code skill for React Flow 12: nodes and edges, layout, state, Playwright tests and migration from reactflow.
- 56 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill consists of instructions and reference material and runs nothing itself.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/react-flow-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of instructions and reference material and runs nothing itself.
This is third-party code. Review the repository files before installing.
What it does
The skill guides Claude Code while building interactive graph interfaces with React Flow (`@xyflow/react` version 12 and newer). The material is organized into 16 reference topics: basics, custom nodes and edges, interactivity, state management, TypeScript, layout through dagre, elkjs and d3, components and hooks, performance, styling, troubleshooting. Separate topics cover Playwright tests, patterns for undo and redo, copy and save of a graph, accessibility, server rendering and hydration, plus common recipes such as a context menu and a drag-and-drop sidebar. The bundle includes an agent behavior contract of 12 rules: imports, container sizing, `nodeTypes` stability, Handle visibility, immutable state.
Who it is for. Frontend developers building diagram, workflow and graph editors on React Flow together with Claude Code.
Good fit when
- The canvas is blank or edges do not show, and a quick check of common causes is needed.
- An old project moves from the `reactflow` or `react-flow-renderer` package to `@xyflow/react` 12.
- A graph is laid out automatically with dagre or elkjs and nodes are nested inside each other.
- Playwright tests are written for a graph editor covering nodes, edges and connections.
Not a fit when
- The project stays below version 12 and has no plan to upgrade.
- Charts and diagrams come from another library such as D3 or Mermaid.
- Hints on general React architecture are needed with no link to graphs.
Example request
Set up React Flow, build custom nodes with two Handles and automatic layout through dagre, then cover the graph with Playwright tests.Limitations
The skill was verified against `@xyflow/react` 12.12.0 as of 28 September 2026. Newer versions have API notes, so check the version installed in your project. It targets Claude Code, and the README names no other agents. Verifying the repository takes Node.js 22.12 or newer and npm: Markdown examples are type-checked and browser regressions run in Playwright. Live-agent evaluations run separately, and CI calls no AI service. The skill does not replace the React Flow documentation and treats it as a reference.
How to disable. Remove the skill with `npx skills remove react-flow-skill` or delete its folder from the Claude Code skills directory by hand.
FAQ
How do I install the skill?
Run `npx skills add framara/react-flow-skill`. Add the `-g` flag to install for all projects.
When does Claude Code use the skill?
Automatically when you work with React Flow code: creating nodes, debugging a blank canvas, wiring Zustand, layout or tests.
Which package versions are supported?
The skill targets `@xyflow/react` 12 and newer. A separate topic covers migration from the old `reactflow`.
What is in the agent contract?
Twelve rules on common mistakes: imports, container sizing, stable `nodeTypes`, visible Handles and immutable state.
How is the material quality verified?
Documentation checks, type-checking of 15 examples and replay of saved agent results in CI. Fresh agent evaluations run separately.
Discussion
No questions or reviews yet.
Related
SkillsReact Joyride skill for agents
React Joyride
A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages
A Claude Code plugin and skill marketplace for 3D, animation and modern web: Three.js, GSAP, React Three Fiber, Babylon.js
Hand-built skills for Angular, React, Next.js, TypeScript and Django plus six community ones for Java, Elixir and Electron
A skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
React Three Fiber Skills
r3f-skills
Eleven independent skills for React Three Fiber 9: scene, lighting, materials, Rapier physics, shaders and post-processing
julianromli/ai-skills
ai-skills
A collection of 31 skills for Claude Code and other agents: interfaces, React, Postgres, code review, SEO and browser automation
README in short
The reference is split into 16 topics that the agent loads as needed. GitHub Actions checks type-check 15 examples and replay saved agent runs.