用途:该技能面向 Motion React 的组件与 hooks 使用,覆盖 motion、AnimatePresence、布局动画、useScroll、useReducedMotion、手势、variants,以及 React/Next 的客户端与 SSR 边界。它定位为紧凑的路由器加领域检查清单,仅在任务匹配时才加载对应参考文档。
主要能力:提供存在与布局动画、滚动与手势、减少动效、variants 与 MotionValue 状态归属、Next.js 路由与 SSR 边界等主题的参考文件;附带审计 CLI、审计报告模板、人工审查清单、起始示例与评测集。
使用方式:先确认目标仓库已安装的包、框架与运行时版本、本地设计令牌、无障碍策略与既有动效模式;确认包导入路径与 React/客户端边界;按需选择 presence、layout、gesture、scroll 或基于值的动效;尊重减少动效与状态归属;用 resize、中断、路由切换与 hydration 验证布局投影。审计命令:node scripts/audit.mjs doctor --root . --format json;node scripts/audit.mjs scan --root . --format markdown;node scripts/audit.mjs scan --root . --format json --output web-motion-react-audit.json。脚本发现仅作线索,改动前需对照当前代码核实。
适用场景:React/Next 项目中的动效实现与审查,尤其是 AnimatePresence、布局动画、滚动与手势、减少动效及跨路由/SSR 边界问题。
限制与注意:AnimatePresence 需要稳定 key 与真实卸载;布局动画依赖稳定布局盒,不应与 CSS 过渡冲突;不要通过 React state 传递高频动效值。命令式时间线与插件密集场景宜用 GSAP,简单静态过渡宜用 CSS,React 之外的底层 Animation 控制宜用 WAAPI。API 细节需对照目标仓库已安装版本核实。官方文档与价格等信息暂未提供。