关于 web-motion-auditor
Web Motion Auditor 是一项技能，用于检查 Web 应用的动画状态，并提供附带文件引用的具体修复建议。它依据动效质量标准检查无障碍和桌面、移动屏幕宽度下的性能。
主要功能
- 01检查界面动画状态
- 02检查减少动态效果设置与焦点可见性
- 03评估动效对交互的影响
- 04检查桌面和移动端性能
- 05提供带文件引用的修复建议
适用场景
- 01审查 Web 应用的过渡效果
- 02检查动效无障碍性
- 03评估不同屏幕宽度下的动画性能
- 04确定具体动画修复项的优先级
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/web-motion-auditor确认已加载。
详细介绍
Web 动效审查
工作流
- 运行或打开应用。
- 检查动画状态：加载、悬停、焦点、点击、路由切换、滚动、空状态／加载中／成功／错误。
- 检查无障碍性：
prefers-reduced-motion- 焦点可见性
- 动效不会妨碍阅读或交互
- 检查桌面端和移动端宽度下的性能。
- 尽可能截取屏幕截图或录制视频。
- 根据动效质量评分标准打分。
- 提供包含文件引用的具体修复建议。
常见修复方法
- 缩短过渡时长。
- 使用变换／不透明度，而非布局开销较大的属性。
- 减少交错动画数量。
- 添加减少动效的分支。
- 用能够说明状态的动效替代装饰性动效。
- 将复杂的叙事性动效移至 Remotion 或受控的首屏场景中。
评论
支持 Markdown