Skip to content
jack in the loop
← all writing
3 min read

Every bug becomes a check

Claude ships pages that pass every test and still look wrong on my phone. So now there's a QA loop: render every page at real phone and desktop widths, in Chrome and Safari's engine, look at every screenshot, fix, repeat. And every new kind of bug gets added to the checklist for every site after it.

claudeqaskills

Here's a failure mode I hit constantly. Claude builds a page. Types check, tests pass, the build is green, the deploy smoke test returns 200. I open it on my phone and the curved text on a badge is sliced off along the top, or the menu stays open after I tap a link, or everything sits in a thin column in the middle of my monitor.

None of that is in the tests, because nobody looked.

The loop

So I wrote a skill that looks. A pass does four things.

  1. Render every page template at five widths: 320, 375 and 390 on an emulated iPhone, 768, and 1440. The phone widths use real device emulation, because a headless browser window quietly won't go narrower than about 500 pixels, and a "390px" screenshot taken the naive way is a cropped 500.
  2. Run the automatic checks in the page: horizontal overflow and the element causing it, text cut by its box, text on an SVG path spilling out of anything that clips it, a sticky header sitting on top of a banner, broken images, tap targets under 44 pixels, console errors, dead links, email addresses on domains with no mail server.
  3. Run it again in WebKit, Safari's engine, on an emulated iPhone. My phone is the test that matters, and Chrome measures fonts differently enough that text can fit in one and clip in the other.
  4. Look at every screenshot. The detectors catch the common cases. The rest needs eyes.

Then fix what's wrong, deploy, and run the pass again, until a pass comes back clean or four passes are up.

The checklist grows

This is the part I care about. Every time a pass, or I, find a kind of bug the checklist doesn't cover, it becomes a check: a number, one line on what to look for, and where it came from. If a browser can see it, it gets a detector too, proved on the page that had the bug.

The file is global, so a bug found on one site is checked on every site from then on. It started the day with twenty checks and ended it with more, several added by agents in the middle of their own QA passes. Some of them:

  • Arc text clipped on a badge. Found on my phone; Chrome passed it.
  • The menu stays open after tapping a link, because nothing closed it when the page changed underneath.
  • Invented testimonials. An agent-written store had a nurse who "told us" something. There was no nurse.
  • Contact addresses on a domain nobody owns, so mail goes nowhere, or to whoever registers it.
  • Copy that contradicts the product, like "real sold prices" on a tool that prices from asking prices.
  • Method traps: a DNS cache that makes a live site look dead, an image tool that crops from the middle and makes a fine screenshot look broken.

Half of those aren't visual at all. They're honesty bugs, and they're the ones I'd least want a reader to find first.

Why it's a skill, not a prompt

A line in a prompt saying "check mobile" gets skipped. A skill with a script, a checklist and a rule for growing the checklist doesn't depend on anyone remembering. It's the same ladder I use for every lesson: a check that runs beats a sentence that asks.

Drafted with Claude from the skill it describes, built the same day.

Next post

Ten loops and a board

→