# workflow-progress-screenshots

Скилл обязывает агента присылать реальные скриншоты интерфейса по ходу работы, а не в конце задачи. Пригодится при правках фронтенда, анимаций, 3D-сцен и вёрстки.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 341 установка · ★ 7001
- Автор: MengTo
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/workflow/workflow-progress-screenshots/SKILL.md
- Обновлён: 2026-10-25
- HTML: https://affpapa.org/nevibecode/skills/workflow-progress-screenshots

## Что делает

Скилл запрещает агенту заменять картинки текстовыми описаниями или просто указывать путь к файлу на диске. Вместо этого агент отправляет файлы через `SendUserFile` или встраивает их прямо в отчёт после каждого значимого прохода: первой рабочей сборки или крупного исправления. Для наглядности фиксируются три состояния с одинаковым ракурсом: до изменения, ключевое взаимодействие и итоговый результат.

Для съёмки страниц используется headless-скрипт `scripts/capture.mjs` с параметрами вьюпорта, а сравнение собирает `scripts/compare.py`. Параллельный запуск нескольких сессий headless Chrome на нагруженной машине приводит к протокольным сбоям и потере кадров, поэтому агент обязан снимать экраны по очереди. Для трёхмерных сцен и WebGL задаётся задержка `SETTLE=3000`–`5000`, иначе на снимок не успевают подгрузиться шрифты или 3D-модели.

Перед отправкой ассистент проверяет каждый кадр на артефакты, пропавшие шрифты и зависшие уведомления. Все снимки снабжаются однострочными подписями с честным указанием окружения: например, размер 390×844 помечается как окно браузера, а не реальный смартфон.

## Требования
- Работает с: Chrome

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill workflow-progress-screenshots -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill workflow-progress-screenshots -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill workflow-progress-screenshots -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MengTo/Skills workflow-progress-screenshots
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill workflow-progress-screenshots -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/workflow/workflow-progress-screenshots
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add MengTo/Skills --skill workflow-progress-screenshots -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/workflow/workflow-progress-screenshots/SKILL.md

## Когда брать
- показывать визуальный прогресс правок UI без лишних напоминаний
- сравнивать состояние интерфейса до и после фикса через скрипт склейки кадров
- отслеживать поломки анимаций и вёрстки на промежуточных этапах работы
- проверять отображение 3D-сцен и WebGL с учётом времени рендеринга

## Примеры запросов агенту
- Сделай мобильное меню и показывай скриншоты каждого шага
- Поправь вёрстку корзины. Где скриншоты до и после?
- Покажи промежуточные результаты вёрстки дашборда

## Похожие
- [visual-qa-testing](https://affpapa.org/nevibecode/skills/visual-qa-testing.md) — скилл · 642 установки
- [app-store-screenshots](https://affpapa.org/nevibecode/skills/parthjadhav-app-store-screenshots.md) — скилл · 15000 установок
- [frontend-visual-qa](https://affpapa.org/nevibecode/skills/frontend-visual-qa.md) — скилл · 572 установки
- [aso-appstore-screenshots](https://affpapa.org/nevibecode/skills/aso-appstore-screenshots.md) — скилл · 836 установок
- [cross-browser-testing](https://affpapa.org/nevibecode/skills/cross-browser-testing.md) — скилл · 1100 установок
- [puppeteer-automation](https://affpapa.org/nevibecode/skills/puppeteer-automation.md) — скилл · 1800 установок

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

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