Take mobile viewport screenshots of any URL with a single command.
Instructions
When /mobile-preview is invoked, follow this workflow:
1. Parse Arguments
The user may provide:
- A URL to open (or nothing, to use the current page)
- A device name (default:
iphone-14)
- Multiple devices separated by commas (e.g.,
iphone-14,ipad-mini)
Examples:
/mobile-preview http://localhost:3000 - iPhone 14 preview of localhost
/mobile-preview http://localhost:3000 pixel-7 - Pixel 7 preview
/mobile-preview iphone-se,ipad-air - Two devices, current page
/mobile-preview http://localhost:3000 iphone-14,ipad-mini,pixel-7 - Multiple devices
2. Open Page (if URL provided)
browser-use open <url>
If no URL given and no browser session is active, ask the user for a URL.
3. Set Mobile Viewport
For each device requested:
browser-use python "DEVICE='<device-name>'" && browser-use python --file $STRATA_HOME/skills/browser-use/mobile-viewport.py
4. Reload and Wait
After setting the viewport, reload the page so responsive CSS recalculates:
browser-use eval "location.reload()"
Wait briefly for rendering to settle:
browser-use wait text ""
5. Take Screenshots
Take above-the-fold screenshot:
browser-use screenshot $HOME/temp/mobile-<device>-top.png
Then scroll down and capture below the fold:
browser-use scroll down
browser-use screenshot $HOME/temp/mobile-<device>-scroll.png
Use the Read tool to view each screenshot immediately after taking it.
6. Multiple Devices
If multiple devices were requested, repeat steps 3-5 for each device. Use the device name in the filename to differentiate.
7. Restore Desktop
After all screenshots are taken, reset the viewport:
browser-use python "DEVICE='desktop'" && browser-use python --file $STRATA_HOME/skills/browser-use/mobile-viewport.py
8. Report
Summarize what was captured using this format:
MOBILE PREVIEW: [URL]
====================
Devices: [list]
Screenshots: [count] saved to $HOME/temp/
Issues found:
[HIGH] Horizontal overflow on [element] at [device] viewport
[MEDIUM] Text truncated in [element] - needs line-clamp or responsive font
[LOW] Touch target too small: [element] is [N]px (min 44px recommended)
No issues found. / [N] issues need attention.