How to use the Progress Screenshots Workflow agent skill

What is an agent skill, and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a task matches the skill's description. This skill covers tasks with a visible result, such as UI, pages, games, 3D, charts and motion.

With the skill active, the agent captures the state before, during and after each visual change. It sends the images to you as files with captions as soon as each is ready, and it looks at every image before sending it. If a picture shows a stray pop-up, half-loaded art, missing fonts or the wrong scene, the agent recaptures it rather than sending it.

• Sends pictures after each meaningful pass, such as the first working version, each big fix, and each round of a scoring loop.
• Captions each picture with what changed and what it proves.
• Labels captures honestly, for example as a headless browser capture or a 390×844 browser viewport check rather than a device test.
• Puts before and after images side by side for comparisons.

Install the skill from a ZIP file

Download the ZIP for workflow-progress-screenshots from the directory page, then unzip it. The skill folder should contain SKILL.md, scripts/capture.mjs and scripts/compare.py.

For a personal setup, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/workflow-progress-screenshots/
• Project install: .claude/skills/workflow-progress-screenshots/ inside your project
• Claude apps: Settings → Capabilities → Skills

Check the requirements before you start

The capture script and the comparison script need a few tools on the machine that runs the agent. The skill also needs a host agent that can send files to you or show images inline.

• Node.js 22 or newer, used by the capture script for its built-in WebSocket.
• Chrome or Chromium installed, or a CHROME path set so the script can find it.
• Python 3 with the Pillow library, used by compare.py.
• A host agent with a file-sending tool or inline image support.

Trigger the skill with natural requests

You do not need special syntax. The skill is triggered by the kinds of things people naturally say during visual work. Its description names phrases such as "show me", "screenshots", "keep giving me screenshots" and "where are the screenshots?", and it also applies before any report that claims a visual change works.

Ask in plain language and say how often you want updates if it matters to you.

• "Show me the new checkout panel once it works."
• "Keep giving me screenshots after each pass."
• "Where are the screenshots? I don't see them."
• "Fix the hover tooltip on the chart and send before and after."

Use the capture and compare scripts

For a headless capture, the agent runs scripts/capture.mjs with a URL and an output file. Settings such as WIDTH and HEIGHT, MOBILE=1 for a 390×844 phone viewport, WAIT_FOR for a ready expression, and SETTLE for a wait in milliseconds are passed as environment variables. For 3D or WebGL scenes, the skill suggests SETTLE=3000 to 5000.

To place images side by side, the agent runs scripts/compare.py with an output file and labelled inputs. Run captures one at a time, because parallel headless Chrome on a busy machine can produce errors and missed frames.

• Desktop: 1600×900 is the suggested size.
• Motion: take a short burst of frames, or send a strip of frames, because a still misses movement.
• Keep capture output in a gitignored folder such as qa/captures/ inside the project.