New to Claude Skills? Learn how to install them →

sickn33 on GitHub

AccessLint Diff

Free

Efficiently track accessibility changes in web pages.

Get this skill

Free · Opens the source repo

What AccessLint Diff does

AccessLint Diff is a specialized tool designed to help developers and designers monitor accessibility violations on live web pages. By comparing the current state of a page against a baseline, it identifies new violations introduced, violations that have been fixed, and provides a count of pre-existing issues. This tool operates primarily in two modes: stash mode, which compares uncommitted changes, and branch mode, which allows users to compare against a specific branch. This flexibility makes it suitable for teams working in collaborative environments where accessibility is a priority.

The skill leverages the AccessLint CLI to perform audits and generate reports. In stash mode, it temporarily stashes uncommitted changes to establish a baseline for comparison, ensuring that the working tree is restored after the audit. In branch mode, it checks out the specified branch to create a baseline, which is particularly useful for teams that want to assess the accessibility impact of changes before merging code. The output is clear and actionable, detailing new violations, fixes, and existing issues, allowing teams to prioritize their accessibility efforts effectively.

AccessLint Diff is ideal for web developers and designers who want to ensure their projects meet accessibility standards without disrupting their workflow. It provides a straightforward way to keep track of accessibility changes over time, making it easier to maintain compliance and improve user experience. By focusing on what has changed, it helps teams locate issues rather than fix them directly, promoting a more systematic approach to accessibility management.

However, users should be aware that this tool is not a substitute for comprehensive accessibility testing or expert review. It is best used in conjunction with other accessibility validation methods to ensure a thorough assessment. The skill is also limited to specific tasks related to diffing accessibility violations, so it may not be suitable for broader accessibility audits without the use of the scan command for a full audit.

When to use it

Use AccessLint Diff when you need to compare a live page's accessibility violations against a baseline to identify new issues or fixes.

When not to use it

This skill is not suitable for comprehensive accessibility audits on its own; it should be used alongside other validation methods for thorough testing.

What you can build with it

Track Changes in a Team Environment

Use AccessLint Diff to monitor accessibility violations introduced by team members during development, ensuring compliance before merging.

Audit Before Deployment

Run AccessLint Diff to identify any new accessibility issues before deploying updates to a live site.

Compare Different Branches

Utilize the branch mode to assess accessibility changes between different branches, facilitating better code reviews.

How to install AccessLint Diff

View source

1. Install with the skills CLI

npx skills add sickn33/agentic-awesome-skills/accesslint-diff --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by sickn33

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 scan for 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

  • ensure always determines the port — never hardcode 9222.
  • CLI exit 2 = bad URL or page never loaded; check the dev server.
  • Stash mode: sleep 2 covers 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-for is the rebuild gate.
  • Heavy DOM changes between runs cause selector drift — re-run with accesslint:scan for 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.

Frequently asked questions about AccessLint Diff

Similar skills