react-flow
构建生产级节点式UI和交互式流程图的React Flow最佳实践指南
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：react-flow。 它的用途是：构建生产级节点式UI和交互式流程图的React Flow最佳实践指南 完整的 Skill 内容见：https://321skill.com/skills/react-flow/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我正在用React Flow开发一个低代码工作流设计器，节点数量可能达到上千个，有什么性能优化建议？’，它会引导你查阅Skill中‘Performance Optimization’类别的具体规则，例如使用`useNodesData` hook高效访问节点数据、对自定义节点组件进行memo化等。或者问：‘如何给节点添加自定义的表单控件并同步状态？’，它会指向‘Node Patterns’和‘State Management’中的相关规则，指导你创建受控的自定义节点组件并与外部状态集成。
介绍
这个Skill旨在解决开发者在构建基于节点的用户界面（如流程图、工作流编辑器、思维导图）时遇到的复杂配置、性能瓶颈和交互逻辑难题。它提供了从基础配置到高级优化的结构化规则，覆盖了自定义节点与边、状态管理、布局算法和TypeScript集成等核心领域。
Skill以规则文件的形式组织，开发者或AI助手可以根据具体需求（如“如何优化大型图的性能？”或“如何实现自定义节点？”）快速定位并应用对应的最佳实践模式，从而避免常见的陷阱并提升开发效率。
它非常适合需要将复杂逻辑或流程可视化的项目，例如低代码平台、自动化流程设计器、系统架构图工具或任何需要交互式图形编辑能力的应用开发。
使用建议：建议先阅读SKILL.md中的快速参考，了解核心规则分类。对于特定问题，可直接查阅rules/目录下对应的规则文件。注意，本Skill侧重于模式和最佳实践，具体的API细节仍需参考官方文档。
核心特点
本Skill并非简单的API文档集合，而是由xyflow团队官方整理的、面向生产环境的模式库，提供了经过验证的最佳实践和性能优化策略，直接指导如何构建健壮、高效的React Flow应用。
注意事项
不适合仅需要简单静态图表展示，而不涉及复杂交互、动态布局或状态管理的场景。
常见问题
如何用React Flow实现一个可拖拽的流程图？
遵循Skill中‘Setup & Configuration’和‘Interaction Patterns’类别的规则，配置ReactFlowProvider、定义初始节点/边，并实现拖拽逻辑。
当节点数量很多时，应用卡顿怎么优化？
应用‘Performance Optimization’类别中的规则，如使用memo化组件、优化store访问、选择合适的边类型（如Bezier或Straight）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-flow/raw/index.md 读取 react-flow 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-flow/raw/index.md（查看排版版本）