react-flow-node-ts

react-flow-node-ts 技能為開發人員提供了一個標準化的架構模板，用於在 React Flow 中構建自定義節點 UI 元件。此技能專為從事視覺化工作流程構建器、節點編輯器或交互式畫布應用程式的工程師所設計，強調型別安全與狀態管理的最佳實踐。透過使用此技能，開發人員可以快速啟動新節點，並透過 Zustand 與現有的應用程式儲存庫無縫整合，確保節點縮放、資料更新與連接處理等畫布交互行為在整個程式碼庫中遵循一致的實現模式。

• 使用預定義的 TypeScript 介面與元件模式，簡化 React Flow 自定義節點的建立過程。

• 透過 Zustand 促進與應用程式狀態的深度整合，實現對節點資料與畫布配置的集中控制。

• 包含對 React Flow 基本原語的支援，例如用於連接的 Handle 元件與用於互動式編輯的 NodeResizer。

• 提供結構化的目錄與檔案命名規範，確保隨著節點型別數量增加時的維護性。

• 內建型別定義，嚴格規範節點資料結構，減少複雜工作流程視覺化中的運行時錯誤。

• 輸入：需要使用者定義節點名稱 (PascalCase)、型別識別符 (kebab-case) 與資料介面參數。

• 輸出：生成 React 元件與對應的 TypeScript 定義樣板程式碼，可立即註冊於 React Flow 的 nodeTypes 物件中。

• 使用建議：在執行前請確保已配置好 Zustand 儲存庫（如 app-store.ts），因為模板依賴特定的選擇器來更新節點狀態。

• 實踐說明：請依照提供的整合步驟將新節點註冊至中心註冊表，並將其新增至應用程式的 AddBlockMenu 與 ConnectMenu 中。

• 限制：此技能專為使用 TypeScript 與 Zustand 的 React Flow 實作而設計；它假定專案結構遵循 Microsoft skills 儲存庫的架構規範。