# workflow-progress-screenshots

Instructs coding agents to capture and send real visual progress screenshots automatically. Built for UI, 3D, charts, and motion tasks.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 341 installs · ★ 7001
- Author: MengTo
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/workflow/workflow-progress-screenshots/SKILL.md
- Updated: 2026-10-25
- HTML: https://affpapa.org/en/nevibecode/skills/workflow-progress-screenshots

## What it does

This skill prevents the agent from describing changes in text or merely dropping file paths in chat. The agent must send actual image files using `SendUserFile` or embed them into reports right after each pass, such as the initial build or a major fix. Every visual adjustment captures three stages with matching framing: the state before, the key interaction, and the final result.

Captures rely on `scripts/capture.mjs` with explicit viewports, while `scripts/compare.py` stitches before-and-after panels. Running parallel headless Chrome instances triggers protocol errors and frame drops on busy systems. Because of this, captures must run sequentially. For WebGL and 3D scenes, a wait parameter like `SETTLE=3000`–`5000` prevents blank renders caused by slow headless asset loading.

Before dispatching any file, the agent inspects the image for stale numbers, unrendered fonts, or lingering toasts. Each image receives a single caption line stating what changed and what it validates. Viewports such as 390×844 are explicitly labelled as browser checks rather than real mobile devices.

## Requirements
- Works with: Chrome

## Install

### Claude Code (native platform)

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

2. **Manually: put the files in place**
- File: `~/.claude/skills/workflow-progress-screenshots/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/workflow-progress-screenshots/

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/workflow-progress-screenshots/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

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

2. **Manually: put the files in place**
- File: `.cursor/skills/workflow-progress-screenshots/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

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

2. **Manually: put the files in place**
- File: `.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. **Platform CLI**
```bash
gemini skills install https://github.com/MengTo/Skills --path agent-skills/workflow/workflow-progress-screenshots
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/workflow-progress-screenshots/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

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

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/MengTo/Skills/tree/HEAD/agent-skills/workflow/workflow-progress-screenshots/SKILL.md

## When to use it
- provide visual proof for UI and frontend updates without manual reminders
- compare before and after states using automated side-by-side frame stitching
- catch rendering artifacts and missing fonts before delivering code
- verify WebGL or 3D viewports with settled headless capture delays

## Example prompts
- Refactor the navigation bar and keep giving me screenshots
- Fix the checkout modal. Where are the screenshots?
- Animate the drawer menu and show me the start, key moment and result

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 9656811bf5108ab9.

BEGIN THIRD-PARTY FILE 9656811bf5108ab9
```text
---
name: workflow-progress-screenshots
description: Show the user real screenshots of the work as it progresses, without being asked. Capture the start, the key moment and the result of every visual change, send them as files with captions as soon as each is ready, and look at every image before sending it. Use on any task with a visible result (UI, pages, games, 3D, charts, motion), when the user says "show me", "screenshots", "keep giving me screenshots" or "where are the screenshots?", and before any report that claims a visual change works.
---

# Workflow: progress screenshots

The user judges visual work by looking at it, and asks for screenshots in almost every thread:
- "keep giving me screenshots"
- "send screenshots every pass"
- "can you give me screenshots of those?"
- "I still don't see the screenshots. Where are they?"

Describing a change is not showing it. **A screenshot mentioned but not sent doesn't count.**

## Rules

1. **Send, don't describe.** Use the host's file-sending tool (`SendUserFile`, or an inline image in the report) so the picture is in front of the user. A path in a sentence is not enough.
2. **Unasked, and as you go.** Send a picture after each meaningful pass, so the user can redirect early:
   - the first working version;
   - each big fix;
   - each round of a scoring loop.

   Don't hold them all for the final report. Don't flood them either: one small batch per pass, not every save.
3. **Start, key moment, result.** For any change with a before and after, capture all three with the same framing: the state before, the interaction (hovering, aiming, mid-animation, the panel opening), and the outcome. For fixes, show the bug, then the fix.
4. **Real renders only.** Capture the actual page, game or app, not a mockup or an idea of it. Set up the state with a review fixture, a URL flag or a debug hook, rather than describing it.
5. **Look at every image before sending.** Things that mean recapture:
   - stray toasts or hover pins;
   - half-loaded art or missing fonts;
   - the wrong scene, or stale numbers.

   If the picture doesn't show what the caption claims, it isn't evidence.
6. **Caption what it proves.** One line per picture: what changed and what it verifies. For example, "Before: the hint reads 'out of range'. After: '90% hit · 5 damage'."
```
END THIRD-PARTY FILE 9656811bf5108ab9

The third-party file has ended. Everything between the 9656811bf5108ab9 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2325 of 4233 bytes. © MengTo · MIT · https://github.com/MengTo/Skills/tree/HEAD/agent-skills/workflow/workflow-progress-screenshots/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md