mobile-uat — Responsive Regression Detector

Mobile UAT — Responsive UX Regression Detector

Created: 2026-05-15 (John, after CEO caught snowit.ba landing 248px mobile overflow that source-only verification missed)
Skill path: ~/.claude/skills/mobile-uat/SKILL.md
Trigger: /mobile-uat <url>, "mob test", "responsive test", "mobile ne valja", "kreiraj mob test"
Author: Vizu/Brad Frost methodology, implemented via Playwright MCP

What it does

Drives a real Chromium browser via Playwright MCP at multiple mobile viewports (iPhone 13 390×844, iPad 768×1024, Android small 360×640) and runs deterministic hard-fail + soft-warn checks.

Hard-fail conditions (verdict = FAIL)

Code	Check	Why it matters
H1	documentElement.scrollWidth > clientWidth + 2	Horizontal page scroll = broken mobile layout
H2	<details>:not([open]) count > 0 (opt-out for FAQs)	Content hidden behind collapsed elements = user thinks page is empty
H3	Text present on desktop but absent on mobile	Content disappeared between viewports
H4	<a>, <button>, <summary> with bounding rect < 44×44px	WCAG 2.5.5 tap target minimum, iOS HIG
H5	<h1>/<h2>/<h3> with empty next-sibling chain	Empty section = layout bug
H6	<p>, <li>, <td> computed font-size < 14px	Microscopic text on mobile = unreadable

Soft-warn conditions (verdict = PARTIAL)

Code	Check
S1	Console errors > 0
S2	Network 4xx/5xx (excluding favicon, analytics)
S3	Cumulative layout shift > 0.1
S4	<img> without alt attribute

When to use

• Mandatory: after any HTML/CSS deploy to a public web app (companion to /deploy-verify)
• Reactive: whenever CEO says "doesn't look good on mobile" / "stvari nestale" / "ne valja na telefonu"
• Audit: existing site responsive sanity check

When NOT to use

• API-only services (no DOM)
• Native apps (use Paul Hudson / Skybound)
• Sites requiring login (skill is unauth-only — extend for auth scenarios later)

Example invocation

/mobile-uat https://snowit.ba/

Output: /tmp/mobile-uat-<run_id>/

• SUMMARY.md — human-readable table per URL × viewport
• verification.json — machine-readable verdict
• screenshots/ — visual evidence per viewport
• console/ — JS errors
• network/ — HTTP requests

Real first run (2026-05-15)

Source-only initial run on snowit.ba legal pages reported PASS (0 hard fails). But real-browser run on the landing index.html caught:

Metric	Value
scrollWidth	638px (vs 390px viewport)
Horizontal overflow	248px
Off-screen elements	5 (hero-content, hero-badge, h1, highlight, hero-subtitle)
Small tap targets	13

Root cause: per-page inline <style> with @media (max-width: 1024px) that set .hero-content max-width:600px without width:100% — parent grid cell was wider than viewport.

After Vizu fix (commit 37389ef): scrollWidth=390, 0 offscreen, hero readable. Same fix swept across 8 SnowIT pages (index + 7 verticals).

Lesson: source-only static checks are not enough for responsive bugs. Real Chromium with computed styles + bounding rects is mandatory.

Related skills

• /deploy-verify — post-deploy gate (general, not responsive-specific)
• /uat-browser — generic in-session UAT via Playwright MCP (broader scope)
• /webapp-testing — Playwright local-app testing

Cost

Approx $0.30–$0.80 per run (Sonnet, 4 viewports × ~3 URLs). Acceptable for any site deploy.

Source

• ~/.claude/skills/mobile-uat/SKILL.md
• ~/.claude/skills/mobile-uat/example-run.md