Motion ref skill

Motion Ref

把用户的产品场景翻译成合适的 UI 动效方案。默认用户不懂动画术语；先理解问题，再读取最小必要参考，最后给出可直接落地的方案。

核心原则

1. 有目的：每个动画都要解决问题，例如确认操作、缓解等待、表达层级、引导注意。
2. 快且轻：常规交互控制在 200-500ms；超过 500ms 容易显得卡，低于 100ms 用户难感知。
3. 一致性：同类交互使用同一套时长、缓动和反馈强度。
4. 无障碍：代码方案必须包含 prefers-reduced-motion: reduce 适配。

工作流程

1. 判断用户是在要 代码方案 还是 视频 motion prompt；不明确时默认代码方案。
2. 判断场景是否清晰：
   • 清晰：读取最相关的场景路由或分类参考，直接推荐 1-3 个动效。
   • 模糊：先给 2-3 个方向让用户选，不要一次读取全部参考。
   • 组合需求：按涉及的 UI 部件分别读取对应分类参考。
3. 只读取当前任务需要的文件。禁止为了保险读取全部 ref/ 或全部 references/。
4. 输出时使用产品语言说明“解决什么问题”，再给实现代码或视频提示词。

按需读取导航

先读哪个 reference

用户需求	读取文件	读取条件
用户用产品问题描述需求，例如“加载白屏”“点了没反应”“想高级一点”	references/scene-routing.md	需要从场景匹配动效，或需要把模糊描述转成候选方向
用户要求最终方案、代码、可调参数、视频 prompt	references/output-format.md	已经选定动效，或准备输出最终答案

再读哪个分类 ref

读取 references/scene-routing.md 后，根据匹配结果只打开相关分类文件。若用户已经明确说出分类或动效，也可直接读取对应分类文件。

分类	读取文件	读取条件
加载、等待、白屏、进度、聊天输入中、语音识别	ref/01-loading.md	等待状态或加载反馈
按钮点击、提交中、成功、失败、长按确认、复制成功	ref/02-button-feedback.md	操作反馈发生在按钮或点击动作上
数字、文字、倒计时、标题、滚动字幕、光泽文字	ref/03-text-data.md	文本或数据本身需要动态变化
弹窗、Toast、Tooltip、Popover、抽屉、命令面板	ref/04-overlay.md	独立浮层或提示层进入/离开
页面跳转、Tab、侧栏、共享元素、底部导航	ref/05-navigation.md	页面、视图或导航状态切换
输入框、表单校验、开关、单选、验证码、滑块、步骤	ref/06-form-input.md	表单控件或输入流程
滚动出现、阅读进度、吸顶缩小、图片揭示	ref/07-scroll.md	动效由滚动触发或跟随滚动
图标、Logo、角标、点赞、铃铛、复制图标	ref/08-icon.md	小图标或标识发生状态变化
轮播、列表增删、拖拽排序、手风琴、头像堆叠、滑动操作	ref/09-carousel-list.md	列表或集合项交互
主题、空状态、在线状态、收藏、已读未读、成功失败状态	ref/10-state.md	全局或组件状态变化
背景、高级感、发光、粒子、磁性光标、扫描线、3D 悬浮	ref/11-ambient.md	氛围、品牌感或背景质感
图表、仪表盘、统计卡片、折线、环形图、排名、时间线、散点、分布、占比、雷达图	ref/12-data-viz.md	数据可视化入场、趋势对比、分布展示或数值强调
淡入、上滑、缩放、弹性、序列、模糊、折叠展开	ref/13-enter-exit.md	通用元素出现、消失或列表入场

输出要求

输出最终方案前，必须读取：

1. 至少一个相关 ref/*.md 分类文件。
2. references/output-format.md。

从 ref/*.md 中提取视觉描述、适用场景、时长/参数、实现要点。不要凭记忆补动画参数。若多个动效组合跨分类，只读取涉及到的分类文件。