跳转到使用指南
fixing-motion-performance作者 Julien Thibeaut

Fixing Motion Performance Skill.

Claude Code 和 Codex 的动效与视频 skill:查找并修复卡顿的 CSS/JS 动画和滚动关联动效。

  • Motion & Video
  • 审查报告
ibelick/ui-skills · skills/fixing-motion-performance/SKILL.mdSKILL.md
--- name: fixing-motion-performance description: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance. --- ## how to use ## when to apply ## rendering steps glossary ## rule categories by priority ## common fixes ## review guidance
前言和章节标题读取自上游文件,时间为 2026-09-14 · 完整内容 5,561 字符

01 功能说明

fixing-motion-performance skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这是一份针对 CSS 和 JS 动画性能的审查与修复手册,面向审查或重构卡顿过渡、滚动联动动效和模糊效果的设计师与开发者。它以斜杠命令的形式提供:不带参数调用时,会将这些规范应用于对话中正在进行的任何动画工作;给定一个文件时,会逐条报告违规,引用确切的代码行、说明其重要性,并给出代码层面的修复方案。

规则按优先级排序,从「永不使用」的模式、机制选择和工具边界(关键级别)开始,依次经过测量、滚动、绘制、图层和模糊,最后到视图过渡。除非特别要求,它拒绝迁移动画库,而是在现有技术栈内应用规则。

它产出什么

  • 针对每个违规,用一句简短的话说明其重要性。
  • 针对每个违规,给出具体的代码层面修复方案。
  • 对任何非默认的渲染工作选择给出明确说明。
查看示例提示词 ↗

工作方式

  1. 01
    以斜杠命令方式调用

    运行 /fixing-motion-performance,将这些约束应用到会话中已在讨论的任何动画工作上。

  2. 02
    或指向一个文件

    传入路径会切换到审查模式,根据每条规则检查该文件,而不是约束实时工作。

  3. 03
    分三部分报告

    每条发现都会引用违规的代码行,用一句简短的话说明其重要性,并提出代码层面的修复方案。

  4. 04
    按渲染步骤对属性分类

    术语表将工作划分为合成、绘制和布局,让审查者了解哪些动画开销低,哪些开销高。

  5. 05
    按优先级顺序执行

    关键类别会先于影响较低的类别被检查,因此「永不使用」的模式和工具边界会最先被确定。

  6. 06
    保持在当前技术栈内

    库迁移不属于此项工作范畴;规则会应用于代码库当前已使用的动画系统。

02 找到适合场景

何时使用 fixing-motion-performance Skill

当工作是此类动效与视频时,在 Claude Code 或 Codex 中使用 fixing-motion-performance skill。以下适用范围和限制取自该 skill 自己的文件。

适合场景

  • 新增或修改使用 CSS、WAAPI、Motion、rAF 或 GSAP 编写的 UI 动画。
  • 重构已出现卡顿感的交互或过渡效果。
  • 实现滚动联动动画或滚动触发的显现效果,而这些目前依赖 scroll 事件运行。
  • 为布局、滤镜、遮罩、渐变或 CSS 变量制作动画,其中性能开销是核心问题。
  • 审查依赖 will-change、transform 或测量的组件。

了解边界

  • 超出导航层级变化的视图过渡,例如交互密集的 UI 或必须可中断的流程。
  • 连续或大面积的模糊效果——这类效果会被排除,而非被优化。

需要提供的信息

  • 单独使用斜杠命令对于实时工作,直接调用它即可;随后它会规范对话中所做的任何动画改动。
  • 审查模式下的文件路径传入一个文件后,skill 会依据全部规则审查该文件,并生成违规报告。
  • 现有的动画系统你不需要指定目标库;现状代码即是参照基准,规则会在其框架内应用。

03 Skill 内部

