React Flow 节点构建助手
帮助你为 React Flow 工作流画布创建类型安全、可调整大小并接入 Zustand 的 React 节点组件。
该技能仅提供 React Flow/TypeScript 代码模式和项目内集成步骤，没有执行外部操作、读取凭据或传输数据的指令；MIT 许可和 Microsoft 作者信息可追溯。因未说明依赖安全、数据流、用户确认、回滚或敏感数据处理，扣分。
SKILL.md、两个模板和集成步骤彼此基本一致，且给出节点类型、组件、状态和注册位置；但没有依赖版本、构建验证、异常输入处理或故障反馈，未执行复现，按静态上限保守扣分。
受众和触发场景明确，覆盖自定义 React Flow 节点、可视化工作流编辑器和节点 UI；但未明确 React Flow 版本、项目结构变体、非适用场景、触发边界或中文/大陆网络环境适配，扣分。
文档有 front matter、Quick Start、模板链接、代码模式和集成清单，并声明 MIT、作者和版本；但缺少安装/依赖说明、已知限制、FAQ、变更记录和维护更新路径，扣分。
模板和示例可直接作为实现起点，包含类型、Handle、memo、NodeResizer、Zustand 及注册步骤；但强依赖特定项目路径和未提供的 store/API，且没有该技能关键路径的已验证输出，因此仅评为核心任务基本可完成。
证据主要是 SKILL.md 与模板中的示例；仓库存在通用 CI、评估工作流和测试文件，但提供材料未显示其覆盖该技能，缺少针对该技能的验收样例或第三方复现，故分数较低。
- 示例依赖 @xyflow/react、NodeResizer、Handle、Position、useAppStore 等未声明的依赖和项目 API；使用前需核对实际版本与类型签名。
- 集成步骤假定固定的 src/frontend/src 目录和特定 store/menu/canvas 结构，不一定适用于其他 React Flow 项目。
- 未提供该技能专属测试、验收标准、错误处理或回滚说明；生成代码仍需人工审查并运行项目自身的类型检查和测试。
- 未说明中文文档支持或大陆网络可达性；核心功能本身未显示依赖海外在线服务。
它能做什么 & 适用场景
该技能面向使用 React Flow 构建可视化工作流编辑器和节点式界面的开发者。它提供节点组件与 TypeScript 类型定义的模板，并指导配置输入输出句柄、节点调整大小逻辑和 Zustand 状态集成。集成流程还涵盖类型导出、节点注册、默认值配置以及菜单入口。它适合已有 React Flow、TypeScript 和 Zustand 技术栈的项目，但 SKILL.md 未说明依赖安装、版本要求或专用测试流程。
指导开发者从 assets/ 中复制组件和类型模板，替换节点名称、类型标识符及数据接口占位符；生成包含 memo、NodeResizer、target/source Handle 和 Zustand store 读取的 React 节点组件；定义扩展 Record<string, unknown> 的节点数据接口和 React Flow Node 类型；并将节点接入项目类型、组件索引、应用商店、画布 nodeTypes、AddBlockMenu 与 ConnectMenu。
- 前端开发者为 React Flow 工作流编辑器新增一个可复用的自定义节点。
- 使用 TypeScript 的团队需要为节点数据、节点类型和句柄建立明确类型。
- 构建节点式 UI 的开发者需要把节点更新操作接入 Zustand 应用状态。
- 维护 React Flow 画布的团队需要统一节点组件、默认值和菜单注册流程。
优缺点一览
- 提供可直接复用的组件和类型模板。
- 覆盖句柄、调整大小、选中状态和 Zustand 集成等关键节点模式。
- 明确列出从类型定义到画布和菜单注册的集成步骤。
- MIT 许可，且属于持续维护的 Microsoft Agent Skills 集合。
- SKILL.md 未记录 React Flow、React、TypeScript 或 Zustand 的版本要求。
- 未提供依赖安装命令或完整可运行示例项目。
- SKILL.md 未展示该单项技能的专用测试结果或测试套件。
- 内容聚焦节点模式与集成清单，不覆盖完整工作流编辑器架构。
如何安装
该技能属于 microsoft/skills 集合。运行 npx skills add microsoft/skills，在向导中选择需要的技能；技能会安装到所选 Agent 的目录，例如 GitHub Copilot 使用 .github/skills/。源材料未说明如何只通过命令安装 react-flow-node-ts，也未提供该技能的独立安装包。
如何使用
在已安装该技能的编码 Agent 中提出类似请求：为我的 React Flow 画布创建一个 VideoNode，使用 TypeScript 类型、顶部 target Handle、底部 source Handle、NodeResizer 和 Zustand 状态更新，并完成类型、nodeTypes 和菜单注册。 根据需要从 assets/ 复制 template.tsx 与 types.template.ts，替换占位符并按集成步骤接入项目。