Sandbox
Sign in
@framara/react-flow-skill
Skills#Claude Code#Coding#Testing#Frontend

Claude Code skill for React Flow node UIs

This skill gives Claude Code a set of React Flow patterns, rules, and reference notes for building and debugging node-based interfaces. It covers setup, custom nodes and edges, state management, layout, performance, testing, and migration to `@xyflow/react` v12.

48 stars•7 forks•Updated 2mo ago
Who it's for

Builders who use Claude Code to build React Flow apps and node graphs.

What it delivers

You can build, debug, and test React Flow UIs with fewer setup mistakes and more consistent patterns.

What it does

React Flow migration guide

Covers moving from `reactflow` and `react-flow-renderer` to `@xyflow/react` v12.

Custom node and edge guidance

Explains custom node components, handles, path utilities, labels, and markers.

Interactivity patterns

Covers event handlers, connection validation, selection, keyboard actions, and callbacks.

State management advice

Shows controlled and uncontrolled flows, Zustand integration, and update patterns.

Layout and performance notes

Includes external layout libraries, memoization, render optimization, and styling.

E2E testing patterns

Gives Playwright setup and selector patterns for nodes, edges, viewports, and connections.

Agent behavior contract

Adds 12 rules for imports, container sizing, stable `nodeTypes`, handle visibility, and immutable state.

How to get it

  1. 1Run
    npx skills add framara/react-flow-skill
  2. 2To install globally (all projects)
    npx skills add framara/react-flow-skill -g

README

react-flow-skill

A Claude Code skill for building interactive node-based UIs with React Flow (@xyflow/react v12+).

What's included

The skill provides expert guidance across 14 reference topics:

  • Migration - Upgrading from reactflow/react-flow-renderer to @xyflow/react v12
  • Fundamentals - Installation, setup, first flow, node/edge objects
  • Custom Nodes - Custom node components, Handle, multiple handles, drag handles
  • Custom Edges - Custom edge components, path utilities, edge labels, markers
  • Interactivity - Event handlers, callbacks, connection validation, selection, keyboard
  • State Management - Controlled vs uncontrolled, Zustand integration, state update patterns
  • TypeScript - Node/Edge types, generics, union types, type guards
  • Layouting - External layout libraries (dagre, elkjs, d3), sub-flows, parent-child
  • Components & Hooks - Background, Controls, MiniMap, Panel, NodeToolbar, NodeResizer, hooks
  • Performance & Styling - Memoization, render optimization, theming, CSS variables, Tailwind
  • Troubleshooting - Common errors, debugging, edge display issues, Zustand warnings
  • E2E Testing - Playwright setup, React Flow selectors, node/edge/viewport/connection test patterns
  • Advanced Patterns - Undo/redo, copy/paste, computed flows, dynamic handles, save/restore, collaboration
  • Common Recipes - Context menu node creation, drag-and-drop sidebar, detail panels, export as image

It also includes a 12-rule agent behavior contract covering the most critical React Flow patterns (imports, container sizing, nodeTypes stability, handle visibility, state immutability, and more) so Claude follows best practices automatically.

Installation

npx skills add framara/react-flow-skill

To install globally (all projects):

npx skills add framara/react-flow-skill -g

Usage

Once installed, Claude Code will automatically use this skill when you work on React Flow code. Ask it to:

  • Set up a new React Flow project
  • Create custom nodes and edges
  • Debug blank canvas or missing edge issues
  • Integrate with Zustand for state management
  • Add automatic layouting with dagre or elkjs
  • Optimize performance for large graphs
  • Write Playwright E2E tests for React Flow applications
  • Migrate from legacy reactflow package to @xyflow/react v12
  • Implement undo/redo, copy/paste, or computed data flows

License

MIT

Files in the repo

Repository payload•5 top-level entries
  • references
  • CLAUDE.md
  • LICENSE
  • README.md
  • SKILL.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

obra/
superpowers
obra/superpowersSkills

An agentic skills framework & software development methodology that works.

285k
1 add
Graphify-Labs/graphifySkills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer
Vincentwei1021/anything2explainerSkills

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666
career-ops-hq/career-opsSkills

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k