关于 diff
diff 是用于对比当前项目与基线分支或暂存状态的无障碍扫描结果的技能。它只报告新增和已修复的问题,不修改文件,帮助开发者检查回归。
主要功能
- 01将扫描结果与保存的基线对比
- 02通过分支或暂存状态建立基线
- 03报告新增及已修复问题
- 04列出选择器、证据和修复建议
- 05扫描后恢复工作树
适用场景
- 01合并前检查无障碍回归
- 02将当前工作与指定分支对比
- 03定位新引入的问题
- 04确认修改是否解决已报告的问题
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ accesslint/ skills --skill diff安装后在 Claude Code 中输入/diff确认已加载。
详细介绍
默认分支:!git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main
仅报告变更内容。定位问题,不要修复。
解析 $ARGUMENTS:如果存在,则移除 --branch <name> → 分支模式(未提供值时使用上面的默认分支)。剩余部分为目标——可以是 URL、配置目标名称,或者留空以使用 accesslint.config.json 中的默认目标;如果留空且没有配置,则询问 URL。
1. 审核
PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')
暂存模式(默认——未提交的变更)。先告知用户:"正在以差异模式运行——暂存你的变更以捕获基线,然后还原。你的工作树将完整恢复。" 如果 git stash push 失败,则警告并退出。
git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json
分支模式(--branch <name>)。先告知用户:"正在与 <name> 比较——切换到该分支以捕获基线,然后还原。你的工作树将完整恢复。"
切换分支会触发重新构建,但不会重新加载浏览器——CLI 每次都会打开一个新标签页,因此始终读取当前构建。使用 --wait-for "<selector>",让审核等到重新构建完成后再开始;如果不使用,则提醒用户,构建较慢时可能会导致基线过期。
git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
git checkout <branch>
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git checkout - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest scan <target> --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]
两次运行都传入 --selector、--include-aaa。
2. 报告
Accessibility diff — http://localhost:3000/ vs main (94 rules, live DOM)
2 new · 1 fixed · 4 pre-existing hidden
New — Critical
- color-contrast — 2.1:1 (needs 4.5:1), #bbb on #fff
where: main > p.subtitle fix: darken to #767676
Fixed
- img-alt — <img src="old.jpg"> (no longer present)
对于每个新增违规项:报告位置(选择器原样保留;如果存在 source,则附上 file:line (symbol)——绝不捏造)、证据、修复方法(机械性改动或 NEEDS HUMAN)。
不要编辑。对于修复:先应用机械性修复,然后重新运行 accesslint:diff 进行验证;批量处理则交由 accesslint:audit。
3. 清理
npx -y @accesslint/chrome@latest stop --all # skip if ensure reported "managed":false
注意事项
ensure始终决定端口——绝不要将 9222 写死。- CLI 退出码 2 = URL/目标无效或页面未加载;检查开发服务器。
- 只有在暂存/检出期间
accesslint.config.json保持不变时,<target>名称在两次运行中才会解析为同一目标——如果你的变更涉及该配置,请改为传入显式 URL。 - 暂存模式:
sleep 2可应对大多数 HMR 情况;如果基线与当前状态看起来完全相同,请添加--wait-for "<selector>"。 - 分支模式:没有 HMR——CLI 每次运行都会打开一个新标签页。
--wait-for是等待重新构建完成的门槛。 - 两次运行之间 DOM 大幅变更会导致选择器漂移——请重新运行
accesslint:scan,查看完整情况。