motion-dev-animations-skill 可以免费使用吗？用的什么许可证？

motion-dev-animations-skill 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

motion-dev-animations-skill 还在维护吗？

超过半年未提交。motion-dev-animations-skill 最近一次提交是在 2026年3月30日。

motion-dev-animations-skill 适合用来做什么？

为 Next.js 落地页添加首屏入场动画为营销网站实现与滚动联动的视差或进度效果制作可拖拽排序的列表或悬停、磁吸按钮交互在 Svelte 或 Astro 项目中快速添加无障碍的一致动效

motion-dev-animations-skill 怎么安装和运行？

将技能克隆到 Claude Code 的 skills 目录: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations 用自然语言向 Claude Code 描述所需动画

在哪里获取 motion-dev-animations-skill？

源代码和安装说明在 GitHub 上：https://github.com/199-biotechnologies/motion-dev-animations-skill

199-biotechnologies/motion-dev-animations-skill

为 Claude Code 提供的技能，可基于 Motion.dev 生成 React、Next.js、Svelte 等框架的网页动画代码。

在 GitHub 查看

Star: 194
Fork: 34
未关闭 Issue: 0
最近提交: 7个月前

这是什么？

这是一个 Claude Code 技能包，让助手掌握 Motion.dev 的动画写法，用户用自然语言描述需求（如首屏入场、视差滚动、可拖拽列表），即可生成 TypeScript 动画代码。支持 React 19+、Next.js 15+、Svelte 5+ 和 Astro 4+，Vue 可通过 motion-v 包使用。

生成的代码优先使用 transform、opacity、filter 等 GPU 加速属性，遵循 prefers-reduced-motion 设置，并处理键盘焦点。覆盖的场景包括入场动画、滚动效果、手势交互、微交互，以及 FLIP 列表重排、AnimatePresence 手风琴和 layoutId 标签切换等布局动画。

技能采用按需加载：核心指令先加载，示例、API 参考、弹簧参数预设、起始模板和配置校验脚本仅在需要时读取。安装方式是克隆到 Claude Code 的 skills 目录，或作为 git submodule 添加到项目中。

核心功能

01根据自然语言描述在 Claude Code 中生成 Motion.dev 动画代码
02支持 React、Next.js App Router、Svelte、Astro，Vue 可通过 motion-v 使用
03覆盖入场、滚动、手势、微交互和布局动画
04使用 transform、opacity 等 GPU 友好属性，并遵循 prefers-reduced-motion
05附带示例模式、弹簧参数预设、起始模板和配置校验脚本

适用场景

为 Next.js 落地页添加首屏入场动画
为营销网站实现与滚动联动的视差或进度效果
制作可拖拽排序的列表或悬停、磁吸按钮交互
在 Svelte 或 Astro 项目中快速添加无障碍的一致动效

快速上手

1
将技能克隆到 Claude Code 的 skills 目录
git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations
2
用自然语言向 Claude Code 描述所需动画

使用前须知

这是一个 Claude Code 技能，只能在 Claude Code 中使用，不能作为独立库运行。
README 仅列出 React、Next.js、Svelte、Astro 的支持，Vue 需使用另一个包，其他框架未被覆盖。

常见问题

motion-dev-animations-skill 是什么？: 为 Claude Code 提供的技能，可基于 Motion.dev 生成 React、Next.js、Svelte 等框架的网页动画代码。这是一个 Claude Code 技能包，让助手掌握 Motion.dev 的动画写法，用户用自然语言描述需求（如首屏入场、视差滚动、可拖拽列表），即可生成 TypeScript 动画代码。支持 React 19+、Next.js 15+、Svelte 5+ 和 Astro 4+，Vue 可通过 motion-v 包使用。
motion-dev-animations-skill 可以免费使用吗？用的什么许可证？: motion-dev-animations-skill 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
motion-dev-animations-skill 还在维护吗？: 超过半年未提交。motion-dev-animations-skill 最近一次提交是在 2026年3月30日。
motion-dev-animations-skill 适合用来做什么？: 为 Next.js 落地页添加首屏入场动画为营销网站实现与滚动联动的视差或进度效果制作可拖拽排序的列表或悬停、磁吸按钮交互在 Svelte 或 Astro 项目中快速添加无障碍的一致动效
motion-dev-animations-skill 怎么安装和运行？: 将技能克隆到 Claude Code 的 skills 目录: git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations 用自然语言向 Claude Code 描述所需动画
在哪里获取 motion-dev-animations-skill？: 源代码和安装说明在 GitHub 上：https://github.com/199-biotechnologies/motion-dev-animations-skill

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。