pbakaus/optimize

optimize 是做什麼的？

診斷並修復 UI 效能問題，涵蓋載入速度、渲染、動畫、圖片與套件大小。當使用者提到慢、延遲、卡頓、效能、套件大小、載入時間，或想獲得更快、更流暢的體驗時使用。

功能

• 載入速度：分析並最佳化頁面初次載入時間，包括資源壓縮、快取策略與非同步載入。
• 渲染與動畫：偵測並修復因 JavaScript 阻塞主執行緒或強制重排（forced reflow）導致的卡頓動畫，建議使用 requestAnimationFrame 與 CSS 硬體加速。
• 圖片最佳化：壓縮圖片、實作懶載入（lazy loading）與使用現代格式（如 WebP）。
• 套件大小：分析 JavaScript 與 CSS 的傳輸大小，建議 tree shaking、程式碼拆分與長效快取策略。

使用方式

當你遇到以下任一情況時，即可呼叫此技能：

• 應用程式載入緩慢
• 頁面或元件渲染時出現明顯卡頓
• 動畫無法維持 60fps 的流暢度
• 使用者報告「卡卡的」或「反應慢」
• 構建輸出顯示套件體積過大

此技能會根據目前專案的技術棧自動選擇最佳化策略，並提供具體的程式碼修改建議。

支援平台

• Claude Code
• Cursor
• Codex
• 其他相容的 AI 代理工具

運作原理

技能透過分析以下指標來診斷問題：

1. 載入時間：使用 performance.timing API 與 Lighthouse 報告。
2. 幀率：監控 requestAnimationFrame 回呼頻率。
3. 網路請求：檢查資源大小與請求數量。
4. 記憶體使用量：監控 performance.memory。

根據診斷結果，技能會提供或實作最佳化策略，例如：

• 圖片壓縮並轉換為 WebP 格式
• 對非關鍵資源啟用 loading="lazy"
• 使用 IntersectionObserver 實作視口懶載入
• 採用 CSS 變換（transform）代替 top/left 動畫以避免重排
• 對大型元件執行程式碼拆分（dynamic import）

授權

MIT