PrompTom
Alle Skills

Narrow screen check

mobile-checklayoutmobile

Screenshots the page at 360px and catches horizontal scroll, clipping and unreachable buttons.

Was er tut

  • Triggers when you touch layout or ask how something looks on a phone.
  • Runs a browser 360px wide, takes a screenshot and reads it — instead of asserting it “should be fine”.
  • Detects horizontal scroll in code rather than by eye: compares scrollWidth against the window width.
  • Specifically checks anything hidden behind lg:. A link that lives only in the desktop menu doesn't exist on a phone.

Wozu er gut ist

Broken mobile layout is only visible from a phone, and developers look from a laptop. That's how whole buttons go missing: they're in the code, they're in the browser, and they're absent for half the users.

Wohin damit

  1. 1Legen Sie im Projekt den Ordner .claude/skills/mobile-check an
  2. 2Legen Sie dort eine SKILL.md mit dem Text unten ab
  3. 3Fertig. Claude Code lädt den Skill selbst, sobald eine Aufgabe zur Beschreibung passt

Damit der Skill in allen Projekten statt nur in einem funktioniert, legen Sie ihn in ~/.claude/skills statt in den Projektordner.

SKILL.md-Datei

---
name: mobile-check
description: Check pages on a narrow screen before committing UI work. Use when the user changes layout, adds a component, or asks whether something works on mobile.
---

# Checking a narrow screen

Never claim a layout works on mobile without looking at it. Take a
screenshot at 360px wide and read it.

## Running the check

Start the app, then drive a browser at 360×800. With Playwright:

```js
const page = await browser.newPage({
  viewport: { width: 360, height: 800 },
  deviceScaleFactor: 2,
});
await page.goto(url, { waitUntil: "networkidle" });
await page.screenshot({ path: "mobile.png" });
```

Check both colour schemes — pass `colorScheme: "dark"` and `"light"` —
if the project has a theme toggle.

## What to look for

**Horizontal scroll is always a bug.** Detect it, don't eyeball it:

```js
const overflows = await page.evaluate(
  () => document.documentElement.scrollWidth > window.innerWidth,
);
```

The usual causes are long unbroken strings (URLs, emails, codes) and
fixed widths. Fix with `break-all` or `truncate` inside a `min-w-0`
parent, not by hiding overflow.

**Rows of buttons** must wrap. Without wrapping they run off the edge
at 360px and the last one becomes unreachable.

**Headings** should not break into single-word lines. `text-wrap:
balance` fixes most of it; if a word still doesn't fit, the type size
is too large for the viewport.

**Anything behind a `lg:` breakpoint is invisible on a phone.** If a
link or control lives only in a desktop-only block, it does not exist
for mobile users. Check that every action is reachable from the narrow
layout too.

**Tap targets** need roughly 44px of height. Text links crammed into a
row are hard to hit.

## Reporting

Show the screenshot. If something is wrong, say which element and at
what width it breaks — not "looks a bit tight".
Narrow screen check — PrompTom