skills.rest
riez
riezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

broken-ui-a11y-audit

Audit live web pages for visible UI and accessibility issues across viewports.

1|Updated Jan 5, 2023
Search Tags:#accessibility#a11y#browser-testing#visual-regression#ui-audit#broken-ui
One-click install
npx skills add https://github.com/riez/dots --skill broken-ui-a11y-audit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: broken-ui-a11y-audit
Source: https://github.com/riez/dots/tree/main/.config/agentic/skills/broken-ui-a11y-audit
Command: npx skills add https://github.com/riez/dots --skill broken-ui-a11y-audit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams identify visible UI defects and accessibility issues on rendered web pages, focusing on real user-visible breakages rather than static code reviews.

Core Features & Use Cases

  • Live browser verification to catch layout clipping, overflow, and contrast issues.
  • A11y smoke checks that surface focus and keyboard navigation problems.
  • Use cases include validating critical routes across desktop, tablet, and mobile viewports before release.

Quick Start

Open the target page in a live browser and run the audit to surface visible UI and accessibility issues.

Frequently Asked Questions about broken-ui-a11y-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify broken UI and accessibility issues on live web pages?▼

To identify broken UI and accessibility issues on live web pages, run a browser-based audit that records screenshots, notes, and a11y smoke checks across multiple routes and viewports without altering source code.

Can I check layout clipping and contrast problems across desktop, tablet, and mobile viewports?▼

Yes, you can check layout clipping and contrast problems across desktop, tablet, and mobile viewports by applying the live browser verification workflow to multiple routes, documenting visible defects for each screen size.

How do I run an a11y smoke check for keyboard and focus navigation problems?▼

You run an a11y smoke check for keyboard and focus navigation problems by executing the live browser audit, which surfaces real user-visible focus issues and records them alongside layout breakage notes.

Does this accessibility audit require modifying my existing source code?▼

No, this accessibility audit does not require modifying your source code because it operates strictly on rendered web pages in a live browser to document visible UI defects and a11y issues.

What is the best way to document visual regression and UI defects before a release?▼

The best way to document visual regression and UI defects before a release is to validate critical routes using a live browser audit, capturing screenshots and notes of layout overflow, clipping, and contrast issues.

Why should I use a live browser audit instead of a static code review for accessibility?▼

You should use a live browser audit instead of a static code review because it focuses on real user-visible breakage, catching actual layout clipping, overflow, and contrast issues that static analysis misses.

Related Skills

Explore More Design & Creative Skills→
baasith6baasith6

responsive-testing

Capture screenshots of web applications at multiple viewport sizes to identify layout breakages.

Community
Intermediate
JansenAnalyticsJansenAnalytics
5

a11y-audit

Audit web content for WCAG accessibility issues and generate remediation reports.

Community
Intermediate
yonatangrossyonatangross
217

storybook-testing

Test Storybook 9/10 components with Vitest, play() interactions, and Chromatic TurboSnap.

Community
Intermediate
emiljuchnikowskiemiljuchnikowski

browser-capture

Capture browser screenshots at desktop, tablet, and mobile viewports with Playwright.

Community
Intermediate