frontend-ui-animator

此技能作为现代 Web 项目的专属前端动画专家。它提供结构化的工作流程，用于审计、规划并实现能提升用户体验，且不牺牲性能或无障碍性的动态设计。该技能专为使用 Next.js App Router 的开发人员所设计，旨在协助整合高质量、高性能的动画，并使用 Tailwind CSS 工具类、Framer Motion 或原生 CSS 关键帧。

• 执行现有项目结构的全面动画审计，识别适用于首屏介绍、悬停反馈、内容揭露与导航转场的组件。

• 提供分阶段开发方法：分析与审计、规划与组件映射、技术实现，以及包括累积布局偏移 (CLS) 与减少动态 (reduced-motion) 检查的最终验证。

• 强制执行严格的性能准则，专注于如 opacity 和 transform 等硬件加速属性，以防止布局抖动或性能下降。

• 默认支持无障碍标准，确保所有动画实现均包含对 prefers-reduced-motion 媒体查询的支持。

• 提供用于交错式子组件、使用 IntersectionObserver 的滚动揭露 Hook，以及状态驱动微交互的可复用模式。

• 与项目技术栈无缝整合，例如使用 Framer Motion 进行复杂编排，或使用原生 CSS/Tailwind 进行轻量化与高效率的转场。

• 通过记录动画模式并利用定义好的 Tailwind 配置预设值，保持整个应用程序的视觉一致性。

• 用户在要求特定动态设计（例如“制作页面转场动画”、“添加悬停效果”或“通过微交互增强 UI”）时应触发此技能。

• 预期输入为针对特定组件或区块的动画请求指令，而输出则包含文档化的审计报告、实现计划以及对应的代码（CSS、Tailwind 或 React Hook）。

• 坚持“节制”的核心哲学，强调有目的、有意义的动态优于过度或装饰性的动画。开发人员应确保项目环境整洁，并在初始分析阶段识别现有的动画库。此技能假设用户具备 React Hook 与 Next.js 组件层级的基本知识。