用途：提供使用 Motion（原 Framer Motion）与 View Transitions API 构建高性能、可访问动画的实践规则，适用于实现组件动画、页面过渡、布局动画、手势交互、微交互与动效可访问性等场景。
主要能力：资料涵盖 6 条规则，分属 3 类。布局动画（rules/motion-layout.md）处理共享布局过渡、FLIP 动画与 layoutId；手势交互（rules/motion-gestures.md）处理拖拽、悬停、点击结合弹簧物理；退出动画（rules/motion-exit.md）处理 AnimatePresence 与卸载过渡；View Transitions API（rules/view-transitions-api.md）处理页面导航与跨文档过渡；动效可访问性（rules/motion-accessibility.md）处理 prefers-reduced-motion 与认知负荷；动效性能（rules/motion-performance.md）关注 60fps、GPU 合成与避免布局抖动。技能还提供决策表，区分何时用 Motion、何时用 View Transitions API。
使用方式：组件动画示例从 motion/react 导入 motion 与 AnimatePresence，用 initial/animate/exit/transition 定义变体，并用 layout、layoutId 实现共享布局动画。页面导航可结合 React Router 的 Link 的 viewTransition 属性，配合 ::view-transition-old/new(root) 的 CSS 动画。可访问性示例使用 useReducedMotion，在用户偏好减少动效时把 transition 设为 duration: 0。
关键原则与限制：只动画 transform 与 opacity，禁止动画 width、height、top、left；变体集中定义，不内联在每个组件；退出动画必须用 AnimatePresence 包裹；优先使用弹簧的 stiffness/damping 而非 duration；必须尊重 prefers-reduced-motion。性能预算包括过渡时长小于 400ms、JS 包约 16KB gzip、首帧延迟 0ms、丢帧低于 5%。反模式包括直接动画布局属性、缺少 AnimatePresence、忽略减少动效偏好、内联 transition 对象、用 duration 写弹簧、同步调用 startViewTransition。资料未提供具体收费、价格与平台信息。