Habilidades react-flow-node-ts
📦

react-flow-node-ts

Seguro

Build React Flow Node Components with TypeScript

Creating visual workflow editors requires consistent node component patterns. This skill provides TypeScript templates with proper type definitions, handles, and Zustand store integration.

Soporta: Claude Codex Code(CC)
🥉 74 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "react-flow-node-ts". Create a VideoNode component with playback controls

Resultado esperado:

  • TypeScript interface: VideoNodeData with videoUrl, thumbnail, and duration fields
  • React component: VideoNode with memo, handles, and video player UI
  • Integration checklist: 6 steps to register the node in your React Flow canvas

Usando "react-flow-node-ts". Generate a FormNode for collecting user input in workflows

Resultado esperado:

  • Type definitions: FormNodeData with formFields array and submitAction
  • Component: FormNode with conditional edit/view modes based on canvasMode
  • Store integration: updateNode calls for field value changes

Auditoría de seguridad

Seguro
v1 • 2/24/2026

Static analyzer flagged 20 patterns as potential security issues, but all are false positives. The 'external_commands' detections (14) are Markdown code block backticks used for documentation formatting, not shell execution. The 'weak cryptographic algorithm' findings (6) are misidentified text patterns with no actual cryptographic code present. This skill is a documentation template for creating React Flow node components and poses no security risk.

1
Archivos escaneados
72
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Visual Workflow Builder

Create custom nodes for a drag-and-drop workflow editor where users can connect blocks to define automation sequences.

Diagram and Flowchart Editor

Build interactive diagramming tools with custom node types for technical documentation or process mapping applications.

Data Pipeline Visualizer

Design visual interfaces for data processing pipelines where each node represents a transformation or data source.

Prueba estos prompts

Basic Node Component 
Create a React Flow node component called 'ProcessNode' with a title and status indicator. Include target and source handles for connections.
Data-Driven Node 
Generate a 'DataNode' component that displays dynamic data from the node's data prop. Include TypeScript interfaces for the data structure with optional fields.
Interactive Node with Store 
Create a 'ConfigNode' component that uses useAppStore to read canvasMode and update node properties. Include resize handles visible only in edit mode.
Complete Node Integration 
Generate all files needed for a 'DecisionNode' including: type definitions, component with conditional rendering, store defaults, and menu registration steps.

Mejores prácticas

  • Always wrap node components with memo to prevent unnecessary re-renders during canvas interactions
  • Use TypeScript generics for Node type to ensure type-safe data access throughout your application
  • Check canvasMode before showing interactive elements to prevent conflicts during canvas panning

Evitar

  • Avoid direct DOM manipulation in node components - use React state and props instead
  • Do not skip TypeScript type definitions - they are essential for catching data structure errors
  • Never modify node data directly - always use store actions like updateNode for state changes

Preguntas frecuentes

What is React Flow and when should I use this skill?
React Flow is a React library for building interactive node-based editors. Use this skill when you need custom node types beyond the default rectangular nodes.
Do I need to install additional dependencies?
Yes, you need reactflow (or @xyflow/react) for the core components and Zustand for state management. The skill assumes these are already set up.
Can I customize the visual appearance of generated nodes?
Yes, the templates provide the structural pattern. You customize the inner div content, CSS classes, and styling to match your design system.
How do multiple handles work for complex connections?
Add multiple Handle components with unique id props. Position them at Top, Bottom, Left, or Right. Use the id to identify which handle triggered a connection.
What is the purpose of NodeResizer?
NodeResizer provides resize handles around your node when visible. It is typically shown only when the node is selected and canvas is in editing mode.
How do I handle node interactions like clicks or edits?
Add onClick handlers to elements within your node. Use the store's updateNode action to persist changes. Access selected state from node props for conditional styling.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-flow-node-ts

Ref.

main

Estructura de archivos

📄 SKILL.md