SKILL / mobile-ui-validation
Mobile UI validation
Find what breaks on phones before your users do. Pages that scroll sideways, seams between bars, small touch targets and inputs that zoom.
- Input
- A local project or URL, the screens and widths you want reviewed, or just the symptom: “there’s a line between the bars”.
- Output
- Findings with measurements, viewport and cause; root-cause fixes when authorized, with before and after in the same scenario.
LIVE DEMO / UI-PROBE.JS
Four defects a screenshot won't show.
This fictional screen is broken on purpose. The same ui-probe.js that ships in the ZIP runs inside the preview and measures the document on every change. Switch widths and compare with the fixed version.
390 × 560 CSS px · display scale 100%
uiProbe.report()
Measuring…
Reproduce it
At 390px and Before, all four checks fail; notice the light line between the header and the tabs. At 768px the overflow disappears but the seam stays: it doesn't depend on width. In After, everything passes.
Run it on your project
Paste ui-probe.js into the browser console, or inject it with Playwright, and call uiProbe.report(). The skill uses these measurements as a starting point and confirms each finding visually before fixing it.
Use it in your project
Extract the ZIP and make the folder available to your SKILL.md-compatible agent. You can also provide the instruction file directly. The package includes references and, where relevant, helper scripts; inspection uses your environment’s browser and code tools.
Example prompt
Use $mobile-ui-validation to review this project’s main screens on mobile and tablet. Investigate the line that appears between the header and the tabs while scrolling, and fix its cause.
The demonstration on this page is local and illustrative. It does not audit external sites or establish accessibility conformance.