From azure-sdk-typescript
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/azure-sdk-typescript:react-flow-node-tsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Create React Flow node components following established patterns with proper TypeScript types and store integration.
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)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>
</>
);
});
export interface MyNodeData extends Record<string, unknown> {
title: string;
description?: string;
}
export type MyNode = Node<MyNodeData, 'my-node'>;
src/frontend/src/types/index.tssrc/frontend/src/components/nodes/src/frontend/src/components/nodes/index.tssrc/frontend/src/store/app-store.tsnodeTypesnpx claudepluginhub microsoft/skills --plugin azure-sdk-typescriptCreates React Flow node components in TypeScript with proper types, store integration, and established patterns like memoization and resizers.
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.
Provides architectural guidance for building node-based UIs with React Flow, covering use-case evaluation, state management strategies, and package structure.