react-flow-node-ts
Créer des composants de nœuds React Flow avec TypeScript
La création d'éditeurs de workflow visuels nécessite des modèles de composants de nœuds cohérents. Cette compétence fournit des modèles TypeScript avec des définitions de types appropriées, des poignées de connexion et l'intégration du store Zustand.
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". Créer un composant VideoNode avec des contrôles de lecture
Résultat attendu:
- Interface TypeScript : VideoNodeData avec les champs videoUrl, thumbnail et duration
- Composant React : VideoNode avec memo, handles et UI du lecteur vidéo
- Liste de vérification d'intégration : 6 étapes pour enregistrer le nœud dans votre canvas React Flow
Utilisation de "react-flow-node-ts". Générer un FormNode pour collecter les entrées utilisateur dans les workflows
Résultat attendu:
- Définitions de types : FormNodeData avec un tableau formFields et submitAction
- Composant : FormNode avec des modes édition/affichage conditionnels basés sur canvasMode
- Intégration store : appels updateNode pour les changements de valeur de champ
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
Constructeur de workflow visuel
Créez des nœuds personnalisés pour un éditeur de workflow glisser-déposer où les utilisateurs peuvent connecter des blocs pour définir des séquences d'automatisation.
Éditeur de diagrammes et organigrammes
Construisez des outils de diagramme interactifs avec des types de nœuds personnalisés pour la documentation technique ou les applications de cartographie de processus.
Visualiseur de pipeline de données
Concevez des interfaces visuelles pour les pipelines de traitement de données où chaque nœud représente une transformation ou une source de données.
Essayez ces prompts
Créez un composant de nœud React Flow appelé 'ProcessNode' avec un titre et un indicateur de statut. Incluez les poignées target et source pour les connexions.
Générez un composant 'DataNode' qui affiche des données dynamiques depuis la prop data du nœud. Incluez des interfaces TypeScript pour la structure de données avec des champs optionnels.
Créez un composant 'ConfigNode' qui utilise useAppStore pour lire canvasMode et mettre à jour les propriétés du nœud. Incluez des poignées de redimensionnement visibles uniquement en mode édition.
Générez tous les fichiers nécessaires pour un 'DecisionNode' incluant : définitions de types, composant avec rendu conditionnel, valeurs par défaut du store et étapes d'enregistrement dans le menu.
Bonnes pratiques
- Enveloppez toujours les composants de nœuds avec memo pour éviter les re-rendus inutiles pendant les interactions du canvas
- Utilisez des génériques TypeScript pour le type Node afin d'assurer un accès aux données typé dans toute votre application
- Vérifiez canvasMode avant d'afficher des éléments interactifs pour éviter les conflits pendant le panoramique du canvas
Éviter
- Évitez la manipulation directe du DOM dans les composants de nœuds - utilisez l'état et les props React à la place
- Ne sautez pas les définitions de types TypeScript - elles sont essentielles pour détecter les erreurs de structure de données
- Ne modifiez jamais directement les données du nœud - utilisez toujours les actions du store comme updateNode pour les changements d'état