用途：为网页动效提供“品味与技术”参考，主张动效应服务于澄清而非装饰，追求小而快、有目的，风格克制，不用弹跳/弹簧过冲做装饰，也不做争抢注意力的无限循环。定位为 AI 消费的参考，性能上限交由 rules/agent/frontend-excellence.md 管理，只交叉引用其预算而不复述。
主要能力：区分两类工具并按影响力匹配。纯 CSS 用于揭示/交错（最省、无 JS），通过 animation-delay: calc(var(--i) * 60ms) 配合关键帧 fade-up 实现 hero/列表入场，适用于不需要交互的场景。Framer Motion 用于有状态/交互动效，采用声明式 variants + initial/animate、共享布局与手势，仅在 CSS 无法表达状态时优先使用。
无障碍要求：prefers-reduced-motion 为强制项，每个动效示例都必须遵循，需将过渡收敛为瞬时（仅透明度或无）：@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }。在 Framer Motion 中用 useReducedMotion() 控制 variants 并移除 transform。
包体积纪律：Framer Motion 较重，使用 LazyMotion + m. 组件（按需加载 domAnimation 特性）替代完整 motion 导入，以符合前端性能预算。
发布前审计：检查 AnimatePresence 缺口——除非离场元素被 <AnimatePresence> 包裹，否则退出动画会静默失效，需检查每个条件渲染/路由卸载；并实际测试 reduced-motion 路径，而非仅声明。参见 rules/agent/frontend-excellence.md 与 frontend-aesthetics 技能。限制：资料未提供具体性能数值、收费标准与平台信息，暂未提供。