Skip to content
Get packs

Progress Screenshots Workflow

Makes the agent show you real, captioned screenshots of visual work as it progresses

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

Once installed, the agent sends you actual screenshots of visual changes while it works, instead of only describing them. It captures the state before, during and after each change, checks each image for problems like stray pop-ups or missing fonts, and adds a caption saying what the picture proves. It can use a headless browser script to photograph pages and a Python script to place before and after images side by side.

Great for

  • Developers building UI, web pages, games, 3D or chart work who want to review progress visually
  • Designers or product owners who judge visual work by looking at it and want regular previews
  • Teams that need repeatable before-and-after comparisons of visual fixes

Skip it if

  • Non-visual tasks such as backend logic or data processing, where screenshots add nothing (the skill is aimed at visible results)
  • Environments where running local scripts or launching a headless Chrome browser is not allowed, since the capture tool executes code and needs Chrome installed

Try asking

  • “Redesign the checkout page and keep sending me screenshots after each pass”
  • “Fix the hover state on the nav menu and show me the bug and the fix side by side”
  • “Show me where the screenshots are for the game HUD changes”
Step-by-step guide: how to use Progress Screenshots WorkflowInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    workflow-progress-screenshots.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip workflow-progress-screenshots.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip workflow-progress-screenshots.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a URL it can reach locally, such as a dev server, so captures show the real app rather than mockups
  • Ask for screenshots at the start of the task so the agent knows to send them as it goes rather than only in the final report
  • Check the scripts before installing, since capture.mjs launches a browser and runs JavaScript steps you supply on the page

What's inside

  • scripts/capture.mjs
  • scripts/compare.py
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.