Agent skill · software engineering · aiskillstore
react-flow-node-ts
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.
Why this skill is useful
Provides specific TypeScript patterns and integration steps for creating custom React Flow nodes that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Type Definition Pattern 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
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-flow-node-ts