accesslint-diff 精选
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
安装方式
cp -r plugins/agentic-awesome-skills-claude/skills/accesslint-diff ~/.claude/skills/accesslint-diff把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同,Claude Code 默认是 ~/.claude/skills/
/plugin marketplace add sickn33/agentic-awesome-skills⚠️ 该命令形态随客户端版本变化,仅在检测到 .claude-plugin/marketplace.json 时展示;不可用时请用「目录复制」。
https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/09e94102a5008d4d8066e14bdb8d0b95d365748c/plugins/agentic-awesome-skills-claude/skills/accesslint-diff/SKILL.md下载后另存为 ~/.claude/skills/accesslint-diff/SKILL.md。链接锁定采集时的 commit,内容与本站展示一致。
整仓一次性获取:git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git
依赖与权限
- 无需 API Key
- 需要联网访问外部服务
- 依赖外部命令:
gitnodenpxsed - 以上为按正文与 frontmatter 自动推断的信号,仅供参考;安装前建议先阅读原文。
SKILL.md 正文
Default branch: !git symbolic-ref refs/remotes/origin/HEAD --short 2>/dev/null | sed 's|.*/||' || echo main
Report only what changed. Locate; don't fix. If no URL in $ARGUMENTS, ask for one.
Parse $ARGUMENTS: strip --branch <name> if present → branch mode. If --branch has no value, use the default branch above. Remainder is the URL.
When to Use
- Use this skill when the task matches this description: Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use
scanfor a full audit with no diffing.
1. Audit
PORT=$(npx -y @accesslint/chrome@latest ensure | node -e 'process.stdin.on("data",d=>process.stdout.write(""+JSON.parse(d).port))')
Stash mode (default — uncommitted changes). Tell the user first: _"Running in diff mode — stashing your changes to capture a baseline, then restoring. Your working tree will be fully restored."_ If git stash push fails, warn and exit.
git stash push -u -m "accesslint-diff-baseline"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot
git stash pop && sleep 2
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json
Branch mode (--branch <name>). Tell the user first: _"Diffing against <name> — checking out that branch to capture a baseline, then restoring. Your working tree will be fully restored."_
Branch switching triggers a rebuild but not a browser reload — the CLI opens a fresh tab each time so it always reads the current build. Use --wait-for "<selector>" to gate the audit until the rebuild is ready; without it, warn the user that a slow build may yield a stale baseline.
Keep the branch value in the quoted branch variable below; never paste or evaluate a branch name as shell syntax.
git diff --quiet && git diff --cached --quiet || git stash push -u -m "accesslint-diff-branch"
branch="<branch>"
git check-ref-format --branch "$branch" >/dev/null
case "$branch" in -*) echo "Refusing option-like branch name: $branch" >&2; exit 1 ;; esac
git rev-parse --verify --quiet "$branch^{commit}" >/dev/null
git switch "$branch"
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --update-snapshot [--wait-for "<selector>"]
git switch - && git stash pop 2>/dev/null
npx -y @accesslint/cli@latest "<url>" --port "$PORT" --snapshot accesslint-diff --snapshot-dir /tmp --format json [--wait-for "<selector>"]
Pass --selector, --include-aaa to both runs.
2. Report
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)
Each new violation: where (selector verbatim + file:line (symbol) if source present — never fabricate), evidence, fix (mechanical change or NEEDS HUMAN).
Don't edit. For fixes: apply mechanical ones then re-run accesslint:diff to verify; for bulk work hand off to accesslint:audit.
3. Tear down
npx -y @accesslint/chrome@latest stop --all # skip if ensure reported "managed":false
Gotchas
ensurealways determines the port — never hardcode 9222.- CLI exit 2 = bad URL or page never loaded; check the dev server.
- Stash mode:
sleep 2covers most HMR cases; if baseline looks identical to current, add--wait-for "<selector>". - Branch mode: no HMR — CLI opens a fresh tab each run.
--wait-foris the rebuild gate. - Heavy DOM changes between runs cause selector drift — re-run with
accesslint:scanfor the full picture.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
质量与来源
- 所属仓库
- sickn33/agentic-awesome-skills
- 仓库星标
- 4.7 万
- 最近更新
- 今天
- 采集时间
- 今天
- commit
- 09e94102a500
- 内容指纹
- sha256:604484bc175703c
- 文件路径
- plugins/agentic-awesome-skills-claude/skills/accesslint-diff/SKILL.md