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.
npx claudepluginhub microsoft/skills --plugin azure-sdk-typescriptThis skill uses the workspace's default tool permissions.
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Creates 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.
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.
Share bugs, ideas, or general feedback.
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.tsnodeTypes