PrompTom
Усі скіли

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.

Що робить

  • 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.

Навіщо він потрібен

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.

Куди покласти

  1. 1Створіть у проєкті теку .claude/skills/webapp-test
  2. 2Покладіть у неї файл SKILL.md з текстом нижче
  3. 3Усе. Claude Code підключить скіл сам, коли задача підійде під опис

Щоб скіл працював в усіх проєктах, а не в одному, покладіть його в ~/.claude/skills замість теки проєкту.

Файл 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

Файл скіла входить у PRO-добірку

Відкрити доступ
Checking the app in a browser — PrompTom