animate-skill
为Next.js/React应用提供动画模式和最佳实践的技能库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：animate-skill。 它的用途是：为Next.js/React应用提供动画模式和最佳实践的技能库。 完整的 Skill 内容见：https://321skill.com/skills/animate-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个Next.js的卡片列表，想在鼠标悬停时让卡片有轻微上浮和阴影放大的效果，并且希望动画流畅自然。”，它会根据技能库中的“悬停上浮效果”模式，提供使用 CSS 自定义属性和 transform 属性的具体代码示例，并解释为何选择特定的缓动函数和时长。
介绍
animate-skill 旨在解决开发者在 Next.js 和 React 应用中实现流畅、高性能且可访问动画时面临的挑战。它提供了从基础 CSS 动画到复杂 Framer Motion 库的全面指导，帮助开发者避免性能陷阱并提升用户体验。
该技能库通过提供详细的代码示例、缓动函数速查表和常见动画模式（如悬停效果、模态框动画、列表交错动画）来指导使用。开发者可以直接复制代码片段，或参考其最佳实践原则来构建自己的动画。
它非常适合前端开发者、React/Next.js 项目工程师以及任何希望在 Web 应用中添加专业级动画效果的人员。无论是刚接触动画的新手，还是寻求优化现有动画的资深开发者，都能从中获益。
与零散的博客文章或官方文档相比，animate-skill 的核心优势在于其系统性和实践性。它并非简单的 API 罗列，而是基于 Emil Kowalski 的课程，提炼出经过验证的“黄金法则”和可直接复用的模式，将动画理论与具体实现紧密结合。
核心特点
该技能库基于 Emil Kowalski 的“Animations on the Web”课程，提炼出一套经过验证的“黄金法则”（如退出比进入快、只动画 transform 和 opacity 等），并提供了可直接复用的 CSS 自定义属性和 Framer Motion 代码模式，将动画理论与 Next.js/React 具体实践深度结合。
注意事项
该技能库主要聚焦于 Next.js/React 技术栈的动画实现，对于其他框架（如 Vue、Svelte）或原生 Web 动画（如 Web Animations API）的指导相对有限。
常见问题
如何在 Next.js 项目中实现页面切换动画？
可以使用 Framer Motion 的 AnimatePresence 组件结合路由事件来包裹页面组件，实现元素的进入和退出动画。
如何保证动画性能？
遵循技能库的“黄金法则”，优先使用 transform 和 opacity 属性进行动画，并利用 CSS 自定义属性管理缓动函数。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/animate-skill/raw/index.md 读取 animate-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/animate-skill/raw/index.md（查看排版版本）