用途：为界面动画提供系统化指导，让动效在时间、性能与无障碍上都得体。核心原则是模仿物理运动、每个动画都要有明确意义、UI 动画控制在 300ms 内、手势动画用弹簧以支持打断，并始终尊重 prefers-reduced-motion。
主要能力：按动画类型给出技术选型——微交互用 CSS/Tailwind，进入/退出用 Motion 加 AnimatePresence，布局变化用 layout 属性，共享元素用 layoutId，手势用弹簧。提供缓动决策树（用户操作用 ease-out，屏幕内移动用 ease-in-out，循环用 linear，手势用弹簧，悬停用 CSS ease 150ms）、时长指南（微反馈 100-150ms，模态 200-300ms，退出快于进入）以及弹簧配置（duration/bounce 或 stiffness/damping，二者不可混用）。
使用方式：先分类动画类型，再选缓动与时长，然后实现并包裹 AnimatePresence，最后做无障碍与验证。可从设计截图出发用 ui_to_artifact，用 ui_diff_check 对比预期与实现。
适用场景：按钮、开关、模态、下拉、手风琴、标签指示器、拖拽滑动等常见 UI 动效。
限制与注意：只动画 transform 与 opacity；不要动画 width、height、top、left 等；opacity:0 元素需加 pointerEvents:none；重复 layoutId 会导致元素瞬移；退出动画必须包在 AnimatePresence 中；SSR 用 initial={false}；触摸目标建议 48dp/44pt，WCAG 2.2 AA 最低 24px。文档为纯指导型技能，不含脚本，具体代码示例见其 references/recipes.md。