Generate React Flow Node Components

React Flow Node is a skill for creating node components that follow the repository's established patterns. It focuses on the component, its TypeScript data type, and the places where a node is connected to the rest of the canvas. Component and type templates are paired with repository update steps so a new node can be typed, registered, and made available in the menus. Its example component reads update and canvas mode values from the app store, shows a resizer only for a selected node in editing mode, and places target and source handles around the node content.

Use this skill when implementing a React Flow node in the described application structure. It is especially relevant when a node needs a typed data shape, a component based on the supplied template, and registration across the canvas and menus. The integration list helps keep the work connected from the shared type definition through the store defaults and canvas registration. Do not use it for unrelated work or for a different domain or tool. The skill does not replace environment-specific validation or expert review; validate the result in the actual repository.

The component pattern accepts node props including an id, data, selected state, width, and height. The example uses those values with a store hook and renders a node resizer with target and source handles around its content. The type pattern extends Record<string, unknown>, requires a title, and permits an optional description. It aliases a React Flow Node to a concrete node data type and node identifier. The templates use placeholders such as {{NodeName}}, {{nodeType}}, and {{NodeData}}; replace them with the PascalCase component name, kebab-case type identifier, and data interface name for the node being added. The examples map VideoNode to video-node and VideoNodeData, showing that the component name, registered identifier, and interface have separate naming roles.

The data type shape is:

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

The examples use React Flow types and components including Node, NodeResizer, Handle, and Position. Its component example also uses memo and reads updateNode and canvasMode through useAppStore. The repository integration sequence adds the type to src/frontend/src/types/index.ts, creates the component in src/frontend/src/components/nodes/, exports it from src/frontend/src/components/nodes/index.ts, and adds defaults in src/frontend/src/store/app-store.ts, registers it in canvas nodeTypes, and includes it in AddBlockMenu and ConnectMenu. The sequence does not add package or setup requirements.