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.
From microsoft-azure-skillsnpx claudepluginhub jadecli/jadecli-claude-plugins --plugin microsoft-azure-skillsThis skill uses the workspace's default tool permissions.
assets/template.tsxassets/types.template.tsreferences/acceptance-criteria.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Analyzes BMad project state from catalog CSV, configs, artifacts, and query to recommend next skills or answer questions. Useful for help requests, 'what next', or starting BMad.
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