Stats
Actions
Tags
Проверить вёрстку frontend-приложения на desktop и mobile через Playwright MCP после изменений в UI.
How this skill is triggered — by the user, by Claude, or both
Slash command
/expense-tracker-plugin:visual-check <страница или пустой аргумент для всех страниц><страница или пустой аргумент для всех страниц>sonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Проверь вёрстку frontend-приложения на desktop и mobile. Если передан аргумент `$0` — проверяй только указанную страницу. Если аргумент пустой — проверяй все страницы приложения.
Проверь вёрстку frontend-приложения на desktop и mobile. Если передан аргумент $0 — проверяй только указанную страницу. Если аргумент пустой — проверяй все страницы приложения.
Изменённые файлы: !git diff --name-only HEAD
Frontend запущен на: http://localhost:3000
| Маршрут | URL |
|---|---|
| Главная (дашборд) | http://localhost:3000 |
| Логин | http://localhost:3000/login |
| Регистрация | http://localhost:3000/register |
| Категории | http://localhost:3000/categories |
| Профиль | http://localhost:3000/profile |
| Режим | Ширина | Высота |
|---|---|---|
| Desktop | 1440 | 900 |
| Mobile | 390 | 844 |
$0 задан — проверяй только соответствующую страницу$0 пустой — определи затронутые страницы по изменённым файлам (git diff --name-only HEAD). Если изменения в общих компонентах (layout, ui-kit) — проверяй все страницыМаппинг директорий → маршруты:
(auth)/login → /login(auth)/register → /register(dashboard)/categories → /categories(dashboard)/profile → /profile(dashboard)/page.tsx или общие компоненты → / (и все остальные)1. browser_resize({ width: 1440, height: 900 })
2. browser_navigate({ url: "<URL страницы>" })
3. browser_wait_for({ time: 1000 }) // дать время на рендер
4. browser_take_screenshot({ filename: "screenshots/desktop-<страница>.png", type: "png", fullPage: true })
5. browser_snapshot() // получить DOM-снапшот для анализа
1. browser_resize({ width: 390, height: 844 })
2. browser_navigate({ url: "<URL страницы>" })
3. browser_wait_for({ time: 1000 })
4. browser_take_screenshot({ filename: "screenshots/mobile-<страница>.png", type: "png", fullPage: true })
5. browser_snapshot()
Проверяй по чеклисту:
Общее:
Desktop:
Mobile:
Выведи итоговый отчёт в формате:
## Результаты визуальной проверки
### <Название страницы> (`<маршрут>`)
**Desktop** — [✅ OK / ⚠️ Замечания / ❌ Ошибка]
- скриншот: screenshots/desktop-<страница>.png
- <описание проблем или "Вёрстка корректна">
**Mobile** — [✅ OK / ⚠️ Замечания / ❌ Ошибка]
- скриншот: screenshots/mobile-<страница>.png
- <описание проблем или "Вёрстка корректна">
---
### Итог
- Проверено страниц: N
- Критических проблем: N
- Замечаний: N
screenshots/ — в корне проекта, не коммитить (добавь в .gitignore при необходимости)npm run dev:frontend и повтори»npx claudepluginhub alaricode/expense-tracker-market --plugin expense-tracker-pluginCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.