用途
React Flow Implementation 技能用于帮助开发者正确实现基于节点的 React 界面，底层使用 @xyflow/react 库。它适用于构建流程图、图表、可视化编辑器或基于节点的应用程序。
主要能力
该技能提供了以下内容：
- 快速入门：包含导入 ReactFlow、useNodesState、useEdgesState、addEdge 等核心 API 的示例代码，以及初始节点和边的定义方式。
- 实现检查清单（Implementation gates）：按顺序检查样式导入、useReactFlow 边界、稳定的 nodeTypes/edgeTypes、Handle 与边的匹配等关键点，确保实现正确。
- 核心模式（Core Patterns）：涵盖 TypeScript 类型定义、自定义节点、多 Handle 处理、自定义边、状态管理（受控模式与 useReactFlow）、更新节点数据、视口与 fitView 控制、连接验证等。
- 常用属性参考：列出 ReactFlow 组件的核心数据、自定义类型、连接、视口、交互等属性。
- 交互 CSS 类：说明 nodrag、nowheel、nopan、nokey 等类的作用。
- 附加组件：提及 MiniMap、Controls、Background、NodeToolbar、NodeResizer 等组件的使用模式（详见 ADDITIONAL_COMPONENTS.md）。
使用方式
开发者可以通过提供的代码示例和模式，在 React 项目中集成 @xyflow/react，构建节点式 UI。技能强调将 nodeTypes 和 edgeTypes 定义为模块级常量或使用 useMemo 保持稳定，避免每次渲染创建新对象。使用 useReactFlow 时，必须确保调用者是 ReactFlowProvider 的后代。样式文件 @xyflow/react/dist/style.css 需要被导入，以确保节点和边可见且命中目标与视觉匹配。
适用场景
- 构建流程图、图表、可视化编辑器
- 开发基于节点的应用程序
- 需要自定义节点和边的复杂交互界面
- 需要程序化控制视口、连接验证等功能的场景
限制
该技能主要关注 @xyflow/react 库的实现细节，不涉及其他流程图库。部分高级组件（如 MiniMap、Controls 等）的详细模式需参考 ADDITIONAL_COMPONENTS.md。具体版本兼容性、性能优化建议等未在资料中提供。