react-flow-node-ts
A guide for developing custom React Flow nodes with TypeScript and Zustand integration.
Install
mkdir -p .claude/skills/react-flow-node-ts && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2031" && unzip -o skill.zip -d .claude/skills/react-flow-node-ts && rm skill.zipInstalls to .claude/skills/react-flow-node-ts
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Define custom React Flow node types
- →Implement connection handles
- →Integrate Zustand state management
- →Apply TypeScript interfaces for node data
- →Register nodes in canvas
How it works
It provides templates for node components and type definitions, requiring integration into the project's store and canvas registration. It uses memoized components to handle node state and connection handles.
Inputs & outputs
When to use react-flow-node-ts
- →Creating visual workflow builders
- →Building custom node-based UI components
- →Integrating Zustand with React Flow nodes
- →Typing custom workflow node data
About this skill
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
When not to use it
- →When building standard nodes without custom logic
- →For non-React Flow UI components
Prerequisites
Limitations
- →Requires manual registration in canvas nodeTypes
- →Limited to React Flow framework
How it compares
It provides a standardized boilerplate for node creation that includes store integration and type safety, rather than manually configuring each node.
Compared to similar skills
react-flow-node-ts side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| react-flow-node-ts (this skill) | 5 | 3mo | No flags | Intermediate |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
| radix-ui-design-system | 33 | 2mo | Review | Intermediate |
| figma-integration | 23 | 7mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by microsoft
View all by microsoft →You might also like
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
radix-ui-design-system
sickn33
Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
figma-implement-design
openai
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
frontend-ui-dark-ts
microsoft
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.
mui
davila7
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.