react-flow-node-ts
使用 TypeScript 构建 React Flow 节点组件
创建可视化工作流编辑器需要一致的节点组件模式。此技能提供具有正确类型定义、句柄和 Zustand 状态集成的 TypeScript 模板。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-flow-node-ts". 创建一个带有播放控制功能的 VideoNode 组件
النتيجة المتوقعة:
- TypeScript 接口:VideoNodeData,带有 videoUrl、thumbnail 和 duration 字段
- React 组件:VideoNode,带有 memo、句柄和视频播放器 UI
- 集成清单:在 React Flow 画布中注册节点的 6 个步骤
استخدام "react-flow-node-ts". 生成一个 FormNode 用于在工作流中收集用户输入
النتيجة المتوقعة:
- 类型定义:FormNodeData,带有 formFields 数组和 submitAction
- 组件:FormNode,基于 canvasMode 的条件编辑/查看模式
- 状态集成:用于字段值更改的 updateNode 调用
التدقيق الأمني
آمنStatic analyzer flagged 20 patterns as potential security issues, but all are false positives. The 'external_commands' detections (14) are Markdown code block backticks used for documentation formatting, not shell execution. The 'weak cryptographic algorithm' findings (6) are misidentified text patterns with no actual cryptographic code present. This skill is a documentation template for creating React Flow node components and poses no security risk.
درجة الجودة
ماذا يمكنك بناءه
可视化工作流构建器
为拖放式工作流编辑器创建自定义节点,用户可以连接块来定义自动化序列。
图表和流程图编辑器
构建具有自定义节点类型的交互式图表工具,用于技术文档或流程映射应用程序。
数据管道可视化器
为数据处理管道设计可视化界面,其中每个节点代表转换或数据源。
جرّب هذه الموجهات
创建一个名为 'ProcessNode' 的 React Flow 节点组件,带有标题和状态指示器。包���用于连接的目标和源句柄。
生成一个 'DataNode' 组件,显示来自节点 data 属性的动态数据。包括带有可选字段的数据结构的 TypeScript 接口。
创建一个 'ConfigNode' 组件,使用 useAppStore 读取 canvasMode 并更新节点属性。包括仅在编辑模式下可见的调整大小句柄。
生成 'DecisionNode' 所需的所有文件,包括:类型定义、带有条件渲染的组件、状态默认值和菜单注册步骤。
أفضل الممارسات
- 始终使用 memo 包装节点组件,以防止在画布交互期间不必要的重新渲染
- 为 Node 类型使用 TypeScript 泛型,以确保整个应用程序中的类型安全数据访问
- 在显示交互元素之前检查 canvasMode,以防止在画布平移期间发生冲突
تجنب
- 避免在节点组件中直接操作 DOM - 改用 React 状态和属性
- 不要跳过 TypeScript 类型定义 - 它们对于捕获数据结构错误至关重要
- 永远不要直接修改节点数据 - 始终��用 updateNode 等状态操作来进行状态更改