Check on mobile

Goes over a screen at phone, tablet and desktop widths and points out what breaks before anyone else sees it.

Cuándo se usa

When you finish a new view or change the layout of an existing one.

SKILL.md

# Check on mobile

Review the given view at three widths: 390px (phone), 820px (tablet) and 1440px
(desktop). If the user does not say which view, ask for the route or the file.

## What to check, in this order

1. **Horizontal overflow.** Nothing should push the page width. Usual suspects:
   tables, code blocks, images without max-width, grids with fixed-width columns
   and long unbroken words.
2. **Readable text.** At least 16px for body copy on phones, and line length
   under 75 characters on desktop.
3. **Touch targets.** Anything tappable needs at least 44x44px of real area,
   padding included, with enough space between neighbours.
4. **Dead breakpoints.** Widths where the layout is not broken but is ugly: two
   cramped columns, an orphan card on the last row, text that jumps around.
5. **Viewport heights.** With the keyboard open on a phone, 100vh cuts content
   off: check whether dvh is needed.

## How to answer

List the defects from most to least severe. Each one with the width where it
shows, the file and line, and the concrete fix in one sentence. If nothing is
broken, say so in one line and do not pad it.