skills.rest
framara
framaraCOMMUNITY
Explore all skills by this author →
Website𝕏@framaraGitHub

react-flow

Guide building and debugging React Flow node-based UIs with @xyflow/react.

43|7|Updated Feb 19, 2026
Search Tags:#layout#react#zustand#state-management#node#edge#react-flow
One-click install
npx skills add https://github.com/framara/react-flow-skill --skill react-flow-framara
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-flow
Source: https://github.com/framara/react-flow-skill/tree/main
Command: npx skills add https://github.com/framara/react-flow-skill --skill react-flow-framara

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance to build, debug, and optimize interactive React Flow node-based UIs using @xyflow/react v12+.

Core Features & Use Cases

  • Guidance on installing, configuring, and extending React Flow for custom nodes and edges, layouts, and tests.
  • Best practices for state management (e.g., Zustand), performance optimization, and theming.
  • Use cases include migrating from legacy react-flow packages, building canvas-based editors, and implementing advanced patterns like undo/redo, dynamic handles, and data-driven flows.

Quick Start

Set up a new React Flow editor using this skill to scaffold a node-based UI and guide you through setup, customization, and debugging.

Frequently Asked Questions about react-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom nodes and edges in a React Flow application?▼

Building custom React Flow nodes and edges involves configuring components via the @xyflow/react v12+ package, ensuring immutable state updates for robust interactive node-based UIs.

What is the best way to manage state in a React Flow canvas editor?▼

The best way to manage state in a React Flow canvas editor is using Zustand alongside @xyflow/react, which enforces immutable updates and provides optimized performance for complex node-based UIs.

How do I migrate from legacy react-flow packages to @xyflow/react?▼

Migrating from legacy react-flow packages to @xyflow/react involves updating imports to the v12+ API, adjusting state management patterns to enforce immutability, and adapting custom nodes and edges to the new structure.

Can I integrate external layout libraries with React Flow for automated positioning?▼

Yes, you can integrate external layout libraries with React Flow to automate node positioning, using state management tools like Zustand to handle the computed coordinates and enforce immutable state updates.

How do you implement undo and redo functionality in React Flow node-based UIs?▼

Implementing undo and redo in React Flow node-based UIs requires tracking state history through a management library like Zustand, applying immutable state updates to safely revert or reapply node and edge configurations.

Why does my React Flow custom node state not update correctly?▼

React Flow custom node state fails to update correctly when mutable state modifications are applied; you must enforce immutable state updates and properly configure your Zustand store to trigger React re-renders.

Related Skills

Explore More Software Engineering Skills→
adbertramadbertram

zustand-5

Implement Zustand v5 patterns for typed React state management.

Community
Intermediate
gajjalaashok75-UIgajjalaashok75-UI
2

react-flow-node-ts

Create React Flow node components with TypeScript interfaces and store integration.

Community
Intermediate
javierhbrjavierhbr

react-flow-advanced

Implement advanced React Flow diagrams with sub-flows, custom connections, and undo/redo.

Community
Advanced
javierhbrjavierhbr

react-flow-implementation

Implement node-based React interfaces with @xyflow/react for flowcharts and diagrams.

Community
Intermediate