react-flow-usage

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- |

ノードベースの UI、ワークフロー エディター、およびインタラクティブな図を構築するための包括的な React Flow (@xyflow/react) パターンとベスト プラクティス。 (1) フロー エディターまたはノードベースのインターフェイスの構築、(2) カスタム ノードとエッジの作成、(3) ドラッグ アンド ドロップ ワークフローの実装、(4) 大きなグラフのパフォーマンスの最適化、(5) フローの状態とインタラクションの管理、(6) 自動レイアウトまたは自動配置の実装、または (7) TypeScript と React Flow の統合を目的として React Flow を操作するときに使用します。 ソース: thedogwiththedataonit/react-flow。

原文を見る