技能 fixing-motion-performance
📦

fixing-motion-performance

内容修订 r2 安全 ⚙️ 外部命令

修复动画性能问题

卡顿的动画会损害可用性，并让界面显得缓慢。此技能指导 Claude、Codex 和 Claude Code 查找动效瓶颈并提出有针对性的修复方案。

支持: Claude Codex Code(CC)
🥉 79 青铜

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求
Review the Skillstore skill "fixing-motion-performance" from https://skillstore.io/skills/ibelick-fixing-motion-performance.md and its manifest at https://skillstore.io/api/skills/ibelick-fixing-motion-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/ibelick-fixing-motion-performance.md 已签名 manifest GET /api/skills/ibelick-fixing-motion-performance/manifest 已签名 lockfile GET /api/skills/ibelick-fixing-motion-performance/lockfile

测试它

正在使用“fixing-motion-performance”。 抽屉动画在大型容器上过渡 width。

预期结果:

  • 发现：抽屉在大面积区域上执行布局动画，这可能会迫使浏览器重复进行布局工作。
  • 建议修复：在隔离的面板上对 transform 做动画，并保持布局尺寸稳定。

正在使用“fixing-motion-performance”。 一个 reveal 效果通过滚动事件处理器更新 opacity。

预期结果:

  • 发现：滚动事件每帧驱动动画状态，可能会与滚动竞争资源。
  • 建议修复：优先使用浏览器时间线或 IntersectionObserver，然后暂停屏幕外的工作。

正在使用“fixing-motion-performance”。 模态框入场动画在整个页面上应用 blur。

预期结果:

  • 发现：大范围的动画 blur 可能触发昂贵的绘制工作并造成明显卡顿。
  • 建议修复：优先使用 opacity 和 translate，或将 blur 保持在小范围且持续时间较短。

安全审计

安全
v5 • 2026/7/23 打开版本化报告

All ten static findings are false positives caused by Markdown backticks, code fences, JavaScript template literals, and ordinary animation guidance. The skill contains no executable scripts, system reconnaissance, prompt injection, or other semantic security concerns.

1
已扫描文件
152
分析行数
0
复核项
0
已忽略误报

风险因素

⚙️ 外部命令 (6)
SKILL.md:12 SKILL.md:15 SKILL.md:124-132 SKILL.md:132-134 SKILL.md:134-142 SKILL.md:142-144
最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。
审计者: codex 查看审计历史 →
分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告
安全评估

复制报告链接

https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/ibelick-fixing-motion-performance/security.svg)](https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/ibelick-fixing-motion-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ibelick-fixing-motion-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/ibelick-fixing-motion-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
学术引用 (APA · BibTeX · CFF)

APA 引用

ibelick. (2026). fixing-motion-performance security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5

BibTeX 引用

@techreport{ibelick-ibelick-fixing-motion-performance-2026, author = {ibelick}, title = {fixing-motion-performance security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "fixing-motion-performance security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "ibelick" date-released: "2026-07-23" url: "https://skillstore.io/skills/ibelick-fixing-motion-performance/audits/5" identifiers: - type: other value: "skillstore:ibelick-fixing-motion-performance:audit:5" description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据 证据置信度: 高
55
架构
85
可维护性
87
内容
69
社区
91
规范符合性

你能构建什么

审查发布动画

在发布前审查组件，捕捉会导致布局、绘制或滚动卡顿的动画选择。

标准化动效反馈

将动效规则转化为针对共享组件和交互模式的一致审查反馈。

诊断卡顿交互

诊断卡顿的交互，并在不移除产品意图的情况下选择成本更低的动效。

试试这些提示

基础动画审查 
Review this component for animation performance issues: <file>. List violations, impact, and concrete fixes.
变更代码审计 
Audit the changed animation code in <files>. Prioritize layout thrashing, scroll-linked motion, blur, filters, and layer promotion.
聚焦重构 
Refactor this janky interaction using the existing animation library. Keep behavior the same and explain each performance tradeoff.
架构决策 
Compare two implementation options for this motion pattern. Recommend the lower-cost approach, browser constraints, and validation steps.

最佳实践

  • 测量动画元素时，先批量完成所有布局读取，再执行写入。
  • 在有意义的界面区域上实现动效时，优先使用 transform 和 opacity。
  • 使用浏览器工具和代表性设备验证对性能敏感的动效。

避免

  • 在大面积区域上持续动画化 width、top 或 left。
  • 运行滚动处理器以每帧更新动画状态。
  • 交互结束后仍在许多元素上保留 will-change。

常见问题

此技能可以分析我的应用性能吗？
不能。它会指导审查和修复，但性能分析仍需要浏览器工具和真实设备。
它需要特定框架吗？
不需要。它适用于 CSS、JavaScript、WAAPI、Motion、GSAP 以及类似的前端技术栈。
它会移除所有动画吗？
不会。它会尽可能选择保留意图且成本更低的动效。
它可以审查滚动动画吗？
可以。它会检查滚动轮询、布局工作，以及更好的时间线或 observer 模式。
它对现有代码库安全吗？
可以。该技能会要求 agent 保持在现有动画技术栈内，除非另有要求。
谁应该使用它？
前端工程师、设计系统维护者和产品设计师可以在实现或审查期间使用它。

开发者详情

作者

ibelick

许可证

MIT

Skillstore 修订

r2

版本提示

作者未声明版本。

仓库

https://github.com/ibelick/ui-skills/tree/main/skills/fixing-motion-performance/

引用

ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006

维护新鲜度

2026/7/26

使用量

10 次下载 · 137 次浏览

文件结构

📄 SKILL.md

ibelick 的更多技能

查看全部

相关技能

查看全部