[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M714D3XASQPMKM59VR6KAT7C":3,"skill-same:01M714D3XASQPMKM59VR6KAT7C":66},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":14,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M714D3XASQPMKM59VR6KAT7C","react-flow-node-ts",null,"Create React Flow node components following established patterns with proper TypeScript types and store integration.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Freact-flow-node-ts\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"react","react flow node ts","flow","node","react flow","typescript","components","create","integration","community","patterns","store","types","with","unknown","2026","2026-11-10 10:12:30",false,"---\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","# 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",{"name":5,"risk":38,"source":33,"date_added":45,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Freact-flow-node-ts","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill react-flow-node-ts",{"tool":58,"command":59},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill react-flow-node-ts",{"tool":61,"command":62},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill react-flow-node-ts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Freact-flow-node-ts\u002FSKILL.md",true,[],[67,90,116,126,139,156],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":78,"publishedAt":40},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[73],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[79,80,81,82,83,84,85,86,87,88,89,37],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch",{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":40},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[97,98,99,100,101,102,81,103,104,105,106,107,108,109,110,111,112,113,114,115],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":40},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[123,124,97,108,109,110,111,101,81,113,125,114,115,107,105,104,103,112,102,100],"trend radar","radar","pulse",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":132,"publishedAt":40},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[133,134,135,136,137,138],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":148,"publishedAt":40},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[145],{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[141,87,149,150,151,37,108,152,153,154,99,155,112],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":162,"publishedAt":40},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[158,163,164,165,112,166,153,167,168,169,170,171],"status","play","go","latest","github","discover","control","cmd","volume"]