Agent skill · software engineering · sickn33
react-flow-node-ts
Create React Flow node components following established patterns with proper TypeScript types and store integration.
Why this skill is useful
Provides specific patterns and TypeScript types for creating React Flow node components that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Bundled upstream support Supporting files are included at skill-relative paths. See UPSTREAM-NOTICE.md for their pinned sources, licenses, hashes, and import changes. 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 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/react-flow-node-ts--697bee