Agent Skills: Web Quality Audit

Web Quality Audit

Systematically verify web page quality through Chrome DevTools MCP, producing a prioritized issue report.

Audit Modes

Determine the mode from user intent:

• Quick Check (default): Responsive + console errors. Use when user says "check this page" without specifics.
• Full Audit: All checks below. Use when user mentions "full", "deploy", "comprehensive", or "before release".
• Targeted: Single category only. Use when user specifies one area (e.g., "responsive check").

Workflow

1. Setup

Navigate to the target URL using mcp__chrome-devtools__navigate_page. If no URL given, ask the user.

Capture baseline:

• mcp__chrome-devtools__take_snapshot for structural analysis
• mcp__chrome-devtools__take_screenshot for visual reference
• mcp__chrome-devtools__list_console_messages for existing errors

2. Responsive Layout Check

Test these viewports using mcp__chrome-devtools__emulate:

| Device | Width | Height | Touch | |--------|-------|--------|-------| | Desktop | 1920 | 1080 | false | | Tablet | 768 | 1024 | true | | Mobile | 375 | 667 | true |

For each viewport:

1. mcp__chrome-devtools__resize_page to set dimensions
2. mcp__chrome-devtools__take_screenshot to capture layout
3. mcp__chrome-devtools__take_snapshot to check element visibility

Check items:

• Text overflow from containers (especially buttons and cards)
• Horizontal scrollbar appearance
• Element overlap or hidden content
• Navigation usability at each breakpoint

3. Interactive Element Check

Reset to desktop viewport, then:

1. Identify all interactive elements from snapshot (buttons, links, forms)
2. mcp__chrome-devtools__click each primary button - verify response
3. For forms: mcp__chrome-devtools__fill with empty values, submit, verify validation messages appear
4. For links: verify href attributes are non-empty

Check items:

• All buttons are clickable and produce visible response
• Empty form submission triggers validation errors
• No dead links (href="#" or empty)
• Loading/skeleton states appear on data fetch

4. Console and Network Error Check

1. mcp__chrome-devtools__list_console_messages with types: ["error", "warn"]
2. mcp__chrome-devtools__list_network_requests and check for failed requests (4xx/5xx)

Check items:

• Zero uncaught JS errors
• Zero failed resource loads (images, scripts, fonts)
• No CORS errors
• No deprecation warnings in critical paths

5. Accessibility Check

From snapshot, verify:

• All images have alt text (or aria-label)
• Form inputs have associated labels
• Heading hierarchy is sequential (h1 > h2 > h3, no skips)
• Focus order is logical (tab through interactive elements using mcp__chrome-devtools__press_key with "Tab")
• Color contrast via visual screenshot inspection

6. Scroll and Navigation Check

1. mcp__chrome-devtools__evaluate_script to scroll to page bottom:

   () => { window.scrollTo(0, document.body.scrollHeight); return document.body.scrollHeight; }
   

2. mcp__chrome-devtools__take_screenshot at bottom
3. Scroll back to top and verify
4. Check for sticky headers/footers behaving correctly

Issue Severity

Classify each finding:

| Severity | Criteria | Example | |----------|----------|---------| | Critical | Blocks user flow or causes data loss | Button not clickable, form submission fails silently | | Major | Significantly degrades UX | Text overflow making content unreadable, broken responsive layout | | Minor | Cosmetic or non-blocking | Console warning, slight alignment issue |

Report Format

Output findings as:

## Quality Audit Report

**URL**: [audited URL]
**Mode**: [Quick Check / Full Audit / Targeted]
**Verdict**: [PASS / FAIL (Critical issues found) / WARN (Major issues only)]

### Critical Issues
- [severity] [category] Description of issue (viewport/context)

### Major Issues
- [severity] [category] Description of issue (viewport/context)

### Minor Issues
- [severity] [category] Description of issue (viewport/context)

### Summary
- Checked: [list of completed checks]
- Issues: [N] Critical, [N] Major, [N] Minor
- Recommendation: [Go / No-Go / Conditional]

Quick Reference

| Check Category | Quick Check | Full Audit | |---------------|:-----------:|:----------:| | Responsive | Yes | Yes | | Console/Network | Yes | Yes | | Interactive | No | Yes | | Accessibility | No | Yes | | Scroll/Nav | No | Yes |