react-flow-usage
✓Modèles React Flow complets (@xyflow/react) et bonnes pratiques pour créer des interfaces utilisateur basées sur des nœuds, des éditeurs de flux de travail et des diagrammes interactifs. À utiliser lorsque vous travaillez avec React Flow pour (1) créer des éditeurs de flux ou des interfaces basées sur des nœuds, (2) créer des nœuds et des bords personnalisés, (3) implémenter des flux de travail par glisser-déposer, (4) optimiser les performances des grands graphiques, (5) gérer l'état du flux et les interactions, (6) implémenter la mise en page ou le positionnement automatique, ou (7) l'intégration de TypeScript avec React Flow.
Installation
SKILL.md
Comprehensive patterns and best practices for building production-ready node-based UIs with React Flow (@xyflow/react v12+).
| 1 | Setup & Configuration | CRITICAL | setup- | | 2 | Performance Optimization | CRITICAL | perf- | | 3 | Node Patterns | HIGH | node- | | 4 | Edge Patterns | HIGH | edge- | | 5 | State Management | HIGH | state- | | 6 | Hooks Usage | MEDIUM | hook- | | 7 | Layout & Positioning | MEDIUM | layout- | | 8 | Interaction Patterns | MEDIUM | interaction- |
| 9 | TypeScript Integration | MEDIUM | typescript- |
Modèles React Flow complets (@xyflow/react) et bonnes pratiques pour créer des interfaces utilisateur basées sur des nœuds, des éditeurs de flux de travail et des diagrammes interactifs. À utiliser lorsque vous travaillez avec React Flow pour (1) créer des éditeurs de flux ou des interfaces basées sur des nœuds, (2) créer des nœuds et des bords personnalisés, (3) implémenter des flux de travail par glisser-déposer, (4) optimiser les performances des grands graphiques, (5) gérer l'état du flux et les interactions, (6) implémenter la mise en page ou le positionnement automatique, ou (7) l'intégration de TypeScript avec React Flow. Source : thedogwiththedataonit/react-flow.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage- Catégorie
- </>Développement
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que react-flow-usage ?
Modèles React Flow complets (@xyflow/react) et bonnes pratiques pour créer des interfaces utilisateur basées sur des nœuds, des éditeurs de flux de travail et des diagrammes interactifs. À utiliser lorsque vous travaillez avec React Flow pour (1) créer des éditeurs de flux ou des interfaces basées sur des nœuds, (2) créer des nœuds et des bords personnalisés, (3) implémenter des flux de travail par glisser-déposer, (4) optimiser les performances des grands graphiques, (5) gérer l'état du flux et les interactions, (6) implémenter la mise en page ou le positionnement automatique, ou (7) l'intégration de TypeScript avec React Flow. Source : thedogwiththedataonit/react-flow.
Comment installer react-flow-usage ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/thedogwiththedataonit/react-flow
Détails
- Catégorie
- </>Développement
- Source
- skills.sh
- Première apparition
- 2026-02-01