用途：审查一个功能并添加有目的的动画。它识别缺少反馈、过渡突兀、层级关系不清的静态区域，并按需加入 motion/react 或 CSS 动画。核心理念是“一套精心编排的体验胜过到处散落的动画”，每个动画都要能回答“它为什么存在”。
主要能力与流程：先读取动画规则、动效模式、交互物理与前端设计反模式等参考资料；再通过 AskUserQuestion 确认动效基调（利落自信、顺滑精致、活泼有趣、极简功能）；随后分析代码，找出缺失反馈（按钮无响应、表单无加载态、开关无过渡）、突兀切换（瞬间显示/隐藏、页面无入场编排、弹窗/抽屉无过渡、标签页瞬间换内容）、关系不清（空间层级、父子关联、列表无错落）与可惊喜时刻，并给出聚焦的动画计划（1 个主秀时刻 + 反馈层 + 过渡层 + 减弱动效替代方案）；最后实现与验证（截图、交互手感、减弱动效、性能 60fps、时长是否合适）。
用法要点：简单过渡用 CSS 类（如 active:scale-[0.97]、hover 位移阴影、下拉 scale/opacity），JS 控制用 motion/react（如弹窗入场 initial/animate/exit、列表 staggerChildren、whileTap spring）。时长参考：即时反馈 100-150ms，状态变化 150-200ms，布局变化 200-300ms，入场 300-500ms，退出约为入场的 75%。手风琴用 grid-template-rows 0fr→1fr 实现，避免动画 height。
限制与禁止：不得使用 bounce 或 elastic 缓动；不得动画布局属性（用 transform）；UI 反馈不超过 500ms；不得无目的地加动画；必须支持 prefers-reduced-motion（否则视为无障碍违规）；不要给所有元素加动画；除有意为之，不要在动画期间阻塞交互。整体强调以用户确认的基调为前提，只动画 transform 与 opacity，并做视觉与减弱动效验证。