react-flow-node-ts
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.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez Ă utiliser
Tester
Utilisation de "react-flow-node-ts". Create a VideoNode component with playback controls
RĂ©sultat attendu:
- 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
Utilisation de "react-flow-node-ts". Generate a FormNode for collecting user input in workflows
RĂ©sultat attendu:
- 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
Audit de sécurité
SûrStatic 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.
Score de qualité
Ce que vous pouvez construire
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.
Essayez ces prompts
Create a React Flow node component called 'ProcessNode' with a title and status indicator. Include target and source handles for connections.
Generate a 'DataNode' component that displays dynamic data from the node's data prop. Include TypeScript interfaces for the data structure with optional fields.
Create a 'ConfigNode' component that uses useAppStore to read canvasMode and update node properties. Include resize handles visible only in edit mode.
Generate all files needed for a 'DecisionNode' including: type definitions, component with conditional rendering, store defaults, and menu registration steps.
Bonnes pratiques
- 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
Éviter
- 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