把Transitions.dev技能装进Cursor和Claude Code:让AI自动生成32种产品级UI过渡【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个开源的UI 动效 AI 技能 过渡动画库它把 32 种经过精调的产品级 CSS 过渡弹窗、下拉菜单、骨架屏、滑块标签、成功对勾等打包成 AI 技能一条命令即可装进 Cursor 和 Claude Code。装好后你只需要用自然语言说一句让弹窗平滑打开AI 就会自动匹配最合适的过渡、写入代码并带上无障碍保护。32 种过渡:覆盖 Web 应用最常见的动效场景这个技能不靠 AI 凭空发挥,而是内置了一个动效目录:从卡片缩放、数字弹入、通知角标,到 AI 思考状态、流式文字、矩阵点阵加载器,几乎覆盖了产品界面里所有常见的动效需求。每个过渡都有独立的参考文档,例如 06-modal.md 记录了弹窗的时长、缩放值、缓动曲线和 JS 编排细节,全部基于真实产品调参,而非泛泛的模板。技能的核心逻辑写在 SKILL.md:所有过渡都以t-*命名空间组织,使用语义化 CSS 变量,自带prefers-reduced-motion降级保护,零框架依赖——AI 生成后,你粘贴即用。最快安装方法:一条命令装进 AI 编辑器方式一:官方技能安装器(推荐)npx skills add Jakubantalik/transitions.dev该技能兼容 Claude Code、Cursor、GitHub Copilot、Codex 和 Gemini CLI,安装后 AI 自动识别触发词,比如animate the dropdownshake on invalid等描述都会激活它。方式二:手动安装到项目如果想完全掌握文件位置,可以克隆仓库后把技能目录复制到项目的.claude/skills/(Claude Code)或项目规则目录(Cursor):git clone https://gitcode.com/gh_mirrors/tr/transitions.dev需要复制的内容就是 skills/transitions-dev/ 下的SKILL.md、32 个编号参考文档和全局变量文件 _root.css。 除了 AI 技能,项目还提供终端 CLI:运行npx transitions-dev add --free可一次性把全部免费过渡拉进项目,详见 cli/README.md。AI 如何选对过渡:内置决策规则,不靠猜新手最容易担心AI 会乱加动画。这个技能在 SKILL.md 的决策规则 中定义了明确的匹配逻辑:先看界面元素,再看动作:触发器上浮出小圆点 → 通知角标;从触发器长出的表面 → 下拉菜单;居中的覆盖层 → 弹窗;两个候选时选轻的:能用卡片缩放解决就不用面板滑入,能用下拉就不用弹窗;实在匹配不上就停下来:技能明确规定不要猜,转而列出全部过渡让你选择。4 个指令:从查询、审查到自动应用装好技能后,可以直接对 AI 说(以下动词都以transitions开头,不会与其他技能冲突):指令作用典型说法transitions reveal列出全部 32 种过渡清单这个技能里有哪些过渡transitions review扫描项目,找出适合加过渡的位置(只报告不改代码)审查我的项目动效transitions apply自动匹配最佳过渡并安装,先给出一句话理由等你确认在这里加个过渡transitions refine把写死的时长/缓动替换为统一的运动令牌把动画时长对齐到令牌完整定义见 SKILL.md 的 Commands 章节。想直观看效果,可以打开仓库里的 example.html,它有普通 AI 输出与装上技能后的输出并排对比演示。进阶:用 transitions-polish 打磨已有动画如果项目里已经写了不少动画但节奏不一致,可以再加装附带的polish 技能skills/transitions-polish/SKILL.md。它只调不改,从时长、距离、缩放、模糊、缓动五个维度审查现有动效,核心原则写在文档第 13 行:按用途匹配令牌,而不是按数字凑近——一个 300ms 的弹窗关闭会映射到 150ms 的--duration-quick,因为两者用途相同。配合 refine/,你还能在浏览器里直接点击界面上的动画让它自动对齐令牌,无需改源码即可预览效果,详见 refine/README.md。许可与适用人群技能中的过渡可自由用于个人和商业项目、可修改、可交付给最终用户,唯一限制是不能把整个库当作竞品库再分发,条款见 LICENSE。对于刚上手前端的开发者、独立开发者,以及想让 AI 写出更像产品而不是玩具动效的团队,把它装进 Cursor 或 Claude Code,是你成本最低的一次动效升级。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 把Transitions.dev技能装进Cursor和Claude Code:让AI自动生成32种产品级UI过渡
把Transitions.dev技能装进Cursor和Claude Code:让AI自动生成32种产品级UI过渡【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.devTransitions.dev 是一个开源的UI 动效 AI 技能 过渡动画库它把 32 种经过精调的产品级 CSS 过渡弹窗、下拉菜单、骨架屏、滑块标签、成功对勾等打包成 AI 技能一条命令即可装进 Cursor 和 Claude Code。装好后你只需要用自然语言说一句让弹窗平滑打开AI 就会自动匹配最合适的过渡、写入代码并带上无障碍保护。32 种过渡:覆盖 Web 应用最常见的动效场景这个技能不靠 AI 凭空发挥,而是内置了一个动效目录:从卡片缩放、数字弹入、通知角标,到 AI 思考状态、流式文字、矩阵点阵加载器,几乎覆盖了产品界面里所有常见的动效需求。每个过渡都有独立的参考文档,例如 06-modal.md 记录了弹窗的时长、缩放值、缓动曲线和 JS 编排细节,全部基于真实产品调参,而非泛泛的模板。技能的核心逻辑写在 SKILL.md:所有过渡都以t-*命名空间组织,使用语义化 CSS 变量,自带prefers-reduced-motion降级保护,零框架依赖——AI 生成后,你粘贴即用。最快安装方法:一条命令装进 AI 编辑器方式一:官方技能安装器(推荐)npx skills add Jakubantalik/transitions.dev该技能兼容 Claude Code、Cursor、GitHub Copilot、Codex 和 Gemini CLI,安装后 AI 自动识别触发词,比如animate the dropdownshake on invalid等描述都会激活它。方式二:手动安装到项目如果想完全掌握文件位置,可以克隆仓库后把技能目录复制到项目的.claude/skills/(Claude Code)或项目规则目录(Cursor):git clone https://gitcode.com/gh_mirrors/tr/transitions.dev需要复制的内容就是 skills/transitions-dev/ 下的SKILL.md、32 个编号参考文档和全局变量文件 _root.css。 除了 AI 技能,项目还提供终端 CLI:运行npx transitions-dev add --free可一次性把全部免费过渡拉进项目,详见 cli/README.md。AI 如何选对过渡:内置决策规则,不靠猜新手最容易担心AI 会乱加动画。这个技能在 SKILL.md 的决策规则 中定义了明确的匹配逻辑:先看界面元素,再看动作:触发器上浮出小圆点 → 通知角标;从触发器长出的表面 → 下拉菜单;居中的覆盖层 → 弹窗;两个候选时选轻的:能用卡片缩放解决就不用面板滑入,能用下拉就不用弹窗;实在匹配不上就停下来:技能明确规定不要猜,转而列出全部过渡让你选择。4 个指令:从查询、审查到自动应用装好技能后,可以直接对 AI 说(以下动词都以transitions开头,不会与其他技能冲突):指令作用典型说法transitions reveal列出全部 32 种过渡清单这个技能里有哪些过渡transitions review扫描项目,找出适合加过渡的位置(只报告不改代码)审查我的项目动效transitions apply自动匹配最佳过渡并安装,先给出一句话理由等你确认在这里加个过渡transitions refine把写死的时长/缓动替换为统一的运动令牌把动画时长对齐到令牌完整定义见 SKILL.md 的 Commands 章节。想直观看效果,可以打开仓库里的 example.html,它有普通 AI 输出与装上技能后的输出并排对比演示。进阶:用 transitions-polish 打磨已有动画如果项目里已经写了不少动画但节奏不一致,可以再加装附带的polish 技能skills/transitions-polish/SKILL.md。它只调不改,从时长、距离、缩放、模糊、缓动五个维度审查现有动效,核心原则写在文档第 13 行:按用途匹配令牌,而不是按数字凑近——一个 300ms 的弹窗关闭会映射到 150ms 的--duration-quick,因为两者用途相同。配合 refine/,你还能在浏览器里直接点击界面上的动画让它自动对齐令牌,无需改源码即可预览效果,详见 refine/README.md。许可与适用人群技能中的过渡可自由用于个人和商业项目、可修改、可交付给最终用户,唯一限制是不能把整个库当作竞品库再分发,条款见 LICENSE。对于刚上手前端的开发者、独立开发者,以及想让 AI 写出更像产品而不是玩具动效的团队,把它装进 Cursor 或 Claude Code,是你成本最低的一次动效升级。【免费下载链接】transitions.devUI montion AI agent, a library of 43 crafted transitions, a skill that fits your workflow.项目地址: https://gitcode.com/gh_mirrors/tr/transitions.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考