[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6G3ABPV4AWMENFYFD8SV6D3":3,"skill-same:01M6G3ABPV4AWMENFYFD8SV6D3":70},{"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":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":14,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M6G3ABPV4AWMENFYFD8SV6D3","react-flow-node-ts",null,"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 no...","reikiplanet\u002Fdaoskills","reikiplanet","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96377599?v=4","01M6CVWCMD740YHQDK7E9QYBW4","Reiki Planet","01M6CVWCS4KXVA2CWFVJ43EAXK",0,"MIT","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\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,40,41],"react","react flow node ts","react flow","flow","node","zustand","with","types","visual","community","Nodes","use","canvas","integration","create","components","workflow","typescript","2026-11-10 10:12:30",false,"---\nname: react-flow-node-ts\ndescription: \"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 no...\"\nrisk: unknown\nsource: community\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":47,"source":33,"description":7},"unknown","master","dff58085da947e81e8418c922055644bf0082b1b","skills\u002Fdevelopment\u002Freact-flow-node-ts","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills","https:\u002F\u002Fgithub.com\u002Freikiplanet","https:\u002F\u002Fwww.reiki-planet.com","Reiki Planet Game","2026-03-29 06:02:29",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add reikiplanet\u002Fdaoskills --skill react-flow-node-ts",{"tool":62,"command":63},"bunx","bunx skills add reikiplanet\u002Fdaoskills --skill react-flow-node-ts",{"tool":65,"command":66},"pnpm","pnpm dlx skills add reikiplanet\u002Fdaoskills --skill react-flow-node-ts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fdevelopment\u002Freact-flow-node-ts\u002FSKILL.md",true,[],[71,97,109,123,142,165],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":42},"01M6G614JTEQJHPT8AKK3YQ18S","web-games","Web browser game development principles. Framework selection, WebGPU, optimization, PWA.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fweb-games\u002FSKILL.md",[],[78,79,80,81,82,83,33,84,85,86,87,88,89,90,91,92,93,94,95,96],"games","web games","web","grep","principles","selection","framework selection","edit","write","read","pwa","game","web browser","game development","Optimization","framework","browser","development","webgpu",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":103,"publishedAt":42},"01M6G611H2YGV0GZFP90D38ZMJ","vr-ar","VR\u002FAR development principles. Comfort, interaction, performance requirements.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fvr-ar\u002FSKILL.md",[],[104,105,95,106,107,33,85,86,87,81,108,82],"ar","vr ar","interaction","requirements","performance",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":42},"01M6G60XNMHAMV1SV0EJ1CX0AY","templates","Project scaffolding templates for new applications. Use when creating new projects from scratch. Contains 12 templates for various tech stacks.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Ftemplates\u002FSKILL.md",[],[111,116,117,118,119,120,33,35,87,121,122,81],"project scaffolding","From Scratch","tech","project","scaffolding","projects","applications",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":42},"01M6G60T0GATMK3Q5H8GDC1Z8S","wcag-audit-patterns","Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing ac...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fwcag-audit-patterns\u002FSKILL.md",[],[130,131,132,133,134,33,135,30,136,137,35,138,139,140,141],"wcag audit patterns","wcag audit","patterns","WCAG","audit","manual","automated testing","guidance","remediation","verification","accessibility","testing",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":148,"publishedAt":42},"01M6G60PMCHW1FRZ63F931QK3R","vulnerability-scanner","Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fvulnerability-scanner\u002FSKILL.md",[],[149,150,151,152,153,154,155,156,33,87,81,157,82,158,159,160,161,162,163,164],"scanner","vulnerability scanner","vulnerability","prioritization","2025","mapping","chain","supply chain","Bash","analysis","risk","owasp","supply chain security","security","supply","advanced",{"skillNo":166,"name":167,"nameZh":6,"description":168,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":169,"categories":170,"keywords":171,"publishedAt":42},"01M6G60JZBB8DK0W3DSG1WNMZK","threat-modeling-expert","Expert in threat modeling methodologies, security architecture review, and risk assessment. Masters STRIDE, PASTA, attack trees, and security requirement extraction. Use for security architecture r...","https:\u002F\u002Fgithub.com\u002Freikiplanet\u002Fdaoskills\u002Fblob\u002Fmaster\u002Fskills\u002Fsecurity\u002Fthreat-modeling-expert\u002FSKILL.md",[],[172,173,174,175,176,177,178,179,162,35,180,181,182,33,183,184,185,159,186,187],"modeling","threat modeling expert","threat modeling","expert","threat","risk assessment","architecture review","architecture","security architecture review","trees","security architecture","security requirement extraction","assessment","extraction","review","stride"]