Generate React Flow Node Components

Creates React Flow node components following established patterns with proper TypeScript types and application store integration, generated from templates rather than written from scratch each time.

Use this skill when adding a new node type to a React Flow-based canvas application, needing a consistent typed node component with resize/handle/store integration, or wiring a new node into the app's menus and type registry. Not a fit for one-off ReactFlow prototypes without an existing store/canvas architecture to integrate into.

Starts from two templates (assets/template.tsx for the component, assets/types.template.ts for TypeScript definitions), replacing {{NodeName}} (PascalCase, e.g. VideoNode), {{nodeType}} (kebab-case type identifier, e.g. video-node), and {{NodeData}} (data interface name, e.g. VideoNodeData) placeholders.

The node component pattern wraps the component in memo, destructures id/data/selected/width/height props, reads updateNode and canvasMode from the app store via useAppStore, conditionally shows a NodeResizer only when selected and in editing mode, and renders target/source Handle components at top and bottom positions around the node content. The type definition pattern defines a data interface extending Record<string, unknown> and a Node<DataType, 'node-type-string'> type alias for React Flow's generic node typing.

Integration requires six steps: add the type to src/frontend/src/types/index.ts, create the component in src/frontend/src/components/nodes/, export it from that directory's index.ts, add default values in src/frontend/src/store/app-store.ts, register the node type in the canvas's nodeTypes map, and add it to the AddBlockMenu and ConnectMenu UI.

Built on React Flow's Node, Handle, NodeResizer, and Position primitives, integrated with an app-specific Zustand-style store (useAppStore) for node state and canvas mode. Because the resizer's visibility is gated on both selected and canvasMode === 'editing', nodes stay resizable during authoring but locked down in any read-only or presentation mode, keeping viewer-facing canvases from being accidentally reshaped.

Frontend developers adding new node types to a React Flow-based canvas application who need a consistent, store-integrated node component pattern rather than building each node type's boilerplate from scratch.

export const MyNode = memo(function MyNode({ id, data, selected }: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
});