Frontend UI validation
This is a visual gate, not a vibe check. A screenshot by itself is not
validation.
Use this to prove that rendered UI has no obvious layout failures: horizontal
overflow, clipped text, sibling overlap, tiny tap targets, console errors,
broken responsive states, weak hierarchy, generic visual filler, or
mismatch with the intended design direction.
This skill is for ad-hoc validation during a task. Persistent Playwright specs
belong in project testing skills.
Workflow
Start the app with the repo's normal dev command.
Open the changed page in a real browser.
Check the page at these widths unless the task gives better targets:
- 390 x 844
- 768 x 1024
- 1440 x 900
At each width, run the bundled layout audit script through Playwright:
node <skill-dir>/scripts/audit-layout.mjs <url>
Read references/browser-layout-audit.md
for what the script catches and how to treat warnings.
Use direct browser/MCP checks when available.
Read references/mcp-browser-checks.md
for screenshot, bounding-box, console, and computed-style checks.
For native React Native / Expo screens, switch to native proof.
Read references/native-expo.md. Browser checks
still apply to web-rendered screens, but native screens need simulator proof
from the mobile app itself.
For Figma, mockup, reference, theme, density, auth, or operational-app
comparisons, read
references/design-specific-checks.md.
Report every real error and warning. If implementation is authorized,
fix each finding and re-run the same viewport and state. Otherwise, return
the evidence and recommended fix without editing source.
Done means
Final response must include evidence like:
390x844: 0 errors, 0 warnings
768x1024: 0 errors, 1 warning intentionally left: <reason>
1440x900: 0 errors, 0 warnings
Console: 0 errors
Screenshots: <paths>
If the audit script could not run, say that and report which MCP checks or
manual checks replaced it.
For native Expo screens, replace browser-width audit lines with the native
evidence from references/native-expo.md. Do not claim browser layout audit
coverage for a screen that only rendered in the simulator.
Avoid
- checking only desktop width;
- saying "looks fine" without audit counts and screenshot paths;
- ignoring script warnings without inspecting the element, text, and box values;
- fixing by mutating the live DOM through browser automation instead of editing
source files;
- checking only the happy state when empty/error/loading states are reachable.
1---2name: frontend-ui-validation3description: Validate web UI with Playwright screenshots, layout checks, responsive states, and reference comparisons.4---56# Frontend UI validation78This is a visual gate, not a vibe check. A screenshot by itself is not9validation.1011Use this to prove that rendered UI has no obvious layout failures: horizontal12overflow, clipped text, sibling overlap, tiny tap targets, console errors,13broken responsive states, weak hierarchy, generic visual filler, or14mismatch with the intended design direction.1516This skill is for ad-hoc validation during a task. Persistent Playwright specs17belong in project testing skills.1819## Workflow20211. Start the app with the repo's normal dev command.22232. Open the changed page in a real browser.24253. Check the page at these widths unless the task gives better targets:2627 - 390 x 84428 - 768 x 102429 - 1440 x 90030314. At each width, run the bundled layout audit script through Playwright:3233 ```bash34 node <skill-dir>/scripts/audit-layout.mjs <url>35 ```3637 Read [references/browser-layout-audit.md](references/browser-layout-audit.md)38 for what the script catches and how to treat warnings.39405. Use direct browser/MCP checks when available.4142 Read [references/mcp-browser-checks.md](references/mcp-browser-checks.md)43 for screenshot, bounding-box, console, and computed-style checks.44456. For native React Native / Expo screens, switch to native proof.4647 Read [references/native-expo.md](references/native-expo.md). Browser checks48 still apply to web-rendered screens, but native screens need simulator proof49 from the mobile app itself.50517. For Figma, mockup, reference, theme, density, auth, or operational-app52 comparisons, read53 [references/design-specific-checks.md](references/design-specific-checks.md).54558. Report every real `error` and `warning`. If implementation is authorized,56 fix each finding and re-run the same viewport and state. Otherwise, return57 the evidence and recommended fix without editing source.5859## Done means6061Final response must include evidence like:6263```text64390x844: 0 errors, 0 warnings65768x1024: 0 errors, 1 warning intentionally left: <reason>661440x900: 0 errors, 0 warnings67Console: 0 errors68Screenshots: <paths>69```7071If the audit script could not run, say that and report which MCP checks or72manual checks replaced it.7374For native Expo screens, replace browser-width audit lines with the native75evidence from `references/native-expo.md`. Do not claim browser layout audit76coverage for a screen that only rendered in the simulator.7778## Avoid7980- checking only desktop width;81- saying "looks fine" without audit counts and screenshot paths;82- ignoring script warnings without inspecting the element, text, and box values;83- fixing by mutating the live DOM through browser automation instead of editing84 source files;85- checking only the happy state when empty/error/loading states are reachable.
jesse-merhi