react-flow-node-ts
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Best use case
react-flow-node-ts is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Teams using react-flow-node-ts should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/react-flow-node-ts/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How react-flow-node-ts Compares
| Feature / Agent | react-flow-node-ts | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 in `src/frontend/src/store/app-store.ts`
5. Register in canvas `nodeTypes`
6. Add to AddBlockMenu and ConnectMenu
## When to Use
This skill is applicable to execute the workflow or actions described in the overview.
## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.Related Skills
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
vercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
synthflow-ai-automation
Automate Synthflow AI tasks via Rube MCP (Composio). Always search tools first for current schemas.
hashnode-automation
Automate Hashnode tasks via Rube MCP (Composio). Always search tools first for current schemas.
flowiseai-automation
Automate Flowiseai tasks via Rube MCP (Composio). Always search tools first for current schemas.
anonyflow-automation
Automate Anonyflow tasks via Rube MCP (Composio). Always search tools first for current schemas.
aero-workflow-automation
Automate Aero Workflow tasks via Rube MCP (Composio). Always search tools first for current schemas.
reactome-database
Query Reactome REST API for pathway analysis, enrichment, gene-pathway mapping, disease pathways, molecular interactions, expression analysis, for systems biology studies.
flowio
Parse FCS (Flow Cytometry Standard) files v2.0-3.1. Extract events as NumPy arrays, read metadata/channels, convert to CSV/DataFrame, for flow cytometry data preprocessing.
workflow-patterns
Use this skill when implementing tasks according to Conductor's TDD workflow, handling phase checkpoints, managing git commits for tasks, or understanding the verification protocol.
workflow-orchestration-patterns
Master workflow orchestration architecture with Temporal, covering fundamental design decisions, resilience patterns, and best practices for building reliable distributed systems.
workflow-automation
Workflow automation is the infrastructure that makes AI agents reliable. Without durable execution, a network hiccup during a 10-step payment flow means lost money and angry customers. With it, workflows resume exactly where they left off.