用途:在 Web 应用中实现动画、过渡、微交互与动效设计。触发场景包括为 UI 元素添加动画或过渡、组件挂载/卸载的进入退出动画、页面或路由切换动画、Framer Motion/GSAP/CSS 动画 API 咨询、滚动驱动动画与视差、骨架屏与加载态、弹簧物理与缓动曲线、GSAP 多步时间线、悬停/按压/开关等微交互。纯 CSS 布局样式(无动效)或 Canvas/WebGL 渲染不适用。
主要能力:提供 CSS 过渡与关键帧、Framer Motion 进入退出与列表错峰、CSS 滚动驱动动画与 IntersectionObserver 回退、AnimatePresence 页面过渡、微交互与 GSAP 时间线等具体代码模式。核心原则:动效须有目的;必须尊重 prefers-reduced-motion(WCAG 2.1 AA);只动画 transform 与 opacity;优先弹簧缓动;保证 60fps。
使用方式:按需加载 references/easing-library.md(缓动、弹簧配置、时长)与 references/advanced-patterns.md(微交互、GSAP 时间线)。首次激活时可用 ls ~/.claude/skills/ ~/.agent/skills/ ~/.agents/skills/ .claude/skills/ .agent/skills/ .agents/skills/ 2>/dev/null 检查配套技能,缺失时可用 npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name> 安装。
限制与注意:AnimatePresence 直接子元素需稳定 key;CSS 滚动时间线仅 Chromium 支持,需 IntersectionObserver 回退;will-change 不宜滥用;Framer Motion layout 与 CSS transform 过渡冲突;GSAP 时间线在 React 中需清理。具体收费与平台支持资料未提供。