fixing-motion-performance

fixing-motion-performance 概览

fixing-motion-performance 的作用

fixing-motion-performance skill 帮你在不默认更换技术栈的前提下，审查并修复 UI 动画性能问题。它适用于动效卡顿、与滚动联动的效果开销过大，或过渡动画触发了不必要的 layout、paint 或 compositing 工作的场景。如果你需要一个面向 Frontend Development 的实用 fixing-motion-performance skill，它的目标就是找出卡顿的真实原因，并把问题落实到代码级修复。

适合谁使用

当你已经确定“动画有问题”，但还不清楚具体机制时，用它最合适：是 layout thrashing、过重的 blur、will-change 用得过多、滚动驱动更新，还是每一帧都在做测量。它适合前端工程师、UI 审核人员，以及需要检查文件并输出可执行违规项，而不是泛泛建议的 agents。

它的价值在哪里

它最大的价值在于基于规则的审查方式。它不会只说“优化动画”这种空泛结论，而是要求明确指出违反了什么规则、为什么有影响，以及在当前代码库里该怎么改。这让 fixing-motion-performance 的安装决策更容易：当你需要的是可重复的 review 流程，而不是一次性的 prompt 时，它就很合适。

如何使用 fixing-motion-performance skill

安装并在对话中触发

先用仓库里的 skill loader 安装，然后在涉及动画工作时调用它：
/fixing-motion-performance
这会把约束应用到当前讨论中。如果你要做文件审查，可以传入目标：
/fixing-motion-performance src/components/Hero.tsx
这就是最直接的 fixing-motion-performance install 和使用路径：一个命令激活，一个文件路径审查。

提供正确的输入

当你的请求里包含动画目标、相关文件，以及哪些边界绝对不能改动时，这个 skill 的效果最好。更好的输入示例如下：

• “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 的设计目标是把代码和性能规则逐条对照。

先读这些内容，能最快上手

先看 SKILL.md，因为这个 repo 刻意保持精简，没有额外的支持文件。重点关注：

• SKILL.md，了解实际使用方式
• rule table，查看优先级和严重程度
• rendering glossary，用来区分 transform、opacity、paint 和 layout 的成本

由于这里没有 helper folders，SKILL.md 本身就是 fixing-motion-performance usage 的唯一权威来源。

能得到更好结果的工作流

比较实用的流程是：

1. 先找出那个让人感觉慢的动画或交互。
2. 针对该文件或组件发起定向 review。
3. 要求给出精确片段、影响和修复方式。
4. 采用能消除性能成本的最小改动。
5. 对修改后的代码重新运行这个 skill，确认问题已经从 critical 降到 acceptable。

当你想保留现有动画库，只调整实现细节时，这套流程尤其有效。

fixing-motion-performance skill 常见问题

它比普通 prompt 更好吗？

通常是的，前提是你的问题确实聚焦在动画性能上。普通 prompt 往往只会给出宽泛优化建议，而 fixing-motion-performance 提供的是更窄的 review 框架：识别坏模式，解释它为什么影响渲染，并提出直接修复方案。当你需要在多个前端文件之间保持一致性时，这很有价值。

它会替代我的动画库吗？

不会。这个 skill 明确说明，除非你特别要求，否则不要迁移库。它的目的，是在当前技术栈内部改进实现，无论你用的是 CSS、WAAPI、Motion、rAF 还是 GSAP。

什么情况下不该用它？

如果问题更偏设计层面而不是性能层面，或者你是在从头重写交互，就先别用它。它也不适合你想要的是泛化的动效设计点评，而不是代码审查或渲染成本分析的情况。

它适合新手吗？

适合，只要你能把它指向某个文件，并描述出症状就行。你不需要很深的渲染知识，因为这个 skill 已经把常见动画成本整理成了 composite、paint 和 layout 这几类。只是为了得到最佳结果，你在 prompt 里最好保留现有的 UI 意图。

如何改进 fixing-motion-performance skill

给它更强的约束

最好的 fixing-motion-performance guide 输入，会明确说明哪些内容必须保持不变。把 framework、动画库，以及硬性限制都写上，比如“不要改变行为”“如果可能，保留 blur 效果”“避免重构 DOM”。这样能减少猜测，让修复更贴近现实。

要求证据，而不只是修复

一条高质量的 review 请求，应该要求它给出：

• 导致问题的确切行号或代码片段
• 渲染成本属于哪一类
• 具体怎么改代码
• 修复会带来什么 tradeoff

这种格式会把 skill 推向可执行诊断，而不是停留在笼统的优化说明。

注意常见失误模式

最常见的遗漏包括：动画化 layout 属性、在动效过程中做测量、滥用 blur 或 filters，以及到处加 will-change。如果第一次结果不完整，把文件和交互时序一起补充进去：它什么时候开始、是哪个 scroll 或 hover 状态触发的、卡顿发生在加载时还是持续运动中。

结合前后对比反复迭代

先应用第一轮修复后，再对更新后的代码重新运行这个 skill，比较新的瓶颈在哪里。如果性能还是不理想，告诉它哪些地方已经改了、哪些部分仍然慢。第二轮正是 fixing-motion-performance 在 Frontend Development 里最有用的时候：它能帮你从“动画很慢”推进到“这个具体机制仍然太贵”。