{"id":"182df796-9d37-46ee-bbca-ff7948671b6e","shortId":"cKeQQN","kind":"skill","title":"react-flow-node-ts","tagline":"Create React Flow node components following established patterns with proper TypeScript types and store integration.","description":"# 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/ 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/template.tsx - Node component\n- assets/types.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    <>\n      <NodeResizer isVisible={selected && canvasMode === 'editing'} />\n      <div className=\"node-container\">\n        <Handle type=\"target\" position={Position.Top} />\n        {/* Node content */}\n        <Handle type=\"source\" position={Position.Bottom} />\n      </div>\n    </>\n  );\n});\n```\n\n## Type Definition Pattern\n\n```typescript\nexport interface MyNodeData extends Record<string, unknown> {\n  title: string;\n  description?: string;\n}\n\nexport type MyNode = Node<MyNodeData, 'my-node'>;\n```\n\n## Integration Steps\n\n1. Add type to `src/frontend/src/types/index.ts`\n2. Create component in `src/frontend/src/components/nodes/`\n3. Export from `src/frontend/src/components/nodes/index.ts`\n4. Add defaults in `src/frontend/src/store/app-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.","tags":["react","flow","node","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-react-flow-node-ts","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/react-flow-node-ts","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34583 github stars · SKILL.md body (2,034 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:52:06.323Z","embedding":null,"createdAt":"2026-04-18T21:43:18.871Z","updatedAt":"2026-04-22T18:52:06.323Z","lastSeenAt":"2026-04-22T18:52:06.323Z","tsv":"'1':146 '2':151 '3':156 '4':160 '5':165 '6':170 'action':188 'add':147,161,171 'addblockmenu':173 'applic':182 'ask':226 'asset':44 'assets/template.tsx':71 'assets/types.template.ts':74 'boundari':234 'canva':168 'canvasmod':99,107 'case':57 'clarif':228 'clear':201 'compon':10,28,50,73,78,153 'connectmenu':175 'const':82,93,98 'content':115 'copi':41 'creat':6,24,152 'criteria':237 'data':65,88 'default':162 'definit':76,122 'describ':189,205 'descript':134 'e.g':52,60,68 'edit':108 'environ':217 'environment-specif':216 'establish':12,30 'execut':184 'expert':222 'export':81,125,136,157 'extend':128 'flow':3,8,22,26 'follow':11,29 'function':85 'handl':109,116 'height':91 'id':87 'identifi':59 'input':231 'integr':20,38,144 'interfac':66,126 'isvis':105 'kebab':56 'kebab-cas':55 'limit':193 'match':202 'memo':84 'miss':239 'my-nod':141 'mynod':83,86,138 'mynodedata':127,140 'mynodeprop':92 'name':51,67 'node':4,9,23,27,63,72,77,114,139,143 'nodedata':64 'nodenam':48 'noderes':104 'nodetyp':54,169 'output':211 'overview':192 'pascalcas':49 'pattern':13,31,79,123 'permiss':232 'placehold':47 'posit':112,119 'position.bottom':120 'position.top':113 'proper':15,33 'quick':39 'react':2,7,21,25 'react-flow-node-t':1 'record':129 'regist':166 'replac':46 'requir':230 'return':103 'review':223 'safeti':233 'scope':204 'select':89,106 'skill':180,196 'skill-react-flow-node-ts' 'sourc':118 'source-sickn33' 'specif':218 'src/frontend/src/components/nodes':155 'src/frontend/src/components/nodes/index.ts':159 'src/frontend/src/store/app-store.ts':164 'src/frontend/src/types/index.ts':150 'start':40 'state':96,101 'state.canvasmode':102 'state.updatenode':97 'step':145 'stop':224 'store':19,37 'string':130,133,135 'substitut':214 'success':236 'target':111 'task':200 'templat':42,70 'test':220 'titl':132 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':209 'ts':5 'tsx':80 'type':17,35,58,110,117,121,137,148 'typescript':16,34,75,124 'unknown':131 'updatenod':94 'use':178,194 'useappstor':95,100 'valid':219 'video':62 'video-nod':61 'videonod':53 'videonodedata':69 'width':90 'workflow':186","prices":[{"id":"2df2bd80-f8c9-4937-9238-096fa39741f8","listingId":"182df796-9d37-46ee-bbca-ff7948671b6e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:18.871Z"}],"sources":[{"listingId":"182df796-9d37-46ee-bbca-ff7948671b6e","source":"github","sourceId":"sickn33/antigravity-awesome-skills/react-flow-node-ts","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-node-ts","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:18.871Z","lastSeenAt":"2026-04-22T18:52:06.323Z"}],"details":{"listingId":"182df796-9d37-46ee-bbca-ff7948671b6e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"react-flow-node-ts","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"c632fadfb28258b3dccaa60ac8aafc8ba017a05e","skill_md_path":"skills/react-flow-node-ts/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-node-ts"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"react-flow-node-ts","description":"Create React Flow node components following established patterns with proper TypeScript types and store integration."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/react-flow-node-ts"},"updatedAt":"2026-04-22T18:52:06.323Z"}}