Communitygithub.com

ibelick/fixing-motion-performance

審計並修復動畫效能問題,包括佈局震盪、合成器屬性、滾動連結動畫和模糊效果。當動畫卡頓、轉場不流暢或審查 CSS/JS 動畫效能時使用。

fixing-motion-performance 是什麼?

此技能專注於識別並解決網頁動畫中的效能瓶頸,特別是那些導致卡頓或滯後(jank)的問題。它能深入檢查 CSS 和 JavaScript 動畫,找出如強制同步佈局(layout thrashing)、未使用合成器屬性、滾動連結動畫(scroll-linked motion)以及過度使用濾鏡效果(如模糊)等常見問題。此工具適用於所有主流開發環境(如 Claude Code、Cursor、Codex),並可整合至持續整合流程中。透過分析關鍵渲染路徑,它會建議具體的修復措施,例如使用 transform 和 opacity 進行合成、利用 will-change 屬性、採用 requestAnimationFrame 進行更新,或將動畫移至合成器執行緒,最終顯著提升頁面渲染的流暢度與回應性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

fixing-motion-performance 是做什麼的?

審計並修復動畫效能問題,包括佈局震盪、合成器屬性、滾動連結動畫和模糊效果。當動畫卡頓、轉場不流暢或審查 CSS/JS 動畫效能時使用。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相關技能