技能：效能
讓 UI 快速且穩定。將效能視為可及性問題——緩慢／卡頓的 UI 會先讓低階裝置失效。
步驟
- 閱讀
workflows/performance.md（Core Web Vitals 目標、載入策略、佈局偏移、動畫效能、設計系統執行時期成本）。 - 根據預算進行診斷：LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1。在中階手機設定上進行測量（慢速 4G + 4× CPU 降速）。
- 載入：先渲染摺疊以上內容（SSR／Server Components），依路由 + 重量級小工具進行程式碼分割，延遲載入摺疊以下／互動後的內容（Astro islands / Qwik），預載一種關鍵字型粗細，使用現代響應式圖片。
- 消除佈局偏移：骨架圖保持與最終尺寸相同，透過
aspect-ratio保留媒體空間（tokens/sizing.json），絕不在現有內容上方注入新內容。 - 動畫：僅使用
transform／opacity，謹慎使用will-change，時長控制在 100–300 毫秒（tokens/motion.json），尊重prefers-reduced-motion。偏好 CSS 狀態樣式而非 JS 以降低 INP；透過樹搖（tree-shake）與按元件匯入。
驗證（完成定義）
- Lighthouse／實測資料必須在中階手機上達到 LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1。
- 在慢速 4G + 4× CPU 降速下，首次互動仍保持回應。
- 骨架圖 + 媒體保留空間（載入時 CLS 為零）；無任何非合成層動畫在迴圈中執行。