react-flow-node-ts

react-flow-node-ts 技能为开发人员提供了一个标准化的架构模板，用于在 React Flow 中构建自定义节点 UI 组件。此技能专为从事可视化工作流程构建器、节点编辑器或交互式画布应用程序的工程师所设计，强调类型安全与状态管理的最佳实践。通过使用此技能，开发人员可以快速启动新节点，并透过 Zustand 与现有的应用程序存储库无缝整合，确保节点缩放、数据更新与连接处理等画布交互行为在整个代码库中遵循一致的实现模式。

• 使用预定义的 TypeScript 接口与组件模式，简化 React Flow 自定义节点的建立过程。

• 透过 Zustand 促进与应用程序状态的深度整合，实现对节点数据与画布配置的集中控制。

• 包含对 React Flow 基本原语的支持，例如用于连接的 Handle 组件与用于交互式编辑的 NodeResizer。

• 提供结构化的目录与文件命名规范，确保随着节点类型数量增加时的维护性。

• 内建类型定义，严格规范节点数据结构，减少复杂工作流程可视化中的运行时错误。

• 输入：需要用户定义节点名称 (PascalCase)、类型标识符 (kebab-case) 与数据接口参数。

• 输出：生成 React 组件与对应的 TypeScript 定义样板代码，可立即注册于 React Flow 的 nodeTypes 对象中。

• 使用建议：在执行前请确保已配置好 Zustand 存储库（如 app-store.ts），因为模板依赖特定的选择器来更新节点状态。

• 实践说明：请依照提供的整合步骤将新节点注册至中心注册表，并将其新增至应用程序的 AddBlockMenu 与 ConnectMenu 中。

• 限制：此技能专为使用 TypeScript 与 Zustand 的 React Flow 实现而设计；它假定项目结构遵循 Microsoft skills 存储库的架构规范。