Labsco
microsoft logo

react-flow-node-ts

✓ Official★ 2,700

by microsoft · part of microsoft/skills

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating…

🔥🔥🔥✓ VerifiedFreeQuick setup
#cloud#git
🧩 One of 7 skills in the microsoft/skills package — works on its own, and pairs well with its siblings.

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by microsoft

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating… npx skills add https://github.com/microsoft/agent-skills --skill react-flow-node-ts Download ZIPGitHub2.7k

React Flow Node

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

Templates

Node Component Pattern

Copy & paste — that's it
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 (
 <>
 
 
 
 {/* Node content */}
 
 

 
 );
});

Type Definition Pattern

Copy & paste — that's it
export interface MyNodeData extends Record {
 title: string;
 description?: string;
}

export type MyNode = 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