Motion Patterns 是一套面向 React / Next.js 的生产级 UI 动画模式集合，定位为“最常见 UI 动画需求的可复制粘贴模式”。它本身不定义动画 token，而是全部基于 motion-foundations 提供的 token 与弹簧（springs）参数构建，要求所有时长、缓动、距离、缩放值都从 motion-foundations 导入，不在本技能内新增原始数值。
用途与激活场景
当需要为按钮、卡片、模态框或 Toast 通知添加动画；构建列表错峰（stagger）入场；在 Next.js App Router 中设置页面过渡；为条件渲染内容添加入场或退出动画；实现滚动揭示、滚动联动进度或粘性故事区块；构建展开卡片、手风琴或共享元素过渡时，可启用本技能。
主要能力与输出
该技能产出：面向所有标准 UI 组件的可访问、SSR 安全的动画；使用 AnimatePresence 包裹且退出行为正确的条件渲染；适用于 Next.js App Router 的页面过渡包装组件；使用 useScroll + useTransform 的滚动揭示与滚动联动模式；用于展开与交叉淡入元素的布局动画模式（layout、layoutId）。
核心原则与规则
每个模式都从 motion-foundations 导入，不使用原始数字。每个条件渲染都用 AnimatePresence 包裹并带 key。退出动画始终与入场动画一同定义，绝不事后补充。layout 仅用于小型、孤立的位移，大型子树使用显式 transform。
具体规则包括：条件渲染必须用 AnimatePresence 包裹，且直接子元素带 key，否则退出动画不会触发；定义 initial + animate 时必须同时定义 exit；页面过渡使用 mode="wait"，确保退出完成后才进入；不要在超过约 5 个子元素或深层嵌套 DOM 的子树使用 layout，改用显式 x/y transform；错峰间隔保持在 0.05s 到 0.10s 之间；模态框必须包含焦点陷阱、Escape 关闭、滚动锁定、role="dialog"、aria-modal="true"；滚动揭示使用 viewport={{ once: true }}；所有 token 值从 motion-foundations 导入，不使用内联数字。
决策指引
元素出现/消失用 AnimatePresence；列表按序加载用 stagger variants；路由间导航用页面过渡包装；元素原地改变尺寸用 layout 属性；同一元素跨页面上下文移动用 layoutId；元素滚动进入视口时入场用 whileInView；数值与滚动位置绑定用 useScroll + useTransform。mode 选择上：wait 用于页面过渡、内容切换（一次一个）；sync 用于堆叠通知、列表项（允许重叠）；popLayout 用于从重排列表中移除的项。
代码示例覆盖
文档给出按钮反馈、错峰列表、模态框、Toast 堆叠、Next.js App Router 页面过渡、滚动揭示、滚动进度条、展开卡片、共享元素交叉淡入、手风琴等示例，并提供一个端到端示例：挂载时错峰入场、处理条件存在、并尊重减少动态效果（reduced motion），结合 token、springs、AnimatePresence 与 motion-foundations 的无障碍 hook。
限制与非目标
本技能不覆盖：token 与弹簧定义（见 motion-foundations）；拖拽交互、滑动手势、可重排列表（见 motion-advanced）；文本动画（逐词/逐字揭示、计数器）（见 motion-advanced）；SVG 路径绘制或变形（见 motion-advanced）；自定义动画 hook（见 motion-advanced）；不使用 motion/react 的纯 CSS 过渡。
相关技能
motion-foundations 定义所有 token、springs、useSafeMotion hook 以及 SSR 守卫，本技能每个模式都依赖它，必须先设置。motion-advanced 在本技能模式基础上扩展拖拽、手势、SVG、文本、自定义 hook 与命令式序列，不重新定义本技能的任何模式。