# SkillPatch skill: react-flow-node-ts
This skill guides agents in creating custom React Flow node components using TypeScript, complete with proper type definitions, handle configurations, and Zustand store integration. It provides copy-paste templates, naming conventions, code patterns for both node components and type definitions, and a step-by-step integration checklist for wiring nodes into a React Flow canvas application.
You (the agent) were given this URL and asked to use this skill. This is a **public** skill — no SkillPatch account, API key, or prior setup is required. Two ways to use it:
**1. Use it right now** — the skill's complete file tree (SKILL.md + all reference files) is inlined below; read `SKILL.md` first, then follow it, consulting the other files as it directs.
**2. Install the exact package onto disk** (recommended if you can run a shell — this reproduces the skill byte-for-byte, including any binary assets that can't be inlined):
```bash
mkdir -p .claude/skills/react-flow-node-ts
curl -sSL https://skillpatch.dev/install_skill/react-flow-node-ts | tar -xz -C .claude/skills/
```
(`.claude/skills/` is Claude Code's convention; use whatever directory your agent loads skills from.)
---
## Skill files (3)
- `SKILL.md`
- `assets/template.tsx`
- `assets/types.template.ts`
### `SKILL.md`
````markdown
---
name: react-flow-node-ts
description: 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.
license: MIT
metadata:
author: Microsoft
version: "1.0.0"
---
# React Flow Node
Create React Flow node components following established patterns with proper TypeScript types and store integration.
## Quick Start
Copy templates from [assets/](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](assets/template.tsx) - Node component
- [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions
## Node Component Pattern
```tsx
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
```typescript
export interface MyNodeData extends Record {
title: string;
description?: string;
}
export type MyNode = Node;
```
## Integration Steps
1. Add type to `src/frontend/src/types/index.ts`
2. Create component in `src/frontend/src/components/nodes/`
3. Export from `src/frontend/src/components/nodes/index.ts`
4. Add defaults in `src/frontend/src/store/app-store.ts`
5. Register in canvas `nodeTypes`
6. Add to AddBlockMenu and ConnectMenu
````
### `assets/template.tsx`
```
import { memo, useCallback } from 'react';
import { NodeProps, Node, Handle, Position, NodeResizer } from '@xyflow/react';
import { {{NodeData}} } from '@/types';
import { useAppStore } from '@/store';
import { cn } from '@/utils/utils';
type {{NodeName}}Props = NodeProps>;
/**
* {{NodeName}} - Description of what this node does
*
* @example
* // Node data structure
* const data: {{NodeData}} = {
* title: 'Example',
* // ... other properties
* };
*/
export const {{NodeName}} = memo(function {{NodeName}}({
id,
data,
selected,
width,
height,
}: {{NodeName}}Props) {
// Store selectors - use individual selectors for performance
const updateNode = useAppStore((state) => state.updateNode);
const canvasMode = useAppStore((state) => state.canvasMode);
const isEditing = canvasMode === 'editing';
// Handlers
const handleTitleChange = useCallback(
(title: string) => {
updateNode(id, { title });
},
[id, updateNode]
);
return (
<>
{/* NodeResizer - only visible in editing mode */}
{isEditing && (
)}
{/* Node Container */}