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 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 export interface MyNodeData extends Record < string , unknown
{ title : string ; description ? : string ; } export type MyNode = Node < MyNodeData , 'my-node'
; Integration Steps Add type to src/frontend/src/types/index.ts Create component in src/frontend/src/components/nodes/ Export from src/frontend/src/components/nodes/index.ts Add defaults in src/frontend/src/store/app-store.ts Register in canvas nodeTypes Add to AddBlockMenu and ConnectMenu When to Use This skill is applicable to execute the workflow or actions described in the overview.