react-flow-skill
React Flow专家级开发助手，用于构建交互式节点图应用
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：react-flow-skill。 它的用途是：React Flow专家级开发助手，用于构建交互式节点图应用 完整的 Skill 内容见：https://321skill.com/skills/react-flow-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用React Flow v12做一个任务流程图，自定义节点里的输入框一拖动就会移动整个节点，怎么解决？” 它会立刻根据其行为契约，指出需要在交互元素（如input）上添加`nodrag` CSS类，并可能提供示例代码片段。或者问：“我的边（edges）渲染不出来”，它会引导你检查手柄（Handle）的CSS是否被误设为`display: none`，并建议改用`visibility: hidden`。
介绍
这个Skill专门解决开发者在构建基于节点的交互式流程图、工作流编辑器或拓扑图应用时遇到的复杂问题。它专注于React Flow库（@xyflow/react v12+），提供从零搭建到高级优化的全链路指导。
使用方式非常直接：在需要编写React Flow相关代码时，向搭载此Skill的AI助手提问。它会根据一份详细的“行为契约”提供最佳实践代码，并引导你避开常见陷阱，例如确保容器尺寸、正确导入样式、优化性能等。Skill内置了快速诊断模板，能根据你的问题（如空白画布、连线不显示、性能卡顿）迅速定位根源。
它非常适合正在或计划使用React Flow v12+构建复杂节点图界面的前端开发者、全栈工程师和团队。无论你是初学者想快速上手，还是资深开发者需要解决深层次的定制、状态管理或性能优化难题，都能从中获得精准帮助。
与泛泛的前端开发助手相比，这个Skill的核心区别在于其深度垂直性。它并非泛泛而谈React或图表库，而是深度绑定React Flow的最新官方实践，内容由社区专家维护，涵盖了官方推荐模式、迁移指南、高级模式（如子流程、计算流）以及大量实战中总结出的“避坑”细则，信息时效性和准确性远超通用型AI。
核心特点
深度绑定React Flow官方最佳实践（v12+），提供由社区专家维护的、包含大量实战“避坑”细则的精准指导，而非泛泛的前端图表开发建议。
注意事项
不适用于使用旧版（reactflow或react-flow-renderer）或其他图表库（如D3.js、G6）的项目开发。
常见问题
React Flow画布空白怎么办？
检查父容器是否设置了明确的宽度和高度，以及是否正确导入了CSS样式文件。
如何优化React Flow性能，防止卡顿？
确保nodeTypes和edgeTypes定义在组件外部或用useMemo包裹，避免不必要的重渲染。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/react-flow-skill/raw/index.md 读取 react-flow-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/react-flow-skill/raw/index.md（查看排版版本）