Habilidades react-flow-node-ts
📦

react-flow-node-ts

Seguro

Construye componentes de nodos React Flow con TypeScript

Crear editores de flujo de trabajo visuales requiere patrones consistentes de componentes de nodo. Esta habilidad proporciona plantillas TypeScript con definiciones de tipos adecuadas, handles e integración con el store de Zustand.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
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:

  • Interfaz TypeScript: VideoNodeData con campos videoUrl, thumbnail y duration
  • Componente React: VideoNode con memo, handles e interfaz de usuario de reproductor de video
  • Lista de verificación de integración: 6 pasos para registrar el nodo en tu canvas de React Flow

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

Resultado esperado:

  • Definiciones de tipos: FormNodeData con array formFields y submitAction
  • Componente: FormNode con modos de edición/visualización condicionales basados en canvasMode
  • Integración con store: llamadas updateNode para cambios de valores de campo

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
31
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Constructor visual de flujo de trabajo

Crea nodos personalizados para un editor de flujo de trabajo drag-and-drop donde los usuarios pueden conectar bloques para definir secuencias de automatización.

Editor de diagramas y flujogramas

Construye herramientas de diagramación interactivas con tipos de nodos personalizados para documentación técnica o aplicaciones de mapeo de procesos.

Visualizador de pipeline de datos

Diseña interfaces visuales para pipelines de procesamiento de datos donde cada nodo representa una transformación o fuente de datos.

Prueba estos prompts

Componente de nodo básico 
Create a React Flow node component called 'ProcessNode' with a title and status indicator. Include target and source handles for connections.
Nodo impulsado por datos 
Generate a 'DataNode' component that displays dynamic data from the node's data prop. Include TypeScript interfaces for the data structure with optional fields.
Nodo interactivo con store 
Create a 'ConfigNode' component that uses useAppStore to read canvasMode and update node properties. Include resize handles visible only in edit mode.
Integración completa de nodo 
Generate all files needed for a 'DecisionNode' including: type definitions, component with conditional rendering, store defaults, and menu registration steps.

Mejores prácticas

  • Envuelve siempre los componentes de nodo con memo para prevenir re-renderizados innecesarios durante interacciones del canvas
  • Usa genéricos TypeScript para el tipo Node para asegurar acceso a datos tipado de forma segura en toda tu aplicación
  • Verifica canvasMode antes de mostrar elementos interactivos para prevenir conflictos durante el paneo del canvas

Evitar

  • Evita la manipulación directa del DOM en componentes de nodo - usa estado y props de React en su lugar
  • No omitas definiciones de tipos TypeScript - son esenciales para detectar errores de estructura de datos
  • Nunca modifiques datos de nodo directamente - usa siempre acciones del store como updateNode para cambios de estado

Preguntas frecuentes

¿Qué es React Flow y cuándo debería usar esta habilidad?
React Flow es una librería de React para construir editores interactivos basados en nodos. Usa esta habilidad cuando necesites tipos de nodos personalizados más allá de los nodos rectangulares por defecto.
¿Necesito instalar dependencias adicionales?
Sí, necesitas reactflow (o @xyflow/react) para los componentes principales y Zustand para la gestión de estado. La habilidad asume que estos ya están configurados.
¿Puedo personalizar la apariencia visual de los nodos generados?
Sí, las plantillas proporcionan el patrón estructural. Personalizas el contenido del div interno, clases CSS y estilos para coincidir con tu sistema de diseño.
¿Cómo funcionan múltiples handles para conexiones complejas?
Agrega múltiples componentes Handle con props id únicos. Posiciónalos en Top, Bottom, Left o Right. Usa el id para identificar qué handle activó una conexión.
¿Cuál es el propósito de NodeResizer?
NodeResizer proporciona handles de redimensionamiento alrededor de tu nodo cuando está visible. Típicamente se muestra solo cuando el nodo está seleccionado y el canvas está en modo de edición.
¿Cómo manejo interacciones de nodo como clics o ediciones?
Agrega handlers onClick a elementos dentro de tu nodo. Usa la acción updateNode del store para persistir cambios. Accede al estado selected desde las props del nodo para estilizado condicional.

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