react-flow-node-ts

# React Flow Node Create React Flow node components following established patterns with proper TypeScript types and store integration. ## Quick Start Copy templates from assets/ and replace placeholders: - `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`) - `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`) - `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`) ## Templates - assets/template.tsx - Node component - assets/types.template.ts - TypeScript definitions ## Node Component Pattern ```tsx export const MyNode = memo(function MyNode({ id, data, selected, width, height, }: MyNodeProps) { const updateNode = useAppStore((state) => state.updateNode); const canvasMode = useAppStore((state) => state.canvasMode); return ( <> <NodeResizer isVisible={selected && canvasMode === 'editing'} /> <div className="node-container"> <Handle type="target" position={Position.Top} /> {/* Node content */} <Handle type="source" position={Position.Bottom} /> </div> </> ); }); ``` ## Type Definition Pattern ```typescript export interface MyNodeData extends Record<string, unknown> { title: string; description?: string; } export type MyNode = Node<MyNodeData, 'my-node'>; ``` ## Integration Steps 1. Add type to `src/frontend/src/types/index.ts` 2. Create component in `src/frontend/src/components/nodes/` 3. Export from `src/frontend/src/components/nodes/index.ts` 4. Add defaults in `src/frontend/src/store/app-store.ts` 5. Register in canvas `nodeTypes` 6. Add to AddBlockMenu and ConnectMenu ## When to Use This skill is applicable to execute the workflow or actions described in the overview. ## Limitations - Use this skill only when the task clearly matches the scope described above. - Do not treat the output as a substitute for environment-specific validation, testing, or expert review. - Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.