Mmcp.market

accesslint-diff skill

by sickn33·sickn33/agentic-awesome-skills·47k stars·MIT

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.

A100/100content scan

Is the accesslint-diff skill safe?

Clean: nothing in its files matched our rules. We read 1 file in the folder on 2026-09-28.

No findings.

Install the accesslint-diff skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description.

git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git /tmp/agentic-awesome-skills
mkdir -p ~/.claude/skills
cp -r /tmp/agentic-awesome-skills/plugins/agentic-awesome-skills-claude/skills/accesslint-diff ~/.claude/skills/accesslint-diff
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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 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 [] 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 ). Tell the user first: "Diffing against — 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 "" 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 "".
  • 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.

More skills from sickn33/agentic-awesome-skills

  • A00-andruia-consultantArquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
  • F007Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
  • A10-andruia-skill-smithIngeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
  • A20-andruia-niche-intelligenceEstratega de Inteligencia de Dominio de Andru.ia. Analiza el nicho específico de un proyecto para inyectar conocimientos, regulaciones y estándares únicos del sector. Actívalo tras definir el nicho.
  • A2slides-ppt-generatorAI-powered presentation generation via the 2slides API — create slides from text, match a reference image style, summarize documents into decks, add AI voice narration, and export pages/audio. Use for any \"make slides\", \"create a deck\", or \"slides from this document\" request.
  • A3d-web-experienceExpert in building 3D experiences for the web - Three.js, React
  • Aab-test-setupUse when designing an A/B or split test: define the hypothesis, control and variants, estimate sample size, verify tracking, and predeclare metrics and stopping rules.
  • Aab-testingWhen the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program.
  • Aacceptance-orchestratorUse when a coding task should be driven end-to-end from issue intake through implementation, review, deployment, and acceptance verification with minimal human re-intervention.
  • Aaccess-reviewConduct periodic access reviews and certifications. Implement access
  • Aaccessibility-compliance-accessibility-auditYou are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
  • Aaccesslint-auditFind and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.

All agent skills → · MCP servers