SKILL

react-flow-node-ts

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.

原文 · 译文未通过检查

适用对象:React / Next.js。自动收录 · 待核查。

原作者说明节选

从固定版本的 SKILL.md 提取,保留原文语言。以下内容属于作者说明,本站尚未验证安装、兼容或运行结果。

查看英文原文

原文涵盖的主题

  • React Flow Node
  • Quick Start
  • Templates
  • Node Component Pattern
  • Type Definition Pattern
  • Integration Steps

Create React Flow node components following established patterns with proper TypeScript types and store integration. Copy templates from assets/ and replace placeholders: {{NodeName}} → PascalCase component name (e.g., VideoNode) {{nodeType}} → kebab-case type identifier (e.g., video-node) {{NodeData}} → Data interface name (e.g., VideoNodeData) assets/template.tsx - Node component assets/types.template.ts - TypeScript definitions 1. Add type to src/frontend/src/types/index.ts 2. Create component in src/frontend/src/components/nodes/ 3. Export from src/frontend/src/components/nodes/index.ts 4. Add defaults in src/frontend/src/store/app-store.ts 5. Register in canvas nodeTypes 6. Add to AddBlockMenu and ConnectMenu

来源仓库
microsoft/skills
源文件
.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md
固定版本
9287b443662d2433c85621c7325ee72a0ce499b5
阅读完整原作者说明 ↗

来源与内容状态

本条为自动发现的元数据,尚未完成人工文档核查;适用性与运行结果待核查。

原作者:Microsoft Skills · 原作者仓库元数据。文档核查:未核查。最近来源检查:2026-11-10T19:02:06.631Z。

分类由名称、说明与路径规则生成,分类不代表已核实适配。

许可与权利归属

MIT。第三方内容及版权归原作者,使用条件以原文为准。

许可原文 ↗

本站没有因同步、复制或用户自报成功而将资源标为运行验证通过。

限制与注意事项

  • 元数据收录不代表本站已经安装、适配、实测或进行安全审查。