fixing-motion-performance skill 为 Claude Code 和 Codex 提供的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 绝不交错读写操作

    不得在同一帧内混合布局读取与写入,也不得同时运行多个各自会测量或修改布局的动画系统。

  2. 绝不基于滚动位置驱动动画

    禁止使用 scrollTop、scrollY 或 scroll 事件来驱动动画;应改用 Scroll 或 View Timelines 以及 IntersectionObserver。

  3. 每个 rAF 循环都必须有退出条件

    没有停止条件的 requestAnimationFrame 循环属于绝对禁止的模式,而非可接受的权衡。

  4. 默认使用 Transform 和 Opacity

    这些是合成器属性,也是制作动效的起点;由 JS 驱动的动画仅保留给确实需要的交互场景使用。

  5. 模糊上限为 8px

    模糊动画必须保持较小幅度,不超过 8px,且仅限于短暂的一次性效果;连续模糊以及大面积模糊均被排除在外。

  6. 精准地使用 will-change

    图层提升并非自动完成,因此 will-change 应临时且小范围地使用,而不是长期留在大量或大面积的提升图层上。

  7. 不要用 CSS 变量驱动动效

    驱动 transform、opacity 或 position 的自定义属性不得被动画化,继承而来的动画变量则一律禁止。

  8. 不允许半途迁移

    在同一个组件内,API 不得只迁移一部分,动效样式也不得混用。

04 投入使用

在 Claude Code 或 Codex 中安装 fixing-motion-performance

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 fixing-motion-performance 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

针对 skills/fixing-motion-performance/SKILL.md 的通用 skills CLI 形式;仓库可能会记录自己的路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Use /fixing-motion-performance on [path/to/Component.tsx]. The [side panel] transitions width on hover, the reveal-on-scroll is wired to a window scroll listener, and there is a blurred overlay on a full-width section. Report each violation with the exact line, why it matters, and a concrete fix, working within our existing [Motion] setup rather than migrating libraries.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 确认提出的修复方案在保持预期效果的前提下,做的是成本最低的渲染工作。
  • 检查任何移出屏幕的内容是否真的被暂停或停止,而不是仍在运行。
  • 在图层提升(layer promotion)很重要的场景下,用工具去验证它,而不是假设它已经发生。

在 OpenDesign 中从其 SKILL.md 链接导入 fixing-motion-performance:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Repository
github.com/ibelick/ui-skills Branch main
Skill 文件
skills/fixing-motion-performance/SKILL.md 验证时记录的内容校验和;提交 79081ab
License
MIT 来自 LICENSE。
仓库星标数
8,402 GitHub 快照拍摄于 2026-09-14,针对整个 ibelick/ui-skills 仓库,该仓库在此目录中包含 5 个 skills。不是 fixing-motion-performance 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 使用方法不带参数的调用会约束当前会话;带文件参数则会触发完整的违规报告。
  2. 适用场景列出在动画工作中应触发这些准则的五种情形。
  3. 渲染步骤术语表定义合成(composite)、绘制(paint)和布局(layout),以及各自涉及的属性。
  4. 按优先级划分的规则类别九个类别按影响程度分级,从严重到低。
  5. 快速参考九类简短要点约束,从绝不出现的模式到工具边界。
  6. 常见修复方案针对布局抖动(layout thrashing)、滚动联动动效和 FLIP 测量的 CSS 与 JS 前后对比代码片段。
  7. 审查指引如何进行审查:先处理严重问题、选择成本最低的方案、为非默认选择给出合理依据、给出可执行的备注。
Skill 自身的描述
"审查并修复动画性能问题,包括布局抖动、合成器属性、滚动关联动效和模糊效果。适用于动画卡顿、过渡不流畅或审查 CSS/JS 动画性能。"

来自 SKILL.md 的 front-matter 描述。完整文件约 5,561 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 fixing-motion-performance Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

它覆盖哪些动画库?

它在适用范围中列出了 CSS、WAAPI、Motion、rAF 和 GSAP,因此覆盖面广,并不局限于某一个框架。由于它是在现有系统内应用规则,因此可以适配你当前正在使用的任意一种。

Fixing Motion Performance

在真实的运动和视频任务上运行 fixing-motion-performance。

下载 OpenDesign,从 SKILL.md 链接导入 fixing-motion-performance,粘贴上面的提示词,在查看结果之前先读方案。

终端
npx skills add https://github.com/ibelick/ui-skills --skill fixing-motion-performance

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows