Does this replace a full WCAG accessibility audit?

No. It focuses on visual accessibility, layout, responsive behaviour, and interface consistency. Semantic HTML, screen-reader behaviour, and other non-visual accessibility areas may require additional testing.

Can it review AI-generated or vibe-coded frontends?

Yes. It can identify common issues in AI-assisted frontend projects such as inconsistent spacing, duplicated UI patterns, arbitrary breakpoints, poor responsive behaviour, and visual accessibility problems.

Does it automatically change my code?

No. By default, it reports and prioritises issues. Code changes should only be made when explicitly requested.

Visual Interface Auditor

Example session with this skill installed

Audit the current mobile navigation component for visual accessibility and responsive design issues. Check colour contrast, text scaling, overflow, breakpoints, touch targets, spacing, typography, images, component states, and design-system inconsistencies. Prioritize the findings by severity and suggest practical fixes.

Read your context and instructions
Compiled the visual interface auditor
Generated the UI component

I have audited the mobile navigation component across narrow mobile (320px) and standard mobile (390px) viewports.

Mobile Navigation Visual Audit

Title	Severity	Location	Issue	Recommended Fix
Clipped Navigation Menu	Critical	`NavMenu.tsx`	Menu container has `max-height: 400px` without overflow-y, cutting off bottom links on small screens.	Change to `max-height: 80vh` and add `overflow-y: auto`.
Undersized Touch Targets	High	`.nav-link`	'Close' icon and menu links have a clickable area of 28x28px.	Increase padding to reach a minimum 44x44px hit area.
Low Contrast State	Medium	`.nav-link:hover`	Muted gray text (#888) on dark background (#222) fails 4.5:1 ratio.	Use the `$color-text-primary` token (#EEE) for all active/hover states.
Focus Ring Clipping	Low	`button.close`	`overflow: hidden` on the header clips the focus-visible outline.	Add `margin` or remove `hidden` to allow the 2px focus ring to render.

Next steps

Increase the touch target padding in styles/navigation.css.
Update the max-height constraints on the mobile drawer to prevent content loss.
Verify contrast using the Chrome DevTools color picker on the rendered staging link.

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

Visual Interface Auditor reviews frontend interfaces for visual accessibility, responsive layout problems, and UI inconsistencies.

It checks for issues such as colour contrast failures, overflow and clipping, broken breakpoints, poor text scaling, small touch targets, inconsistent spacing, typography problems, awkward image cropping, and missing or unclear UI states. The skill is designed for React, HTML, CSS, Tailwind and other modern frontend projects, including interfaces created with AI coding agents or vibe coding.

Findings are grouped by severity and include the affected element, why the issue matters, and a practical recommendation for fixing it.

Use it before launch, after a redesign, during QA, or whenever a frontend needs a focused visual accessibility and responsive-design review.

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.

Visual Interface Auditor