or run

tessl search
Log in

react-flow-node

tessl install github:microsoft/agent-skills --skill react-flow-node

github.com/microsoft/agent-skills

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 node-based UI components.

Review Score

93%

Validation Score

14/16

Implementation Score

88%

Activation Score

100%

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

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

  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