Frontend UI Animator 是一个用于在 Next.js + Tailwind + React 项目中分析并实现有目的性 UI 动画的技能。其核心理念是“你不需要在所有地方都加动画”，主张把动画集中在真正影响用户体验的关键时刻，并按优先级排序：1. 首屏引导（第一印象、品牌个性）；2. 悬停交互（反馈、可发现性）；3. 内容揭示（引导注意力、降低认知负荷）；4. 背景效果（氛围、层次感）；5. 导航过渡（空间感知、连续性）。
使用方式上，该技能按阶段顺序执行，每个阶段完成后再进入下一阶段。
第一阶段：分析。扫描项目结构，识别 app/ 中的所有页面和 components/ 中的组件；检查现有配置，查看 tailwind.config.ts 中已有的动画和关键帧；按优先级类别列出动画候选组件；记录约束条件，例如已安装的动画库（framer-motion 等）。输出为动画审计表，可参考 references/component-checklist.md。
第二阶段：规划。将动画映射到具体组件，分配动画模式；确定触发方式（加载、滚动进入视口、悬停、点击）；估算工作量（低：仅 CSS；中：需要 hooks；高：需要库）；提出分阶段上线方案，先做快速见效的部分。输出为组件到动画的映射实施计划。
第三阶段：实现。扩展 Tailwind 配置，添加关键帧和动画工具类；添加 reduced-motion 支持，无障碍优先；按需创建可复用 hooks，如 useScrollReveal、useMousePosition；按组件应用动画，遵循 references/animation-patterns.md 中的模式。性能规则要求只使用 transform 和 opacity 等属性，例如 transform: translateY(20px)、opacity: 0.5、filter: blur(4px)；不要动画化布局属性，如 margin-top、height、width。
第四阶段：验证。在浏览器中测试，对所有动画进行视觉 QA；测试 reduced-motion，验证 prefers-reduced-motion 生效；检查 CLS，确保动画不引起布局偏移；进行性能审计，确保滚动动画不卡顿。
该技能提供快速参考。动画触发方式包括：页面加载（使用 CSS animation 配合 animation-delay 实现交错）、滚动进入视口（IntersectionObserver 或 react-intersection-observer）、悬停（Tailwind hover: 工具类或 CSS :hover）、点击/触摸（用 useState 驱动状态）。常见模式包括交错子元素（通过 style 设置 animationDelay 为索引乘以 100ms，并应用 animate-fade-slide-in 类）和滚动揭示 hook（useScrollReveal 使用 IntersectionObserver 监听元素是否进入视口，返回 ref 和 isVisible，再据此切换 animate-fade-in 或 opacity-0）。
技术栈方面：CSS 动画用于简单效果的默认方案；Tailwind 工具类用于悬停状态和基础动画；Framer Motion 用于复杂编排、手势和布局动画；GSAP 用于基于时间线的序列（如果已安装）。
无障碍为必需项，需始终在全局 CSS 中包含 prefers-reduced-motion 媒体查询，将动画和过渡时长降至 0.01ms，迭代次数设为 1。
资源方面提供动画模式（references/animation-patterns.md）、审计模板（references/component-checklist.md）和 Tailwind 预设（references/tailwind-presets.md）。
适用场景为 Next.js + Tailwind + React 项目中的 UI 动画添加与优化。限制方面：资料未提供具体收费、价格、平台支持范围或效果保证等信息。