前端工程 是做什麼的？
在起草文案、註解或報告之前，請先閱讀 反 AI 寫作。閱讀儲存庫說明、現有螢幕與元件、設計令牌、框架/相依性版本、路由、資料合約與測試慣例。使用現有技術棧與工具；對於不熟悉的 API，請根據該版本的官方文件進行驗證。保留無關的工作與既定的產品行為。
確立螢幕的職責與設計
識別目標受眾、使用者任務、主要操作、內容層級、必要狀態與驗收標準。優先使用提供的設計與現有產品模式。對於重要的新介面，應釐清遺漏的必要需求，並在規劃有幫助時使用 代理規劃。對於小而明確的變更，不需要設計儀式。
當需要新的視覺方向時，研究相關參考資料，並將其中有用的層級、密度、導航與互動原則轉化為產品自身的語言。請勿複製專有的品牌、文字、素材或精確的佈局。記錄足夠的設計決策以指導實作，而無需為一個螢幕發明整個設計系統。
使用來自專案令牌的連貫字體排印、間距、顏色、圓角與重點。優先關注使用者的操作與資訊，而不是預設使用通用英雄區塊、統一卡片、過大間距或裝飾性漸層。當產品需要時，這些模式可以很恰當；請勿強加美學禁令。使用現實的內容，包括長標籤與稀疏/密集的資料。從產品文案中移除無關的實作細節。保持所有公開的控制項可運作或明確標示為不可用；切勿將佔位符偽裝成正常功能。
實作清晰的元件與狀態
對於變更的前端/後端合約，請使用 API 設計並保留支援的消費者。請勿從 UI 測試資料推斷後端合約。
使用 撰寫簡潔簡單的程式碼以達到聚焦的職責與合理的抽象。偏好組合與既定的元件 API，而非不相關旗標的大型矩陣。根據職責而非任意行數進行拆分。保持資料與呈現的所有權清晰，但無需為每個元件強制使用單獨的容器或鉤子。
將狀態放置在它所屬的地方：本機互動狀態、共享狀態、用於可導航/可分享檢視的 URL 狀態，以及用於遠端資料的現有伺服器狀態工具。避免重複的派生狀態與矛盾的布林值。請勿僅僅為了避免幾個 props 就引入全域儲存。在相關時保留穩定的項目身分、歷史導航、深層連結與框架的渲染/水合契約。
處理適用的載入、空資料、成功、錯誤、停用、待處理與權限狀態。區分無資料與篩選後無結果。在可恢復的錯誤後保留已輸入的資料，說明如何繼續，並防止重複提交。對於樂觀更新，需考慮失敗、並行變更、過時回應與調解。在取消共享請求之前，追蹤取消的所有權。請勿使用隱藏的控制項作為授權；伺服器端強制執行仍是必要的。
使佈局與互動具有包容性
閱讀 無障礙與響應式檢查。偏好原生的語意式 HTML 與經過測試的無障礙基本元件。自訂互動必須實作其完整的鍵盤、焦點與狀態契約。標籤、錯誤與狀態回饋應在不依賴顏色或動畫的情況下易於理解。
在內容需要的地方選擇斷點，並尊重現有的佈局令牌。使用彈性佈局、適當的寬度限制與響應式素材。檢查窄與寬的檢視、縮放、長文字、空狀態與溢位。在小型螢幕上保留有意義的內容與操作，而非為了符合螢幕截圖而隱藏它們。
維護安全性與效能
將遠端內容與 URL 視為不受信任。使用框架安全的渲染；僅在需要豐富 HTML 時透過經過驗證的機制進行清理。請勿在客戶端套件、遙測或錯誤訊息中暴露機密或私有記錄。將快取資料的範圍限定為身分/租戶，並在相關上下文變更時清除或使其失效。
避免不必要的請求瀑布、昂貴的重複工作、過大的相依性以及佈局變動。使用框架的資產、渲染與載入慣例。根據測量證據與產品預算進行優化；請勿機械地加入記憶化、虛擬化或程式碼分割。實驗室結果與現場效能是不同的證據，應分別報告。
驗證渲染結果
使用 測試編寫以獲得行為覆蓋率。執行相關的儲存庫檢查，並在可用的瀏覽器中使用真實資料檢查應用程式。測試受影響的操作與狀態轉換、鍵盤導航、焦點、驗證、響應式佈局以及適用的瀏覽器目標。檢查與變更相關的控制台與網路錯誤。螢幕截圖用於確認外觀，而非互動正確性；自動化無障礙掃描無法確認合規性。
將渲染輸出與已接受的設計或專案既有的螢幕進行比較。修正發現的裁剪、間距、對比或互動問題，並重新檢查受影響的狀態。請勿僅為了驗證 UI 而執行破壞性的真實操作；請使用安全的測試資料或授權的測試環境。如果無法使用瀏覽器，請明確說明哪些部分仍未驗證，而不是聲稱介面已通過視覺驗證。
報告實際的變更、測試過的流程/視埠以及重大限制。在需要、可用且獲得授權的獨立審查時，使用 程式碼審查。提交、推送與發佈使用授權的 Git 交付。