mcpField
F
fixing-motion-performance

fixing-motion-performance

github.com/podo开发29167 次安装4 天前更新
代码仓库

关于 fixing-motion-performance

fixing-motion-performance 是用于审查动画性能并提出具体修复方法的 Agent 技能，重点检查布局抖动、合成器属性使用、滚动关联动画和高开销模糊效果。

主要功能

  1. 01检测布局抖动
  2. 02检查合成器属性用法
  3. 03发现滚动关联动画问题
  4. 04识别高开销模糊效果
  5. 05提出减少掉帧的修复方法

适用场景

  1. 01审查动画性能
  2. 02查找掉帧原因
  3. 03检查滚动关联动画模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill fixing-motion-performance

安装后在 Claude Code 中输入/fixing-motion-performance确认已加载。

附带文件stub.yaml

详细介绍

修复动效性能

目录占位条目 — 完整技能：ibelick/ui-skills

决策树

  1. 是否已安装完整技能？

    • 全局：f=~/.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/fixing-motion-performance/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已以 fixing-motion-performance 名称安装，调用它并继续
    • pointer → 转到第 2 步

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/fixing-motion-performance ] && echo "global" || echo "project"

    全局：

    npx skills add ibelick/ui-skills --skill fixing-motion-performance -g -y

    项目：

    npx skills add ibelick/ui-skills --skill fixing-motion-performance -y

    Claude Code： 发送一条以 ! 开头的聊天消息作为命令，即可直接运行，无需离开当前对话。

注意

  • 许可证： MIT

安装后调用

  • 技能名称：fixing-motion-performance
  • 触发短语："motion performance"、"animation performance"、"layout thrashing"、"compositor properties"

功能

审查动画中的布局抖动、合成器属性使用不当、滚动联动动效反模式以及开销高昂的模糊效果。提供具体修复方案，将动画移至 GPU 上运行，并消除掉帧，从而实现流畅、达到生产级别的动效。

不适用场景

  • 选择缓动、计时或动效设计原则（而非性能）→ 使用 design-motion-principles
  • 特定于库的 GSAP 工作（ScrollTrigger、时间线、useGSAP）→ 使用 gsap-skills

评论

支持 Markdown