animation-performancecommit 2d22863SKILL.md · 性能优化
动画性能
诊断 Web 动画掉帧的原因，通过仅合成属性和脱离主线程运行，让动画保持在帧预算内。
npx skills add emilkowalski/skills --skill animation-performance已选中命令，请手动复制。
- 权限
- read-repo
- write-files
- shell
- network
- 兼容工具
- Any SKILL.md agent
- GitHub
- 52.5k
- 来源
- 社区 · Emil Kowalski
- 状态
- 扫描通过
- 许可证
- MIT
- 分类
- 性能优化
核心规则
默认只对 transform 和 opacity 做动画，其他属性都需要理由。
执行阶段
阶段 01列出所有动画
列出范围内每个动画的驱动方式、属性和播放时机，并展开 transition: all 和 Motion 简写实际动画的属性。
阶段 02按序诊断
依次检查：动画属性、主线程是否繁忙、React 是否每帧重渲染、继承的 CSS 变量、超过 20px 的 blur，最后才考虑 will-change。
阶段 03录制确认
用 DevTools 的 Performance 和 Animations 面板确认，并在真实的中端手机上分析，而不是凭感觉判断。
阶段 04输出报告
每项发现给出文件位置、原因、修改前后以及是从代码确认还是需要设备录制，按成本排序后停止，仅在被要求时应用修复。
权限说明（据 SKILL.md 整理）
| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 默认只输出报告；用户要求时才修改动画相关代码。 |
| 命令执行 | 不需要 | 不运行命令；设备录制由用户在 DevTools 中完成。 |
| 网络外发 | 不需要 | 不需要网络访问。 |
SKILL.md 头部信息（YAML）
---
name: animation-performance
description: Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost, and when `will-change` actually helps. Use when an animation is janky, choppy, stutters, or drops frames; when choosing which property to animate; when deciding between CSS and JS animation on performance grounds; or when reaching for `will-change` or GPU layers. For choosing easing, duration, or whether to animate at all use animate; for reviewing motion as a whole use review-animations.
---相关技能
规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。