motion-dev-animations-skill
为 Claude Code 注入 Motion.dev 动画生成能力
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：motion-dev-animations-skill。 它的用途是：为 Claude Code 注入 Motion.dev 动画生成能力 完整的 Skill 内容见：https://321skill.com/skills/motion-dev-animations-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“创建一个英雄区，标题从下方淡入，副标题延迟0.2秒出现，背景有缓慢的视差滚动效果。”它会自动询问你的框架（如React/Next.js），然后生成包含 motion.div、useInView、spring 物理参数的完整代码，并添加 prefers-reduced-motion 降级和性能注释。你也可以说：“给这个卡片组件添加悬停抬起和阴影效果”，它会输出带 whileHover 和 transition 的 TypeScript 组件。
介绍
Motion.dev Animations Skill 是一个专为 Claude Code 设计的动画生成技能，它让开发者能够通过自然语言快速创建生产级 Web 动画。Motion.dev 是 Framer Motion 的继任者，拥有每月超千万下载量，支持 React、Next.js、Svelte、Astro 等主流框架。但编写高质量的动画代码往往需要熟悉弹簧物理、GPU 加速属性、无障碍支持等复杂细节，而本技能正是为了解决这一痛点——它将 Motion.dev 的官方模式与最佳实践融入 Claude Code 的上下文，使 AI 能从你的简单描述中直接生成可用的 TypeScript/JSX 动画代码。
使用方式非常直观：安装技能后，在 Claude Code 中说出“创建一个英雄区淡入动画”、“为这个页面添加视差滚动效果”或“实现拖拽排序列表”，AI 会自动询问你的框架类型、动画意图和设计目标，然后规划动画策略，生成代码，并验证性能（60fps+）和无障碍支持（prefers-reduced-motion）。整个过程无需翻阅文档或手动调整弹簧参数，真正做到“说得出，就能动”。
本技能适合所有在前端项目中需要动画效果的开发者，尤其是前端开发工程师、UI 设计师和全栈开发者。无论是构建产品主页的入场动画、交互组件的悬浮效果，还是实现滚动驱动的复杂动效，都能大幅提升效率。它也适合快速原型设计和教学演示场景，让非专业动效设计师也能产出流畅的动画。
使用建议：确保你的项目已安装 Motion.dev（v11 及以上），且 Claude Code 环境已正确配置技能目录。本技能生成的代码默认使用 GPU 加速属性（transform、opacity、filter）以避免布局抖动，并内置了无障碍降级处理。初次使用时，建议从一个简单的英雄区动画开始，逐步探索更复杂的视差、拖拽和滚动效果。注意，本技能不适用于非 Web 平台（如原生移动端）的动画，且需要 Claude Code 的联网能力获取最新 API 参考。
核心特点
相比其他动画辅助技能，它专门针对 Motion.dev（Framer Motion 继任者）的 v11 API 进行深度优化，能生成 120fps GPU 加速的代码，并且内置了 prefers-reduced-motion 支持和键盘导航检查，同时采用渐进式加载策略，仅消耗 ~2,000 tokens 的核心指令，比全量加载节省 87% 的上下文开销。
注意事项
不适用于非 Web 平台（如原生移动端、Flutter）的动画，且需要项目已安装 Motion.dev v11+ 依赖，生成的代码可能无法直接兼容老旧框架版本。
常见问题
这个技能支持哪些框架？
主要支持 React 19+、Next.js 15+、Svelte 5+、Astro 4+，以及任何使用 Motion.dev 的 Web 项目。
需要额外安装 Motion.dev 吗？
需要，项目本身必须安装 motion（v11），技能只负责生成代码，不自动安装依赖。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/motion-dev-animations-skill/raw/index.md 读取 motion-dev-animations-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/motion-dev-animations-skill/raw/index.md（查看排版版本）