More screenshots

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Accessibility Audit & Fix Agent

    1

    Autonomous WCAG 2.2 engineer that audits, fixes and validates accessibility issues in real Angular, React and Vue codebases

    $6.99

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    Security scanned
    Accessibility Audit & Fix Agent

    Accessibility Audit & Fix Agent

    Example session with this skill installed

    Fix the accessibility issues in the checkout flow of my Angular app. Target WCAG 2.2 AA. Don't change the visual design.

    • Read your context and instructions
    • Compiled the accessibility audit
    • Generated the UI component

    Scope resolved

    Angular 18 (standalone components, Angular Material), checkout flow: cart → shipping → payment → confirm. Target:

    WCAG 2.2 AA, audit + fix, design preserved.

    Baseline

    CheckResult
    Build / Typecheck / TestsPASS / PASS / PASS (86)
    Automated a11y (jest-axe)17 violations, 6 incomplete

    What was found and fixed

    IDSeverityWCAG 2.2IssueFix
    A11Y-001CRITICAL2.1.2Payment modal: no Esc, focus escapes to background, close control is a divNative <button>, cdkTrapFocus, focus restore to trigger
    A11Y-002HIGH3.3.1 / 1.3.1Card errors shown as red text, not associated with inputsaria-describedby + aria-invalid bound to control state
    A11Y-003HIGH4.1.26 icon-only buttons (remove item, edit address…) with no accessible namearia-label on each; root cause was one shared IconButtonComponent — fixed once
    A11Y-004MEDIUM2.4.7outline: none on all inputs, no replacement:focus-visible outline using the existing brand token
    A11Y-005MEDIUM4.1.3"Order placed" toast never announced to screen readersPersistent role="status" region via CDK LiveAnnouncer

    Example — the error association fix (A11Y-002):

    <label for="card-number">Card number</label>
<input id="card-number" formControlName="cardNumber"
  autocomplete="cc-number"
  [attr.aria-invalid]="card.invalid && card.touched"
  aria-describedby="card-number-error" />
<p id="card-number-error" role="status">
  @if (card.invalid && card.touched) { Enter the 16-digit number shown on your card. }
</p>

    Validation

    Build PASS · Typecheck PASS · Lint PASS · Unit tests 86/86 · jest-axe:

    0 violations (was 17) · Visual design unchanged (5 files modified, 0 added, 0 deleted).

    Honest limits

    The automated and code-level audit found no remaining detected violations in the tested scope.

    Manual verification still required: VoiceOver/NVDA pass on the payment step, and meaningfulness of the new error messages with real users.

    Next steps

    • Run the checkout E2E suite once in CI before merging
    • Schedule a 30-min screen reader pass on the payment modal (marked MANUAL VERIFICATION REQUIRED in the report)
    • Optional: enable the 4 angular-eslint template a11y rules the audit recommended, as warnings first

    accessibility-audit-fix-agent.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Full WCAG 2.2 AA audit of your codebase, not just automated lint errorsFixes applied at the root cause, with your visual design preservedKeyboard, screen reader, forms, ARIA, contrast and reflow coverageBefore/after validation: a fix only counts when build, tests and axe passHonest final report with severity, WCAG mapping and manual-check listFramework-specific playbooks for Angular (CDK/Material), React (Next.js) and VueDependency-free recon script that maps your existing a11y tooling in seconds

    About this skill

    Most accessibility tools stop at a list of automated errors. This skill turns Claude Code into a senior accessibility engineer that does the whole job: it inspects your repository, audits your actual source code against WCAG 2.2, fixes the root causes, re-runs validation, and hands you an honest report.

    What it does

    • Audits beyond the linter.A layered review across semantic HTML, keyboard access, focus management, forms, ARIA, color and contrast, reflow at 320px, motion, dynamic content and custom widgets — automated checks catch roughly a third of WCAG failures; this covers the rest at code level.
    • Fixes root causes, not symptoms. If one shared component causes 50 violations, it fixes the component once. Native HTML over ARIA patches, always.
    • Preserves your design. Layout, branding, component APIs and business logic stay intact. Contrast fixes propose the smallest change that meets the ratio.
    • Validates everything. Build, typecheck, lint, unit and E2E tests, plus your existing axe/pa11y/jest-axe tooling — before and after. A fix only counts as fixed when validation passes.
    • Reports honestly. Every finding gets a severity, a confidence level and a real WCAG 2.2 success criterion — never invented. Items that need a real screen reader are clearly marked "manual verification required". It will never tell you your site "is WCAG compliant" when it can't know that.

    How it works

    Two modes: audit-only (report, zero file changes) and audit + fix (audit → fix → validate → re-audit → report). Thirteen phases, from repository discovery and baseline to regression check and a final before/after report with issue IDs, locations and user impact.

    What's inside

    • SKILL.md — the full 13-phase workflow and engineering rules
    • 5 reference files: WCAG 2.2 quick reference with a defect-to-criterion map, keyboard patterns (APG), forms, ARIA pitfalls, and framework-specific patterns for Angular (CDK, Material, signals, SSR), React (Next.js, portals, jsx-a11y) and Vue
    • A dependency-free recon script that detects your installed a11y tooling and greps for 15+ common defects

    Who it's for

    Frontend teams shipping under the European Accessibility Act or ADA pressure, agencies adding accessibility to client work, and solo developers who want launch-ready accessibility without hiring a consultant for every sprint. Works with Claude Code out of the box; the content ports to Cursor, Windsurf and Copilot rules.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 2 days ago

    • Passed all security checks, Safe to install

    Needs access to

    Whatwg
    W3
    Mozilla

    Listed8 days ago
    Updated2 days ago

    What's inside

    Frequently Asked Questions