Design Audit

    1

    Audit and fix invisible UI defects like accessibility gaps, broken interactions, and responsive failures in web code.

    $8

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    Design Audit

    Example session with this skill installed

    Run a full design audit on this React component. It's a new signup form using Tailwind. Check for accessibility and responsive issues.

    • Read your context and instructions
    • Compiled the design audit

    I have completed a full design audit of the signup form component. The audit identified 4 findings across Accessibility, Forms, and Responsive families.

    Design Audit Report: Signup Form

    Overall Grade: C (72/100)

    Executive Summary

    The form is visually clean but contains critical accessibility blockers. Keyboard users cannot submit the form, and mobile users will experience layout breaking due to fixed widths.

    Score Card

    CategoryScoreStatus
    Accessibility60High Priority
    Forms & Inputs85Medium Priority
    Responsive75Medium Priority
    Visual Consistency100Pass

    Detailed Findings

    [Critical] Missing Keyboard Interaction

    • Evidence: <div onClick={submitForm} className="bg-blue-500 ...">Sign Up</div>
    • Impact: Users navigating via keyboard (Tab key) cannot focus or trigger the submission.
    • Minimal Fix: Change the div to a button element.

    Better Fix: Use a <button type="submit"> inside a standard <form> element to leverage native browser behavior.

    [High] Missing Form Labels

    • Evidence: <input placeholder="Email Address" ... /> (No associated <label>)
    • Impact: Screen readers will not announce the purpose of the field once the user starts typing.
    • Minimal Fix: Add aria-label="Email Address" to the input.
    • Better Fix: Add a visible <label> element with a proper htmlFor attribute.

    [Medium] Horizontal Overflow on Mobile

    • Evidence: <div className="w-[500px]"> container in a responsive layout.
    • Impact: The form will cut off on devices narrower than 500px (most smartphones).
    • Minimal Fix: Replace w-[500px] with max-w-[500px] w-full.

    Next steps

    1. Convert the div-button to a semantic button to restore keyboard access.
    2. Implement visible labels for all input fields to meet WCAG AA standards.
    3. Update container classes to use max-width for mobile compatibility.

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

    About this skill

    AI agents often ship interfaces that look perfect in a screenshot but fail the moment a real user interacts with them. This skill provides an inspection discipline to catch the invisible defects agents miss: keyboard traps, missing ARIA labels, non-semantic HTML, and broken responsive states. It stops shipping "buttons" that are actually unreachable divs and forms that break on mobile devices.

    What it does

    • Accessibility audits detects focus traps, missing screen reader labels, and contrast failures.
    • Semantic analysis identifies heading jumps, broken landmarks, and misuse of HTML tags.
    • Interaction testing finds missing loading states, unannounced toasts, and focus management gaps.
    • Responsive verification spots small touch targets, horizontal overflow, and layout shifts.
    • Framework specific checks catches React hydration issues, Tailwind focus ring omissions, and shadcn/Radix misconfigurations.

    How it works

    1. Scope by identifying the stack, artifact type, and page intent to prioritize defect families.
    2. Scan source files using the bundled static analyzer to find high-signal mechanical leads.
    3. Audit manually through seven defect families, simulating keyboard, mobile, and low-vision personas.
    4. Score the interface using a standardized rubric to categorize severity from Low to Critical.
    5. Report findings with raw code evidence, user impact descriptions, and minimal code fixes.

    Frameworks & tools

    Works with HTML, JSX, TSX, Vue, Svelte, Tailwind CSS, Bootstrap, and shadcn/Radix. Includes a Python-based static analyzer and optional Playwright integration for runtime checks.

    Why this beats prompting it yourself

    Generic prompts often focus on visual style rather than functional integrity. This skill follows a rigorous multi-phase inspection protocol and severity model that ensures no accessibility or interaction defect is ignored.

    Use cases

    • Reviewing AI-generated components before committing them to a repository.
    • Auditing a landing page for WCAG 2.1 AA compliance before a production launch.
    • Identifying why a dashboard feels "off" or buggy to keyboard and mobile users.
    • Cleaning up technical debt in legacy templates by finding dead ARIA and non-semantic tags.

    Known limitations

    Does not provide performance profiling, SEO analysis, or backend logic verification. It explicitly ignores aesthetic style choices unless they directly impact legibility or consistency.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    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

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scanned

    Verified clean 11 days ago

    • Passed all security checks, Safe to install

    Requires

    Python

    Listed11 days ago

    What's inside

    Frequently Asked Questions