ds-mobile

Preamble

"../lib/env.sh" "mobile"

What this skill does

Check if your site works on phones and tablets. I'll show you three side-by-side screenshots — phone, tablet, desktop — and flag anything that looks broken or is hard to use on smaller screens. In plain English. No code until you ask.

Step 1 — Get the URL

Ask the user:

"What page should I check on mobile? Give me the URL (e.g. http://localhost:3000 or your live site URL). If you want me to check a specific page like checkout or signup, say that too."

If the URL was already mentioned in the conversation, confirm it:

"I'll check how [URL] looks on different screen sizes. Sound right?"

Step 2 — Check browse availability

If BROWSE is NOT_FOUND:

"I can't take screenshots without the visual browser. I'll check your code for mobile problems instead — fixed widths, text that's too small, and buttons that are too small to tap."

Then proceed to Step 5 (code-only check).

Step 3 — Take screenshots at three sizes

If the URL is not reachable:

"Your project doesn't seem to be running right now. Start it with npm run dev (or npm start) and then give me the URL — usually http://localhost:3000. I'll wait."

Do not continue until the user confirms the project is running.

# Phone (iPhone size)
$B resize 375 812
"../lib/visual-audit.sh" screenshot "<URL>" "mobile" "375"

# Tablet (iPad size)
$B resize 768 1024
"../lib/visual-audit.sh" screenshot "<URL>" "mobile" "768"

# Desktop
$B resize 1280 900
"../lib/visual-audit.sh" screenshot "<URL>" "mobile" "1280"

Show all three screenshots to the user:

"Here's how your page looks across screen sizes:"

[show /tmp/dstack-mobile-375.png — label: "📱 Phone (375px)"] [show /tmp/dstack-mobile-768.png — label: "📟 Tablet (768px)"] [show /tmp/dstack-mobile-1280.png — label: "🖥️ Desktop (1280px)"]

Step 4 — Check for mobile issues with browser tools

While at each size, run these checks:

At 375px (phone):

$B resize 375 812
$B goto <URL>

# Check for horizontal scroll (content overflowing off screen)
$B js "document.body.scrollWidth > window.innerWidth"

# Find text that might be too small
$B js "Array.from(document.querySelectorAll('p, span, a, li')).filter(el => parseFloat(getComputedStyle(el).fontSize) < 14).map(el => el.tagName + ': ' + el.textContent.slice(0,30)).slice(0,5)"

# Find buttons that are too small to tap (under 44px — the minimum comfortable tap size)
$B js "Array.from(document.querySelectorAll('button, a, input[type=submit], [role=button]')).filter(el => { const r = el.getBoundingClientRect(); return (r.width < 44 || r.height < 44) && r.width > 0; }).map(el => el.tagName + ' ' + (el.textContent || el.value || '').slice(0,20)).slice(0,5)"

# Check for fixed widths that might cause overflow
$B js "Array.from(document.querySelectorAll('[style*=\"width\"]')).filter(el => el.style.width && !el.style.width.includes('%') && !el.style.width.includes('vw') && parseInt(el.style.width) > 375).map(el => el.tagName + ': ' + el.style.width).slice(0,5)"