PrompTom
Tous les skills

Checking the app in a browser

webapp-testPRObrowserverification

Opens the page for real and looks at what a person sees, not at what the markup says.

Ce qu'il fait

  • Triggers on “does it work”, “take a screenshot”, “check it on mobile”.
  • Looks for a browser already installed before downloading anything: playwright install pulls hundreds of megabytes for what is usually already on disk.
  • Tests the production build rather than the dev server, which hides hydration errors and applies styles on a different schedule.
  • Measures sideways scroll as a number and finds the element that overflows, instead of trusting the eye.
  • Clicks the thing rather than only looking at it: overlapping elements steal clicks in ways no screenshot reveals.
  • Checks both themes, including the state where no theme was ever chosen — which is where most viewers are.

À quoi il sert

The class can be present and the rule still lose on specificity; the element can exist and sit behind another one. Markup will not tell you. Checking the code and checking what a person sees are different acts, and the first is routinely passed off as the second. This one demands a screenshot with the width and theme it was taken at, and forbids describing markup as though you had looked at the page.

Où le placer

  1. 1Créez le dossier .claude/skills/webapp-test dans votre projet
  2. 2Placez-y un fichier SKILL.md avec le texte ci-dessous
  3. 3C'est tout. Claude Code charge le skill lui-même quand une tâche correspond à la description

Pour que le skill soit disponible dans tous vos projets et pas un seul, placez-le dans ~/.claude/skills au lieu du dossier du projet.

Fichier SKILL.md

# Checking the app in a browser

Reading the markup is not verification. The class can be present and the
rule still lose to a more specific selector; the element can exist and
sit behind another one. Open the page.

## Getting a browser

Try, in order:

1. A Playwright already in the project (`node_modules/playwright` or
   `@playwright/test`).
2. A browser already on the machine — check `PLAYWRIGHT_BROWSERS_PATH`
   and pass its binary as `executablePath`.

Do not run `playwright install` before checking both. It downloads
hundreds of megabytes to get what is usually already there.

## Serve the real thing

Test the production build, not the dev server, whenever the change
touches layout, caching or data fetching. The dev server hides
hydration errors and serves unminified CSS with different specificity
resolution timing.

## What to check, every time

Le fichier de ce skill fait partie de la sélection PRO

Débloquer l'accès
Checking the app in a browser — PrompTom