More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Verified A11y Auditor

    0

    Automated WCAG 2.1 AA accessibility auditor that computes contrast ratios and provides code-level fixes.

    Free

    8 uses5.0 (1 review)
    Verified A11y Auditor

    Verified A11y Auditor

    Example session with this skill installed

    Audit this React button component for WCAG 2.1 AA: <button style={{backgroundColor: '#6B7280', color: '#FFFFFF'}} onClick={doSomething}><SearchIcon /></button>

    • Read your context and instructions
    • Compiled the verified a11y auditor
    • Generated the UI component

    Accessibility Audit — SearchButton

    [Critical] Missing Accessible Name — button.tsx
    Issue: Icon-only button has no text label.
    Fix: <button aria-label="Search" ...>
    [Serious] Contrast Failure (3.92:1)
    Issue: #6B7280 on #FFFFFF fails 4.5:1 requirement for normal text.
    Fix: Use #4B5563 for 5.39:1.

    button.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.

    About this skill

    The problem

    Manual accessibility testing is time-consuming and prone to human error, often resulting in expensive late-stage fixes. Developers frequently overlook non-obvious WCAG violations like incorrect ARIA usage or failing contrast ratios until a project hits formal QA.

    What it does

    • Scans React, Vue, Svelte, and HTML/CSS files for WCAG 2.1 AA compliance violations.
    • Computes exact color contrast ratios using relative luminance for all text and UI components.
    • Categorizes findings by severity (Critical, Serious, Moderate, Minor) with specific line-number references.
    • Generates a prioritized "Fix-first" list targeting blockers like keyboard traps and unlabeled form fields.
    • Provides direct code snippets for every fix, replacing inaccessible patterns with semantic alternatives.

    Frameworks & tools

    React, Vue, Svelte, Tailwind CSS, and standard HTML5/CSS3. Works with design tokens and hex/RGB color values.

    Why this beats prompting it yourself

    Standard LLM prompts often give vague "improve your alt text" advice or hallucinate contrast levels. This skill enforces a rigorous, multi-step checklist and requires mathematical proof for every contrast claim, ensuring your audit is backed by data, not guesses.

    Use cases

    • Pre-shipment audit for a new component library or design system.
    • Remediating legacy web applications to meet legal compliance standards.
    • Automated PR reviews for accessibility-sensitive PRs.
    • Verifying theme files and design tokens against WCAG contrast thresholds.

    Known limitations

    Cannot resolve contrast for complex gradients or overlapping transparent layers. Requires manually provided values for CSS variables or design tokens defined outside the audited scope.

    Cannot resolve contrast for complex gradients or transparency. Requires resolved values for external CSS variables or design tokens if not provided in the audited files.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    5.0
    1 review
    5
    1
    4
    0
    3
    0
    2
    0
    1
    0

    This skill has been used 8 times.

    Trust & safety

    Security scan

    Security scan passed 3 months ago

    • Free with an Agensi account

    Permissions

    No special permissions declared or detected

    Listed3 months ago

    What's inside

    Frequently Asked Questions

    This skill performs a deep-code scan of your frontend files to identify WCAG 2.1 AA violations, calculating precise contrast ratios and providing specific, copy-pasteable code fixes to remediate issues.

    The auditor is optimized for React, Vue, Svelte, and Tailwind CSS, and it works seamlessly with standard HTML/CSS files and design token sets.

    Simply provide the skill with your source code files or component snippets; it will automatically identify the tech stack and begin the auditing process based on WCAG 2.1 AA standards.

    While it excels at solid colors and hex/RGB values, it cannot currently calculate contrast for complex gradients or elements with multiple overlapping transparency layers.

    Every finding includes a severity rating (from Critical to Minor) and exact line-number references, allowing your team to prioritize high-impact fixes like keyboard traps first.

    Your purchase includes the full agent skill logic to perform unlimited audits across your projects, ensuring consistent accessibility compliance throughout your development lifecycle.

    New in UX & UI Design

    Free