WA

Web UI Accessibility Audit

Run any web page or component through 100 established rules covering accessibility, layout, semantics, and performance.

Designp4griffin-wooldridge
Or just install the prompt above — no subscription needed

About this skill


name: web-ui-accessibility-audit description: Run any web page or component through 100 established rules covering accessibility, layout, semantics, and performance. Use when working on web ui accessibility audit.

Web UI Accessibility Audit

Wraps Vercel Labs' web design guidelines skill. Reads source (not screenshots), returns file-and-line violations, and prescribes fixes. Focused on shipped codebases rather than net-new design. Use on any production UI before a launch or after a major refactor.

What you get

  • Line-referenced audit report
  • WCAG mapping
  • Performance flags
  • Ordered fix plan
  • Severity ranking
  • Automated patches where safe

Customize your output

  • WCAG level: A, AA, AAA
  • Component scope: page, component, whole site
  • Framework: React, Vue, Svelte, plain HTML
  • Auto-patch: yes, ask, no
  • Include performance: yes, no
  • Report format: markdown, HTML

Example output

'Audit flagging 12 contrast failures, 4 missing aria-labels, and a layout-shift pattern with patches.'

Best for

Front-end teams shipping to production.


Note: Not meant to produce new UI. It critiques existing. High confidence.

Source: Griffin Wooldridge · https://www.youtube.com/watch?v=iZl5vH81jZM Category: Design · Priority: P4

SKILL.md preview

---
name: web-ui-accessibility-audit
description: Run any web page or component through 100 established rules covering accessibility, layout, semantics, and performance. Use when working on web ui accessibility audit.
---

# Web UI Accessibility Audit

Wraps Vercel Labs' web design guidelines skill. Reads source (not screenshots), returns file-and-line violations, and prescribes fixes. Focused on shipped codebases rather than net-new design. Use on any production UI before a launch or after a major refactor.

## What you get

- Line-referenced audit report
- WCAG mapping
- Performance flags
- Ordered fix plan
- Severity ranking
- Automated patches where safe

## Customize your output

- **WCAG level**: A, AA, AAA
- **Component scope**: page, component, whole site
- **Fr...