react-flow-node-ts

Solid

Create React Flow node components following established patterns with proper TypeScript types and store integration.

AI & Automation 39,350 stars 6386 forks Updated today MIT

Install

View on GitHub

Quality Score: 97/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
86
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```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 ( <> <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 ```typescript export interface MyNodeData extends Record<string, unknown> { title: string; description?: string; } export type MyNode = Node<MyNodeData, 'my-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 i...

Details

Author
sickn33
Repository
sickn33/antigravity-awesome-skills
Created
4 months ago
Last Updated
today
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

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.

335 Updated today
aiskillstore
Web & Frontend Solid

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.

2,429 Updated 2 days ago
microsoft
AI & Automation Featured

react-flow-architect

Build production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.

39,350 Updated today
sickn33
Web & Frontend Listed

react-flow-architect

Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or optimize ReactFlow applications for: (1) Interactive process graphs with expand/collapse navigation, (2) Hierarchical tree structures with drag & drop, (3) Performance-optimized large datasets with incremental rendering, (4) Auto-layout integration with Dagre, (5) Complex state management for nodes and edges, or any advanced ReactFlow visualization requirements.

335 Updated today
aiskillstore
Web & Frontend Listed

react-flow-expert

Use when building, extending, or debugging node-based UIs with React Flow / Svelte Flow / @xyflow — custom nodes & edges, handles & connections, layouting, viewport/coordinate math, store & state management, edge paths, or any xyflow internals.

0 Updated yesterday
dyammarcano