optimize

概覽

optimize 技能旨在協助開發者系統性地診斷並解決網頁應用中的 UI 性能問題。它針對常見的問題，如載入緩慢、互動延遲、動畫卡頓、圖片過大及打包體積膨脹。如果您的使用者反映性能遲緩，或您希望提供更快速、更流暢的體驗，optimize 能提供具體策略與檢查指引，助您優化工作流程。

誰適合使用 optimize？

• 前端開發者與網頁工程師
• 專注於提升 Core Web Vitals 的團隊
• 任何需要排查介面緩慢、延遲或資源過重問題的人員

optimize 解決哪些問題？

• 識別載入、渲染及執行時的瓶頸
• 提供逐步指導，協助測量與提升性能
• 涵蓋圖片優化、打包縮減、動畫流暢度等多方面

使用說明

安裝步驟

1. 使用以下指令安裝 optimize：
   npx skills add https://github.com/pbakaus/impeccable --skill optimize
2. 閱讀 SKILL.md 文件，了解結構化工作流程與實用建議。
3. 若有，亦可參考 README.md、AGENTS.md 與 metadata.json 等輔助文件以獲得更多背景資訊。

快速開始

• 先測量應用目前的性能指標，如 Core Web Vitals（LCP、FID/INP、CLS）、載入時間、打包大小及執行時統計。
• 使用 optimize 找出具體瓶頸，例如大型圖片、耗資源的 JavaScript 或版面重排問題。
• 按照技能中列出的優化策略執行，包括：
  • 圖片優化（使用現代格式、壓縮、延遲載入）
  • 打包大小縮減
  • 改善動畫與渲染效能
  • 減少網路請求

適應您的專案

• 根據您的程式庫、工具與限制調整工作流程。
• 變更前後務必測量，確保優化成效明顯。

常見問題

optimize 適用於所有網頁專案嗎？

optimize 最適合用於 UI 性能有疑慮或使用者反映緩慢、延遲的專案。對於想提升 Core Web Vitals 或減少打包大小的團隊尤其有價值。

我應該先查看哪些文件？

建議先從 SKILL.md 開始，了解主要工作流程。技能目錄中的其他文件則提供更深入的背景資訊。

optimize 如何協助圖片優化？

此技能提供實用建議，包括使用現代圖片格式、適當尺寸、壓縮、延遲載入及 CDN 傳遞，以加速圖片載入。

optimize 可以用於行動裝置性能優化嗎？

可以，optimize 包含針對行動用戶的診斷指引，如慢速連線與裝置限制等問題。

我在哪裡可以找到更多細節？

請開啟 Files 標籤，瀏覽完整檔案結構，包括參考資料與進階優化的輔助腳本。