ux-audit

Independent UX Audit

Independent UX quality audit using Gemini as the judge. Takes screenshots of live pages at multiple viewports and themes, sends them to Gemini for scoring across 7 UX dimensions. Produces actionable report with per-page breakdown.

Use when user says "ux audit", "audit the ux", "ux score", "design audit", "audit this site", "independent audit", "score the ux", "ux review", or wants an independent design evaluation of a website.

Arguments

• /ux-audit <url> -- quick mode: screenshot-based scoring (default)
• /ux-audit <url1> <url2> ... -- audit specific pages
• /ux-audit <url> --focus "mobile, typography" -- audit with focus areas
• /ux-audit deep <url> -- deep mode: Gemini autonomously browses and tests the site
• /ux-audit deep <url> --auth <login_url> <user> <pass> -- deep mode with auth credentials

Workflow

Step 1: Prepare

rm -rf /tmp/ux-audit && mkdir -p /tmp/ux-audit

Parse the arguments to get the list of URLs to audit. If only a domain is given (e.g., https://example.com), infer the key pages (typically /, /about, /pricing, /waitlist, /docs).

Step 2: Capture Screenshots

Use chrome-devtools MCP tools for screenshot capture. For EACH URL:

2a. Navigate and prepare:

navigate_page(type="url", url="<URL>")

Wait for load, then force any reveal animations:

evaluate_script: () => {
  document.querySelectorAll('[data-reveal]').forEach(el => el.setAttribute('data-reveal', 'visible'));
  return 'ready';
}

2b. Desktop Light (1280x800):

evaluate_script: () => { document.documentElement.dataset.theme = 'light'; return 'light'; }

Wait 1s, then:

take_screenshot(fullPage=true, filePath="/tmp/ux-audit/{slug}-desktop-light.png")

2c. Desktop Dark:

evaluate_script: () => { document.documentElement.dataset.theme = 'dark'; return 'dark'; }

Wait 1s, then:

take_screenshot(fullPage=true, filePath="/tmp/ux-audit/{slug}-desktop-dark.png")

2d. Resize to mobile:

resize_page(width=390, height=844)