Skill

react-flow-node-ts

Creates React Flow node components with TypeScript types, Zustand integration, handles, and resizers. Use for custom nodes in workflow editors or node-based canvas UIs.

React

Typescript

frontend

npx claudepluginhub microsoft/skills --plugin azure-sdk-typescript

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Create React Flow node components following established patterns with proper TypeScript types and store integration.

SKILL.md

Similar Skills

react-flow-node-ts

36.7k

Creates React Flow node components in TypeScript with proper types, store integration, and established patterns like memoization and resizers.

antigravity-awesome-skills

reactflow-custom-nodes

129

Creates custom React Flow nodes, edges, and handles with React components, TypeScript types, Tailwind styling, and registration. For building interactive node-based editors and diagrams.

2 tools

reactflow

react-flow-implementation

Implements React Flow node-based UIs with @xyflow/react for flowcharts, diagrams, visual editors in React. Covers nodes, edges, handles, custom components, state management, viewport control.

2 files

beagle-react

Stats

Parent Repo Stars1964

Parent Repo Forks219

Last CommitApr 2, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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

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

Add to AddBlockMenu and ConnectMenu

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