从扫描到自动开PRTransitions.dev Agent 修复CSS过渡 GitHub Action门禁完整工作流【免费下载链接】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 是一个汇集了 43 个精选 UI 过渡动画的开源组件库而它内置的Transitions.dev AgentUI motion AI Agent更是一条完整的自动化流水线扫描代码库找出缺失、卡顿或不一致的 CSS 过渡动画给出 0-100 的运动评分自动修复并以 PR 形式提交还能在 GitHub Action 中按最低分拦截合并。本文将带你搭建这条扫描 → 修复 → 自动开 PR → 门禁的完整工作流。Transitions.dev Agent 是什么一句话概括它给 UI 动效做体检 自动治疗。扫描识别项目中的弹层、下拉、Tooltip、Toast、Tab、开关等 32 个免费 11 个 Pro 组件读取每个组件真实的打开/关闭时长、缓动、缩放等动效参数评分按严重程度加权计算 0-100 分≥90 为 smooth、≥75 decent、≥50 janky、50 static修复把动效数值对齐到 transitions.dev 的运动令牌motion token刻度上自动开 PR修复结果作为一条独立 PR 提交到当前分支永远不会指向 main合并即生效关闭即拒绝门禁可用min-score设定最低分低于该分数的检查直接失败。完整说明见项目内的 agent/README.md。一键扫描运动评分是怎么算出来的在本地终端运行npx transitions-agent即可开始扫描。它的规则引擎是纯确定性的无需 AI 也能跑核心逻辑在 agent/lib/scan.mjsmajor问题每条扣 8 分、warn扣 4 分并给每条规则设了扣分上限避免单一噪音规则把分数清零。它会检查的典型问题包括规则抓什么问题off-scale时长/缩放值偏离该场景的刻度如 modal 关闭用了 300msrecipe-mismatch组件动效做错动画驱动布局、没有退出动画、瞬间弹出untransitioned-overlay弹层/下拉/Tooltip 无进出场过渡啪地闪现hover-without-transition悬停状态突变过渡没覆盖到真正变化的属性transition-all动画驱动一切属性含布局又慢又费性能slow-duration超过 1 秒的过渡能穿透 CSS 变量令牌追踪到定义处hardcoded-duration硬编码时长而非共享运动令牌no-reduced-motion全项目没有prefers-reduced-motion守卫inconsistent-durations全项目散落了超过 5 种不同时长规则实现可参考 agent/lib/rules.mjs。它甚至能解析var()令牌链——比如--menu-close: 3s这种藏在自定义属性里的慢时长也逃不掉。两种修复模式polish 与 revamp扫描发现问题后npx transitions-agent fix会先以diff 形式展示所有拟修改你确认后才写入文件。两种模式agent/lib/fix.mjs模式做什么风险polish默认把每个值对齐到刻度300ms 的 modal 关闭 → 150ms、0.8 的缩放 → 0.96补齐 hover 过渡、加上 reduced-motion 守卫、用命名属性替换transition: all。从不重构结构极小几行 diffrevampBusinesspolish 之外把识别到的组件直接替换为库里的成品配方菜谱 CSS 状态钩子 进出场 JSPro 配方也包含在内diff 较大重点看 PR修复流程有三重安全网diff 先行——不确认不写入回归保护——修复后会自动重扫若某文件因修改引入了新的动效问题如 hover 突然跳变该文件自动回滚只动动效——只碰 CSS 过渡与动画守卫绝不碰业务逻辑一切改动都是 git 提交一条git revert即可撤销。三步接入 GitHub Action自动开 PR 分数门禁第 1 步生成工作流。运行npx transitions-agent init-ci或直接把 agent/templates/transitions-agent.yml 复制到.github/workflows/。第 2 步配置关键参数。核心就是这几项agent/action.yml 定义了全部输入- uses: actions/checkoutv4 with: fetch-depth: 0 - uses: Jakubantalik/transitions.dev/agentmain with: min-score: 0 # 低于该分数的检查失败0 只报告不拦截 auto-fix: true # 自动开一条修复 PR 到该分支 fix-mode: polish # 或 revampBusiness 计划 license: ${{ secrets.TRANSITIONS_AGENT_LICENSE }}第 3 步开启门禁。把min-score设为你的质量底线例如75低于该分数时检查失败PR 无法合并。门禁本身不依赖任何 AI纯确定性扫描零成本。此后每条 PR 都会得到 一条运动评分评论列出识别出的组件与问题每次 push 原地更新 一条自动修复 PR——目标永远是该 PR 自己的分支而非 main描述里用大白话说明用户会感知到什么关闭从 800ms 变 250ms、关闭时有退出动画而不是瞬间消失。合并即应用关闭即拒绝 标签控制给 PR 打revamp装库配方、polish强制打磨、no-motion-fix跳过修复。自动修复有严格的配额守卫agent/action/autofix.mjs同一状态只修一次仅当真人再次修改样式/组件文件才重跑Agent 自己的提交和合并不算Fork、修复分支本身、已达门禁线的 PR 一律跳过。注意自动修复需要TRANSITIONS_AGENT_LICENSE密钥、contents: write与pull-requests: write权限以及允许 Actions 创建 PR的仓库设置——缺密钥时你依然会得到评分评论。常见问题免费额度够吗免费计划含每月 10 次托管修复每天 2 次扫描与门禁不限量。运行npx transitions-agent signup即可在浏览器中免费拿密钥。只想本地用、不上 CI完全可以npx transitions-agent fix走终端 diff 确认流程fix --pr则本地确认后开 PR。不想用它家 AI想用我自己的 Claude项目提供了 MCP 服务器和 agent/templates/transitions-fix-own-claude.yml 模板修复走你自己的模型订阅评分/门禁部分照常免费。小结Transitions.dev Agent 把动效质量这件模糊的事变成了可量化、可自动化、可门禁的工程指标扫描给出分数polish/revamp 给出修复GitHub Action 自动开 PR 并用min-score守门。整套流程 diff 先行、永不碰 main、回归自动回滚是普通团队也能放心上手的 CSS 过渡修复工作流。【免费下载链接】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），仅供参考