Skip to content

README.md

Latest commit

 

History

History
54 lines (40 loc) · 2.47 KB

README.md

File metadata and controls

54 lines (40 loc) · 2.47 KB

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