react-typescript

此技能為使用 React 19 與 TypeScript 構建現代 Web 應用程式提供了強大的架構框架。它專為需要維護嚴格型別安全與跨複雜程式碼庫組件模式一致性的專業前端工程師與團隊負責人所設計。透過利用這些久經考驗的模式，開發人員能夠確保更高的程式碼品質、減少技術債，並以最小的樣板程式碼實作複雜功能，如非同步資料獲取、樂觀更新 UI 與精密的表單處理。

• 進階組件模式：包含基於介面的 Props 函數組件實作、用於靈活列表的通用組件以及用於簡潔版面的容器/子組件模式。
• 狀態管理生態系統：提供對 React Context 提供者、自定義 Hook 建立與 Zustand Store 實作的全面支援，以進行可擴展的全局狀態管理。
• 資料獲取與查詢：內建 TanStack Query (React Query) 模式，包含基本 Hook、複雜變更 (Mutations)、查詢失效處理與樂觀更新邏輯。
• 穩健的表單處理：結合 React Hook Form 與 Zod 進行基於模式的驗證、錯誤處理與型別安全的表單提交流程。
• 效能與可靠性：提供錯誤邊界 (Error Boundaries)、記憶化 (Memoization) 模式，以及簡化業務邏輯同時強制執行效能最佳實踐的自定義 Hook。
• 輸入通常包括任務描述，例如「實作使用者個人資料表單」或「設定資料獲取 Hook」，輸出則為符合現代 React 範式的生產級、型別檢查程式碼區塊。
• 使用注意事項：建議在組件腳手架或架構規劃階段將特定模式貼入 Agent 的內容中。此技能旨在與 TypeScript 5+ 配置無縫協作，確保所有狀態管理程式碼與 UI 組件保持解耦。使用者應確保開發環境已配置為支援 React 19 特性，以充分利用所提供的 Hook 與效能模式。