react-flow-node-ts | SkillBundle

react-flow-node-ts | SkillBundle

Install

npx skills add microsoft/skills --skill react-flow-node-ts

Overview

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.

Also available at

The same skill content is published under more than one repo. The install counts are split across them; any of these commands works.

Other names for this repo

microsoft/agent-skillsRenamed1 installs

Documentation

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,

Type Definition Pattern

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

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}
 
export type MyNode = Node<MyNodeData, 'my-node'>;