★ FEATURED ARTICLE 给代码库打个动效分数:Transitions.dev Agent如何自动检测11类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 Agent 是一个给 UI 动效打分的 AI 检测工具它扫描你的代码库输出一份 0-100 的动效分数motion score并自动检测 11 类常见的 UI 过渡动画问题——比如弹窗没有出场动画、hover 状态咔哒一跳、transition: all拖慢性能等。每个问题都会附上对应的修复配方AI 还会以 diff 形式给出修改建议经你确认后才应用。动效分数是怎么算的和 ESLint 给代码质量找毛病类似Agent 先遍历项目里所有 CSS、JSX、Vue、Svelte 等文件然后按问题严重度扣分major严重扣 8 分/条如弹窗完全没有进出场动画warn警告扣 4 分/条如transition: all、超过 1 秒的慢动画minor / info扣 1-2 分如硬编码时长、时长不统一每条规则都有扣分上限如慢动画最多扣 16 分避免一个问题把分数打穿。最终分数对应四个评级分数评级体感90-100smooth顺滑75-89decent还行50-74janky卡顿0-49static几乎是静态的计分逻辑集中在 agent/lib/scan.mjs扫描流程为收集文件 → 运行规则 → 组件级审查 → 合并去重 → 计算分数。11类UI过渡动画问题全解读规则实现位于 agent/lib/rules.mjs完整清单如下#规则抓什么问题1recipe-mismatch动画写法与组件类型不匹配动画了 height/top、没有出场动画、直接弹出2off-scale数值偏离动效比例尺如弹窗关闭 300ms、缩放 0.8、hover 用了 ease-in3recipe-available手写的组件恰好有现成配方提示性不扣分4untransitioned-overlay弹窗、tooltip、下拉菜单直接闪现无任何过渡5hover-without-transitionhover 变化的属性没被过渡覆盖状态切换时跳变6layout-animationhover 位移动到了 padding/margin/width 等布局属性7transition-all万能动效transition: all会连布局一起动画伤害性能8slow-duration超过 1 秒的过渡包括藏在 CSS 变量里的9hardcoded-duration写死的时长字面量没有用共享动效 token10no-reduced-motion项目有动画却从不检查prefers-reduced-motion11inconsistent-durations全项目时长值过多且分散5 种建议收敛为 2-3 个 token几个值得注意的深挖能力能穿透 CSS 变量transition: opacity var(--menu-close)这种写法扫描器会先收集全项目所有--xxx: 值声明沿var()链解析即使时长藏在 token 里也能揪出慢动画见 agent/lib/rules.mjs 的collectCustomProps与resolveTimes懂 JS 里的 CSS-in-JS对 JSX/TS 文件做字符串与注释标记模板字符串里的内联 CSS 依然可扫描而普通文案如transition: all出现在提示语中不会被误报transition: all会给出具体建议不只是说别用 all而是分析该元素各状态实际改变的属性直接告诉你应该写哪几个属性名组件识别比规则匹配更进一步光查 CSS 只能抓到值不对Agent 还会回答这个弹窗是不是根本没动画。组件识别器agent/lib/components.mjs按 transitions.dev 技能库的方式审查项目认出组件从类名、元素dialog、ARIA 角色、组件名、Tailwind 工具类、Framer Motion 属性等线索识别出 modal、dropdown、tooltip、toast、drawer、accordion、tabs、toggle、badge、skeleton 等 43 种组件识别词表见 agent/lib/catalog.mjs读懂它的动画打开/关闭时长、缓动、缩放、位移、有无出场动画、动画了哪些属性与配方对比每个组件对应库里一份标准配方含可调节默认值对比的是按用途该用什么值而不是机械套数字——比如同一个 300ms弹窗打开可以弹窗关闭就该是 150ms对比结果产出三种结论off-scale值不对、recipe-mismatch结构写错、recipe-available库里有现成方案。扫描报告渲染在 agent/lib/report.mjs终端输出带颜色的分数条Markdown 版本则直接作为 PR 评论。三条使用路径总有一条适合你① 命令行一条命令出分数npx transitions-agent # 扫描动效分数 问题清单 推荐配方 npx transitions-agent fix # AI 生成修复 diff确认后应用 npx transitions-agent fix --pr # 应用后自动开分支、建 PR② GitHub Action每个 PR 都有分数评论npx transitions-agent init-ci一键接入也可参考模板 agent/templates/transitions-agent.yml 手动配置。效果是每个 PR 自动附上动效分数评论含识别出的组件与问题随 push 原地更新有待修问题时自动开一个修进该 PR 分支的修复 PR——合并即应用关闭即拒绝永不触碰 main可用min-score设为合并门禁分数不达标直接卡住 PR③ MCP Server让你自己的 AI 来修不想走托管服务把 Agent 的 MCP Server 接进 Claude你的助手即可获得扫描契约、修复指导和真实配方源码修复跑在你自己的订阅上claude mcp add --transport http transitions-agent https://api.transitions.dev/v1/agent/mcp相关实现扫描 agent/lib/scan.mjs、修复服务 agent/worker/、技能定义 agent/skill/SKILL.md、CI 入口 agent/action/完整文档见 agent/README.md。安全模型先看 diff再谈修改动效修复最怕改着改着逻辑也变了Agent 用四道保险约束行为修复先以 diff 呈现没有你的确认一个字节都不会写入--pr只在新分支开 PR团队评审、测试照常跑由人合并一切基于 git任何已合并的修复一条git revert就能撤回只碰动效修改范围限定在 CSS 过渡与动画守卫绝不触碰业务逻辑两种修复模式风险可控polish默认免费只做小改动——把数值挪到动效比例尺、补齐 hover 过渡、加上 reduced-motion 守卫revampBusiness 计划则进一步为识别出的组件装上库的标准配方diff 更大建议走 PR 评审。总结Transitions.dev Agent 把动效好不好这件主观的事变成了一条可量化、可门禁、可自动修复的流水线一条命令拿到 0-100 动效分数11 类规则定位问题AI 以最小 diff 修复全程 git 可回滚。对团队来说接入 CI 后动效质量就和单元测试一样成了每次 PR 的必答题。【免费下载链接】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），仅供参考
阅读完成 · 觉得有帮助？
