# screenshot

Скилл помогает проверять изменения интерфейса по скриншотам на desktop, tablet и mobile. Пригодится для UI-проверок и pull request.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 380 установок · ★ 78
- Автор: bobmatnyc
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/universal/verification/screenshot/SKILL.md
- Обновлён: 2026-07-18
- HTML: https://affpapa.org/nevibecode/skills/bobmatnyc-screenshot

## Что делает

Скилл задаёт workflow визуальной проверки интерфейса. Для изменений UI он предлагает делать снимки в трёх размерах: `1920x1080`, `768x1024` и `375x667`. В проверку входят полная страница, состояния элементов, сравнение до и после, а также заметки о responsive-поведении.

Снимки можно получать через DevTools или скрипты на Playwright и Puppeteer. Для Playwright предусмотрен запуск `node screenshot.js`, а тесты визуальных регрессий используют `@playwright/test`. Сценарий обращается к `http://localhost:3000`, поэтому эта страница должна быть доступна перед запуском.

Результаты оформляются в описании pull request: изображения показывают изменения, состояния компонентов и проблемы на разных viewport. Это помогает ревьюеру увидеть интерфейс без локального запуска проекта.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill screenshot -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/screenshot/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/screenshot/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill screenshot -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/screenshot/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill screenshot -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/screenshot/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bobmatnyc/claude-mpm-skills screenshot
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/screenshot/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill screenshot -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bobmatnyc/claude-mpm-skills --path universal/verification/screenshot
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/screenshot/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bobmatnyc/claude-mpm-skills --skill screenshot -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/bobmatnyc/claude-mpm-skills/tree/HEAD/universal/verification/screenshot/SKILL.md

## Когда брать
- проверить UI на desktop, tablet и mobile
- сравнить интерфейс до и после исправления
- зафиксировать hover, active, error и loading-состояния
- поймать горизонтальный скролл и проблемы responsive-разметки
- добавить скриншоты в описание pull request

## Примеры запросов агенту
- Проверь изменения интерфейса на `1920x1080`, `768x1024` и `375x667` и подготовь скриншоты для pull request.
- Запусти `node screenshot.js` и сравни desktop- и mobile-версии страницы.
- Сделай визуальный тест главной страницы через `@playwright/test` и сохрани снимки для регрессии.

## Похожие
- [browser-screenshot-diff](https://affpapa.org/nevibecode/skills/browser-screenshot-diff.md) — скилл · 696 установок
- [screenshot-ui-analyzer](https://affpapa.org/nevibecode/agents/screenshot-ui-analyzer.md) — субагент · 1018 установок
- [screenshot-interaction-analyzer](https://affpapa.org/nevibecode/agents/screenshot-interaction-analyzer.md) — субагент · 414 установок
- [argent-screenshot-diff](https://affpapa.org/nevibecode/skills/argent-screenshot-diff.md) — скилл · 25000 установок
- [full-page-screenshot](https://affpapa.org/nevibecode/skills/full-page-screenshot.md) — скилл · 564 установки
- [UI Verify](https://affpapa.org/nevibecode/mcp/ui-verify.md) — MCP-сервер · ★ 24

## Другие версии с тем же именем
- [screenshot · nexu-io](https://affpapa.org/nevibecode/skills/nexu-io-screenshot.md) — 2700 установок
- [screenshot · zernie](https://affpapa.org/nevibecode/skills/zernie-screenshot.md) — 337 установок
- [screenshot · davila7](https://affpapa.org/nevibecode/skills/screenshot.md) — 119 установок

Из того же набора: [bobmatnyc/claude-mpm-skills](https://affpapa.org/nevibecode/by/bobmatnyc/claude-mpm-skills.md) — 125 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md