[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-8338ba25-87fa-4395-b0d4-f7d5892ccd49":3,"$fK9owqRSTGq7P9Zldmpy1DQo6cp5rLeJGowkyN77IKf4":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"8338ba25-87fa-4395-b0d4-f7d5892ccd49","react-flow-node-ts","创建遵循既定模式、使用正确TypeScript类型和存储集成的React Flow节点组件。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: react-flow-node-ts\ndescription: \"Create React Flow node components following established patterns with proper TypeScript types and store integration.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# React Flow Node\n\nCreate React Flow node components following established patterns with proper TypeScript types and store integration.\n\n## Quick Start\n\nCopy templates from assets\u002F and replace placeholders:\n- `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`)\n- `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`)\n- `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`)\n\n## Templates\n\n- assets\u002Ftemplate.tsx - Node component\n- assets\u002Ftypes.template.ts - TypeScript definitions\n\n## Node Component Pattern\n\n```tsx\nexport const MyNode = memo(function MyNode({\n  id,\n  data,\n  selected,\n  width,\n  height,\n}: MyNodeProps) {\n  const updateNode = useAppStore((state) => state.updateNode);\n  const canvasMode = useAppStore((state) => state.canvasMode);\n  \n  return (\n    \u003C>\n      \u003CNodeResizer isVisible={selected && canvasMode === 'editing'} \u002F>\n      \u003Cdiv className=\"node-container\">\n        \u003CHandle type=\"target\" position={Position.Top} \u002F>\n        {\u002F* Node content *\u002F}\n        \u003CHandle type=\"source\" position={Position.Bottom} \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002F>\n  );\n});\n```\n\n## Type Definition Pattern\n\n```typescript\nexport interface MyNodeData extends Record\u003Cstring, unknown> {\n  title: string;\n  description?: string;\n}\n\nexport type MyNode = Node\u003CMyNodeData, 'my-node'>;\n```\n\n## Integration Steps\n\n1. Add type to `src\u002Ffrontend\u002Fsrc\u002Ftypes\u002Findex.ts`\n2. Create component in `src\u002Ffrontend\u002Fsrc\u002Fcomponents\u002Fnodes\u002F`\n3. Export from `src\u002Ffrontend\u002Fsrc\u002Fcomponents\u002Fnodes\u002Findex.ts`\n4. Add defaults in `src\u002Ffrontend\u002Fsrc\u002Fstore\u002Fapp-store.ts`\n5. Register in canvas `nodeTypes`\n6. Add to AddBlockMenu and ConnectMenu\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,140,1316,"2026-05-16 13:36:24",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"2e7e6fac-3be2-4985-bf68-c18d5c2bc1ac","1.0.0","react-flow-node-ts.zip",1187,"uploads\u002Fskills\u002F8338ba25-87fa-4395-b0d4-f7d5892ccd49\u002Freact-flow-node-ts.zip","551a17d5ecd7f20a0c1e0c8956f7c79520f878fcebc8392b190efc72556f5dfa","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":2264}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]