技能说明
来自 mblode/agent-skills 的界面动效技能，专注动效决策、实现、调试和评审；不负责整体视觉方向、配色、排版或产品动作语义。
关于此技能
专门处理网页界面中“何时动、怎么动、如何验证”的问题，帮助交互反馈清楚而不过度装饰；不负责整体视觉风格、配色、排版或产品动作语义。
核心能力
判断动效价值
围绕反馈、方向和连续性判断是否值得动画；高频交互优先即时响应，避免纯装饰动效。
实现与调试
为弹窗、抽屉、拖拽、滚动等选择时长与缓动，优先可中断的 CSS transition，再按需要使用 WAAPI、弹簧或关键帧。
录屏动效还原
从录屏提取画面并估算运动曲线，产出实现建议和交接说明。此工作流需要 ffmpeg 与 Python OpenCV、NumPy、SciPy。
兼顾无障碍与性能
检查 prefers-reduced-motion、触屏操作、动画中断与性能；避免 transition: all 和动画布局属性。
适用场景
交互状态反馈
为按钮、弹窗、抽屉、下拉菜单、拖拽和滚动效果设计一致、可中断的动效。
动效问题排查
处理动画迟钝、突兀、抖动或不连贯，按触发频率和设备行为调整实现方式。
根据录屏还原动效
测量现有界面的运动节奏与曲线，并形成可供开发实现的说明。
使用步骤
- 01
判断是否需要动效
先确认动效是否服务于反馈、方向或连续性，再考虑频率和减少动态效果偏好。
- 02
选择时长、缓动和实现方式
根据交互选择节奏，优先可中断的 CSS transition；复杂运动再选 WAAPI 或弹簧。
- 03
读取对应参考并实现
根据组件或效果加载具体参考，避免一次性套用通用动画。
- 04
验证中断与设备行为
快速重复触发，检查开合成对、触屏和 reduced-motion 状态，并确认性能开销。
常见问题
常规动效需要额外安装依赖吗？+
不需要。只有从录屏做曲线反推时，才需要 ffmpeg 与 Python 的 OpenCV、NumPy、SciPy。
它会帮我决定整套网页风格吗？+
不会。配色、排版和整体视觉方向属于 UI Design；此技能专注动效时机、曲线、手势和实现质量。
可以动画化所有 CSS 属性吗？+
不建议。避免 transition: all 和频繁触发布局的属性，优先 transform 与 opacity，并检查减少动态效果设置。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code
已提供来源链接
命令可直接复制
2026/09/20
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add https://github.com/mblode/agent-skills --skill ui-animation