fixing-motion-performance

fixing-motion-performance 技能概覽

fixing-motion-performance 的用途

fixing-motion-performance 技能可協助你在不預設變更技術棧的前提下，稽核並修正 UI 動畫效能問題。它特別適用於動效卡頓、與捲動連動的效果成本過高，或轉場造成不必要的 layout、paint、compositing 工作等情境。如果你正在尋找一個適合 Frontend Development 的實用 fixing-motion-performance 技能，這套流程的目標就是找出卡頓的真正原因，並把問題轉成可直接落地的程式碼修正。

適合哪些人使用

當你已經知道「動畫有問題」，但還不清楚是哪一種機制出錯時，就很適合用它：layout thrashing、過重的 blur、過度使用 will-change、捲動驅動更新，或是在每一幀都進行量測等。它特別適合前端工程師、UI 審查者，以及需要檢視檔案並回傳可執行違規項，而不是泛泛建議的 agent。

它為什麼實用

它的主要價值在於規則導向的審查方式。它不會只抽象地說「把動畫優化一下」，而是要求你指出具體違規、為什麼會影響效能，以及要如何在目前的程式碼庫中修正。當你需要的是可重複的審查流程，而不是一次性的提示詞時，fixing-motion-performance 的安裝決策就會容易得多。

如何使用 fixing-motion-performance 技能

透過對話安裝並觸發

先用 repo 的 skill loader 安裝，之後在遇到動畫工作時呼叫它：
/fixing-motion-performance
這會把相關限制套用到目前的討論中。如果你想進行檔案審查，就帶入目標檔案：
/fixing-motion-performance src/components/Hero.tsx
這就是最簡單的 fixing-motion-performance install 與使用路徑：一個指令啟用，一個檔案路徑進行稽核。

提供正確的輸入

當你的請求包含動畫目標、相關檔案，以及哪些範圍不能變更時，這個技能的效果最好。有效的輸入像這樣：

• “Review Header.tsx for scroll-linked motion jank; keep Motion, no library migration.”
• “Fix hover and entrance animation performance in CardList.tsx; preserve current visuals.”
• “Audit this page for layout thrashing and expensive filters.”

如果你只說「讓它更順一點」，輸出就會比較不精準，因為這個技能本來就是設計來把程式碼對照效能規則來檢查。

先讀這些，最快上手

先看 SKILL.md，因為這個 repo 的結構刻意做得很精簡，沒有額外的支援檔案。請優先關注：

• SKILL.md：實際使用方式
• rule table：優先順序與嚴重程度
• rendering glossary：如何分類 transform、opacity、paint 與 layout 工作

由於這裡沒有 helper folders，檔案本身就是 fixing-motion-performance usage 的唯一準則來源。

能帶來更好結果的工作流程

一個實際可行的流程是：

1. 先找出看起來很慢的動畫或互動。
2. 對該檔案或元件提出有針對性的審查要求。
3. 要求回傳精確片段、影響範圍，以及修正方式。
4. 只做能移除效能成本的最小變更。
5. 在修改後的程式碼上重新跑一次技能，確認問題是否已從嚴重降到可接受。

當你想保留現有動畫函式庫，只調整實作細節時，這套流程特別有效。

fixing-motion-performance 技能 FAQ

這比一般 prompt 更好嗎？

通常是的，尤其當你的問題很明確地屬於動畫效能時。一般 prompt 可能只會給你較廣泛的最佳化建議，而 fixing-motion-performance 提供的是更窄的審查框架：找出不良模式、說明它為什麼會拖慢渲染，並提出直接修正。當你需要在多個前端檔案之間維持一致標準時，這點特別有價值。

它會取代我的動畫函式庫嗎？

不會。這個技能明確表示，除非你要求，否則不要遷移函式庫。它的目的，是在現有技術棧內改善實作，不論你使用的是 CSS、WAAPI、Motion、rAF，或 GSAP 都適用。

什麼情況下不該用它？

如果問題是設計層面的，而不是效能層面的，或者你是要從零重寫互動，就先不要用它。當你想要的是一般性的 motion design 評語，而不是程式碼審查或渲染成本分析時，這也不是最適合的工具。

對初學者友善嗎？

可以，只要你能把它指向某個檔案並描述症狀即可。你不需要很深的渲染知識就能使用，因為這個技能已經把常見動畫成本整理成 compositing、paint 與 layout 的考量。只是為了達到最佳效果，你在提示中還是要盡量保留原本的 UI 意圖。

如何改進 fixing-motion-performance 技能

給它更強的限制條件

最好的 fixing-motion-performance guide 輸入，會明確說出哪些東西必須維持不變。請把框架、動畫函式庫，以及像是「不要改變行為」、「如果可以請保留 blur 效果」、「避免重組 DOM」這類硬性限制一併寫進去。這能降低猜測空間，也讓修正更貼近實際可行方案。

要求證據，不只是修正

一個好的審查請求，應該要求：

• 造成問題的精確行號或程式片段
• 渲染成本的分類
• 具體的程式碼變更
• 修正帶來的任何取捨

這種格式會把技能推向可執行的診斷，而不是空泛的最佳化筆記。

注意常見失誤模式

最常見的漏判包括：動畫化 layout 屬性、在動作進行時量測、過度使用 blur 或 filters，以及到處加 will-change。如果第一次的結果看起來不完整，請補上檔案與互動時序：它什麼時候開始、是由哪種 scroll 或 hover 狀態觸發，以及卡頓是發生在載入時還是連續移動過程中。

用前後脈絡反覆校正

套用第一次修正後，請針對更新後的程式碼再跑一次技能，並比較新的瓶頸。如果效能還是不好，就告訴它哪些地方已經改了、哪些部分仍然慢。第二次回合正是 fixing-motion-performance 在 Frontend Development 裡最有價值的地方：它能幫你從「動畫很慢」推進到「到底是哪一個機制還是太耗效能」。