Guide · Agent skill
How to use the Accessibility Diff Checker agent skill (accesslint-diff)
Updated · written with AI from the project's own documentation and checked against our catalogue data
accesslint-diff is an agent skill that tells an AI coding agent how to compare a live web page's accessibility violations between two versions, such as your uncommitted changes and the last commit, or your branch and another branch. It is written for front-end developers, reviewers and QA staff who want to know whether a change added accessibility problems before it is merged. After reading this guide you will know what the skill does, how to install it, how to phrase requests that trigger it, and what you need in place first.
Accessibility Diff Checkersickn33/agentic-awesome-skills · MIT Download the skill Quick start
- 1Download and unzip. Download the accesslint-diff ZIP from this page and unzip it so the folder contains SKILL.md.
- 2Place the folder. Copy the accesslint-diff folder into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder.
- 3Install your scanning tooling. Install the AccessLint CLI or a compatible tool and its browser automation runtime, because the skill bundles neither.
- 4Prepare the repository. Make sure the repository is a local git repo with the base and candidate revisions available, and that the lockfile and build tooling work.
- 5Ask for a diff. Request a comparison of a page against your uncommitted changes or a branch in plain language.
- 6Review the report. Check the new, fixed and pre-existing counts, then inspect each new violation's selector and suggested fix.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file that gives an AI agent a set of instructions for a specific task. When a request matches the skill's description, the agent follows its procedure. This skill is named accesslint-diff.
Its job is to diff a live page's accessibility violations against a baseline. By default it compares uncommitted changes using a stash-based approach. You can instead pass --branch [<name>] to diff against a branch. The report lists only new violations introduced, violations fixed, and a count of pre-existing violations that remain.
- New violations introduced by your changes, grouped by impact such as Critical
- Violations that were fixed
- A count of pre-existing violations that were already there
- For each new violation: the selector, evidence, and a suggested fix or NEEDS HUMAN
Install the skill from the ZIP download
Download the ZIP for accesslint-diff from this page. The package contains a single file, SKILL.md. Unzip it so the folder is named accesslint-diff and contains SKILL.md.
For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in the project's .claude/skills/ folder so it applies only to that repository.
Alternatively, if you use the Claude apps, upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/accesslint-diff/
- Project: .claude/skills/accesslint-diff/ inside your repository
- Claude apps: Settings → Capabilities → Skills
Check the requirements before you run it
The skill does not bundle the tools it depends on. You need to supply them yourself. The skill tells the agent to verify the installed tool schema before running anything.
You need an AccessLint CLI or a compatible accessibility scanning tool, plus the browser automation runtime that tool uses. Your project must be a local git repository where the base and candidate revisions are available, and it needs its build tooling and lockfile so each revision can be served locally.
- AccessLint CLI or a compatible accessibility scanning tool (not included)
- The browser automation runtime used by that CLI (not included)
- A local git repository with the base and candidate revisions available
- Project build tooling and a lockfile to serve each revision locally
Trigger the skill with a natural request
You do not need a special command. Describe the comparison you want in plain language and name the page and the baseline. The skill's description mentions diffing against a baseline, uncommitted changes and branches, so requests using those ideas are the most likely to match.
If you want a full audit with no comparison, ask for a scan instead. The skill's description says to use scan for that.
- "Compare the accessibility of http://localhost:3000/ with my uncommitted changes."
- "Diff accessibility violations on the checkout page against main."
- "Check whether this pull request adds accessibility regressions on the home page."
- "Run a full accessibility audit of the login page" (this is a scan, not a diff)
Read the report
The report starts with a header that names the URL, the baseline and the number of rules checked. Below it, the counts show new violations, fixed violations and pre-existing violations. Each new violation lists its where selector, evidence and a fix. If the agent cannot give a mechanical fix, it marks the item NEEDS HUMAN.
The skill is designed to report only. It should not edit your code. If you explicitly ask for a fix, the skill points to a separate accesslint-audit procedure rather than making changes itself.
- Header: page URL, baseline, rules checked
- Counts: new, fixed, pre-existing
- Each new item: rule, impact, where, evidence, fix
Know the safety boundaries
This skill runs scripts and uses the network. It starts isolated local servers and browser sessions for each revision. The procedure says to keep private snapshots in a fresh, owner-only directory, to avoid evaluating your arguments as shell syntax, and to close only the browser processes and servers it created. It should preserve your existing checkout and any unrelated stash.
If your environment cannot safely run local servers or browsers, do not use this skill.
- Runs scripts: yes
- Uses network: yes
- Preserves your checkout; does not switch branches or pop unrelated stashes
- Cleans up only processes and snapshots it created
What people use it for
- Checking a front-end change for new colour-contrast or image-alt problems before merging
- Reviewing how a pull request changes the accessibility findings on a key page
- Giving a designer or QA reviewer a before-and-after comparison of a live page
- Confirming that a fix removed a violation without adding a new one
Frequently asked questions
How do I install the accesslint-diff skill?
Download the ZIP from this page and unzip it so the folder contains SKILL.md. Put the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
What do I need before I can use it?
You need an AccessLint CLI or compatible accessibility scanning tool, the browser automation runtime it uses, a local git repository with the base and candidate revisions, and the project's build tooling and lockfile. The skill does not include any of these.
Is accesslint-diff free and what is its licence?
The item is listed under the MIT licence. Check the licence file in the source repository for the full terms before redistributing it.
How is this different from a full accessibility scan?
This skill compares two versions and reports only new violations, fixed violations and the pre-existing count. A full audit with no diffing is done with scan, as the skill's description states.
Does the skill change my code?
No. It is designed to report only. If you ask for a fix, it points to the separate accesslint-audit procedure and does not edit files itself.
Can this replace an accessibility expert review?
No. The skill only covers the pages, states and automated rules it exercises and is not a WCAG certification. Manual WCAG checks are recorded separately and should go to expert review.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use accesslint-diff if you are a developer, reviewer or QA person who already has an accessibility scanning tool and a local git project, and you want to know whether a change added regressions on a live page. Pick something else if you need legal compliance sign-off, a one-command audit with no setup, or you cannot safely run local servers and browsers.
Download the skill