前端开发

react-flow

framara/react-flow-skill

Expert guidance for React Flow (@xyflow/react): building interactive node-based graphs, custom nodes and edges, handles, state management, layouting, TypeScript patterns, performance optimization, accessibility, SSR, and theming. Use when writing React Flow code, creating custom nodes or edges, debugging flow issues, optimizing graph performance, integrating with Zustand, or building canvas-based UIs with React Flow.

  • 830 次安装
  • 55 星标
  • 收录于

安装命令

npx skills add https://github.com/framara/react-flow-skill --skill react-flow

SKILL.md

React Flow

Overview

Use this skill to build, customize, debug, and optimize interactive node-based UIs with React Flow (@xyflow/react v12+). Covers everything from basic setup to advanced patterns like computed flows, sub-flows, and external layout integration.

Version and source policy

Guidance reviewed against @xyflow/react 12.12.0 on 2026-09-28. Check the target project's installed version and lockfile before applying an API; “v12+” does not mean every minor release has every feature. Preserve the project's state and styling choices unless the task requires changing them.

Use the official documentation index to find a specific guide or API page. For version-sensitive behavior, check release notes and the installed package's declarations/source. Read only the references relevant to the task. Examples with omitted imports or ... are integration sketches, not standalone applications.

Agent behavior contract (follow these rules)