react-ui-patterns

此技能為實作 React UI 狀態提供了一個全面的框架，確保開發人員在資料驅動的元件設計中維持高標準。它專為需要管理複雜非同步資料流、載入指示器和錯誤訊息的前端工程師所設計，以避免常見的 UI 反模式。透過採用這些模式，團隊可以防止諸如陳舊 UI 閃爍、錯誤被默默吞掉或未處理空狀態等問題。此技能在開發使用 GraphQL 或 REST API 的儀表板、表單和資料密集型應用程式時特別有用。

• 實作載入指示器的黃金法則：僅在沒有資料顯示時才顯示轉圈動畫或骨架螢幕，防止不必要的版面位移。

• 定義了清晰的錯誤處理階層，從欄位級驗證錯誤、吐司通知，到頁面級錯誤橫幅與全螢幕回退機制。

• 標準化空狀態的元件行為，確保每個列表或集合都有專屬的空狀態顯示，以提供更好的使用者體驗。

• 強制執行嚴格的按鈕互動準則，包含在進行表單提交或變更請求等非同步操作時，停用按鈕並顯示載入指示器。

• 提供根據內容形狀與情境（例如初始頁面載入與行內操作）選擇骨架或轉圈動畫的決策樹。

• 推廣漸進式揭露與優雅降級技術，即使在只有部分資料可用的情況下，也能保持介面的響應能力。

• 當您正在建置或重構與非同步資料源或外部 API 互動的 UI 元件時，請使用此技能。

• 確保所有變更邏輯都包含 onError 處理程序，以避免吞沒執行時的異常。

• 與自動化測試策略整合，以驗證在不同資料條件下，空狀態與錯誤邊界都能正確渲染。

• 輸入預期包含元件狀態需求（載入中、錯誤、資料）與標準 UI 元件屬性。

• 輸出確保了一個可預測、具韌性的前端架構，遵循專業的設計系統標準，並在高延遲操作期間優化使用者的視覺感知。