PrompTom
Все скилы

Проверка приложения в браузере

webapp-testPROбраузерпроверка

Открывает страницу по-настоящему и смотрит, что видит человек, а не что написано в разметке.

Что делает

  • Срабатывает на «проверь, работает ли», «сделай скриншот», «посмотри на телефоне».
  • Ищет уже установленный браузер, прежде чем что-то скачивать: playwright install тянет сотни мегабайт ради того, что обычно уже лежит на диске.
  • Проверяет продакшен-сборку, а не режим разработки: тот прячет ошибки гидратации и раздаёт стили с другой очередью применения.
  • Меряет горизонтальную прокрутку числом и находит элемент, который вылезает, — а не полагается на глаз.
  • Нажимает на кнопку, а не только смотрит: перекрывающие друг друга элементы воруют нажатия так, что на скриншоте этого не видно.
  • Проверяет обе темы, включая состояние, когда выбор темы не сделан вовсе, — в нём и оказывается большинство.

Зачем он нужен

Классы на месте, а правило проиграло по специфичности; элемент есть, а лежит под другим — разметка об этом не расскажет. Проверка кода и проверка того, что видит человек, — разные действия, и первое регулярно выдают за второе. Скил требует скриншота с указанием ширины и темы, на которых он снят, и запрещает описывать разметку так, будто вы смотрели на страницу.

Куда положить

  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-подборку

Открыть доступ
Проверка приложения в браузере — PrompTom