{
  "schema": "https://ai-atoms.com/schemas/skill-v1.json",
  "type": "skill",
  "id": "skill/react-flow-node-ts",
  "version": "1.0.0",
  "name": "React Flow Node Ts",
  "description": "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...",
  "system_prompt_fragment": "# 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.",
  "applicable_domains": [
    "frontend"
  ],
  "category": "frontend",
  "invocation": [
    "/react-flow-node-ts"
  ],
  "authored_by": "claudeskills.in community",
  "source_url": "https://claudeskills.in/skill/react-flow-node-ts",
  "provenance": {
    "source": "claudeskills.in",
    "source_url": "https://claudeskills.in/skill/react-flow-node-ts",
    "license": "unknown",
    "imported_at": "2026-09-03",
    "notes": "Aggregated by claudeskills.in from community GitHub lists."
  },
  "tags": [
    "claudeskills",
    "frontend"
  ],
  "lifecycle": "draft"
}