---
name: review-a-screen
description: "Check a screen in the browser at real sizes, like a designer would. Use when the user says \"review this screen\", \"check the layout\" or \"does this look right\"."
license: MIT
metadata:
  author: Tony Gorb
  source: https://github.com/tonygorb/skills
  category: design
  cover: "2 sizes"
---

# Review a screen

Look at the real thing, at real sizes, before anyone says it's done.

## Steps

1. Open only the screens that changed.
2. Look at each one on a laptop (1440 wide) and a phone (390 wide).
3. Take a screenshot of each size, and look at it properly.
4. Check spacing, alignment and text that wraps or gets cut off.
5. Tab through it: every button reachable, the focus always visible.
6. Check the empty, loading and error states, not only the happy one.

## Before it's done

- Look again after every fix.
- Show the screenshots, each size labelled.

## Never

- Never say it's done without screenshots.
- Never judge a screen from the code alone.

## What to hand back

For each screen: the sizes you looked at, what you found, what you fixed, and the screenshots.