react-flow-usage
✓用於構建基於節點的 UI、工作流編輯器和交互式圖表的綜合 React Flow (@xyflow/react) 模式和最佳實踐。使用 React Flow 時可用於 (1) 構建流編輯器或基於節點的界面，(2) 創建自定義節點和邊，(3) 實現拖放工作流，(4) 優化大型圖的性能，(5) 管理流狀態和交互，(6) 實現自動佈局或定位，或 (7) TypeScript 與 React Flow 集成。
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) 模式和最佳實踐。使用 React Flow 時可用於 (1) 構建流編輯器或基於節點的界面，(2) 創建自定義節點和邊，(3) 實現拖放工作流，(4) 優化大型圖的性能，(5) 管理流狀態和交互，(6) 實現自動佈局或定位，或 (7) TypeScript 與 React Flow 集成。 來源：thedogwiththedataonit/react-flow。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage- 分類
- </>開發工具
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 react-flow-usage？
用於構建基於節點的 UI、工作流編輯器和交互式圖表的綜合 React Flow (@xyflow/react) 模式和最佳實踐。使用 React Flow 時可用於 (1) 構建流編輯器或基於節點的界面，(2) 創建自定義節點和邊，(3) 實現拖放工作流，(4) 優化大型圖的性能，(5) 管理流狀態和交互，(6) 實現自動佈局或定位，或 (7) TypeScript 與 React Flow 集成。 來源：thedogwiththedataonit/react-flow。
如何安裝 react-flow-usage？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/thedogwiththedataonit/react-flow --skill react-flow-usage 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/thedogwiththedataonit/react-flow
詳情
- 分類
- </>開發工具
- 來源
- skills.sh
- 收錄時間
- 2026-02-01