New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Workflow Progress Screenshots

by MengTo in MengTo/Skills

Show the user real screenshots of the work as it progresses, without being asked.

MITAuto-check passed

Install Workflow Progress Screenshots

skills CLI
$ npx skills add MengTo/Skills --skill workflow-progress-screenshots -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install MengTo/Skills workflow-progress-screenshots --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/MengTo/Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agent-skills/workflow/workflow-progress-screenshots .claude/skills/workflow-progress-screenshots && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
workflow-progress-screenshots
GitHub stars
6.6k
Token cost
~1.1k tokens
SKILL.md length
584 words
Files
3 (incl. scripts)
Skills in repo
39
Repo updated
First seen
Licence
MIT

At a glance

Show the user real screenshots of the work as it progresses, without being asked.

  • Works in 8 steps: Send, don't describe. Use the host's… → Unasked, and as you go. Send a picture… → Start, key moment, result. For any… → …
  • Keep giving me screenshots
  • SKILL.md covers Rules, How to capture and In the final report
  • Runs JavaScript and Python scripts from its folder

What it does

Workflow Progress Screenshots is an agent skill from MengTo/Skills. 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.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/compare.py`).

The repository describes itself as: Agent skills for designers and builders using Codex, Claude, Cursor, and other AI coding agents. The licence is MIT.

When your agent uses it

  • Keep giving me screenshots
  • Where are the screenshots?
  • Before any report that claims a visual change works

Example prompts

  • “show me”
  • “screenshots”
  • “keep giving me screenshots”
  • “/workflow-progress-screenshots”

Requirements

  • Python 3
  • Node.js

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  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…
  2. Unasked, and as you go. Send a picture after each meaningful pass, so the user can redirect early
  3. Start, key moment, result. For any change with a before and after, capture all three with the same framing: the state before, the…
  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…
  5. Look at every image before sending. Things that mean recapture
  6. Caption what it proves. One line per picture: what changed and what it verifies. For example, "Before: the hint reads 'out of range'…
  7. Label honestly. Say "headless browser capture" or "browser viewport". A 390×844 viewport is a phone-sized browser check, not a device…
  8. Same framing for comparisons. Use the same viewport, camera and state for before and after. Put them side by side with compare.py.

What it can do on your machine

Read from SKILL.md and the folder at commit 83a47fe. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript and Python), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Workflow Progress Screenshots loads about 1.1k tokens when it runs. Until then it costs about 132 tokens; SKILL.md has 584 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~132
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from MengTo/Skills at commit 83a47fe, republished under its MIT licence (© MengTo). 584 words, ~1,057 tokens.

Download SKILL.mdSave it as .claude/skills/workflow-progress-screenshots/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
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'."

  7. Label honestly. Say "headless browser capture" or "browser viewport". A 390×844 viewport is a phone-sized browser check, not a device test. Scripted or staged moments are named as staged.

  8. Same framing for comparisons. Use the same viewport, camera and state for before and after. Put them side by side with compare.py.

Show full SKILL.md (237 more words)Show less

How to capture

  • The in-app browser pane is fine while it's visible. A hidden pane stalls requestAnimationFrame and returns stale or black frames, so use headless capture then.
  • Headless: scripts/capture.mjs <url> <out.png>, with WIDTH/HEIGHT, MOBILE=1, WAIT_FOR="<ready expression>", SETTLE=<ms>, and JS steps to click, open or scroll. It prints page errors, so a broken page gets caught instead of photographed.
    • 1600×900 for desktop, MOBILE=1 for a 390×844 phone viewport.
    • SETTLE=3000–5000 for WebGL or 3D scenes; they render slowly headless, and an early shot misses models, fonts and icons.
    • Run captures one at a time. Parallel headless Chrome on a busy machine gives protocol errors and missed frames.
  • Side by side: scripts/compare.py out.jpg before.png "Before" after.png "After", or three panels for start, key moment and result.
  • Motion: a still misses what moves. Take a short burst of frames through the effect, and slow the page clock if the app exposes one. Or send a strip of frames.
  • If the project names a specific capture tool (for example "use the Codex browser"), use it.
  • Keep capture scripts and output in a gitignored folder inside the project (such as qa/captures/), not a scratchpad the app wipes on restart.

In the final report

  • The screenshots go inline, each with its caption, after the summary of what changed.
  • Say which were headless captures, and which viewport a phone check used.
  • If something couldn't be captured, say so and why. Don't substitute a description.

© MengTo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (scripts) in agent-skills/workflow/workflow-progress-screenshots of MengTo/Skills.

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

Open the folder on GitHubat commit 83a47fe

Compare with similar skills

Workflow Progress Screenshots next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Workflow Progress Screenshots compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Workflow Progress Screenshots this skillMengTo/Skills6.6k—~1.1kAutomated safety check: PassMIT
Screenshotnexu-io/open-design100k—~291Automated safety check: PassApache-2.0
Tabler Screenshot Makertabler/tabler42k—~1.3kAutomated safety check: PassMIT
Electron App Screenshotkeybase/client9.3k—~476Automated safety check: PassBSD-3-Clause
Screenshots Marketingnexu-io/open-design100k—~301Automated safety check: PassApache-2.0
Progressive Jpegthedaviddias/Front-End-Checklist74k—~426Automated safety check: PassMIT

Similar skills

  • Screenshot

    nexu-io/open-design

    Capture desktop, app windows, or pixel regions across OS platforms.

    100k GitHub stars~291 tokensUpdated today
    Testing & QAAuto-check passed

  • Tabler Screenshot Maker

    tabler/tabler

    Makes reproducible screenshots of Tabler components and screens for release notes, the website and social posts, using the repository's screenshots app.

    42k GitHub stars~1.3k tokensUpdated today
    DevelopmentAuto-check passed

  • Electron App Screenshot

    keybase/client

    Takes a screenshot of a running Electron desktop app through playwright-cli over remote debugging, shrinks it and shows it so you can check the UI visually.

    9.3k GitHub stars~476 tokensUpdated today
    Testing & QAAuto-check passed

  • Screenshots Marketing

    nexu-io/open-design

    Generate marketing screenshots with Playwright. An agent skill from nexu-io/open-design.

    100k GitHub stars~301 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Progressive Jpeg

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing image assets, markup, and CDN or build transforms related to Use progressive JPEG encoding.

    74k GitHub stars~426 tokensUpdated yesterday
    Auto-check passed

  • iOS Screenshot

    keybase/client

    This skill should be used when the user asks to "take an iOS screenshot", "screenshot the simulator", "show me the iOS app", "what does the screen look like", or mentions checking the iOS simulator…

    9.3k GitHub stars~282 tokensUpdated today
    MobileAuto-check passed

More from MengTo/Skills

All 39 skills in this repo

  • Illustration Bold Pop

    MengTo/Skills

    Draws hand-authored SVG spot illustrations in a bold pop-geometric style for design and coding scenes.

    6.6k GitHub stars~5.1k tokensUpdated yesterday
    Auto-check passed

  • Flat Vector Illustration Style

    MengTo/Skills

    Draws a slim, long-limbed character acting out one coding or design moment as an outline-free flat SVG card, in a fixed measured palette with confetti and no ground line.

    6.6k GitHub stars~4.9k tokensUpdated yesterday
    Auto-check passed

  • Flat Illustration With Black

    MengTo/Skills

    Draws flat vector spot illustrations of lanky people doing design and coding things, with solid black as a main fill, for empty states, onboarding and error pages.

    6.6k GitHub stars~5.2k tokensUpdated yesterday
    Auto-check passed

  • Grainy Gouache Illustration

    MengTo/Skills

    Draws cozy animal scenes as hand-authored 480x360 SVG cards in a grainy, risograph-like gouache style on hot pink, for empty states, headers and marketing cards.

    6.6k GitHub stars~5.2k tokensUpdated yesterday
    Auto-check passed

  • Illustration Halftone Line

    MengTo/Skills

    Draws hand-authored SVG spot illustrations in a halftone line style for design and coding scenes.

    6.6k GitHub stars~4.7k tokensUpdated yesterday
    Auto-check passed

  • Illustration Ink Sketch

    MengTo/Skills

    Draws hand-inked cartoon critters and living objects as SVG cards (480x360), each acting out a coding or design idea.

    6.6k GitHub stars~4.6k tokensUpdated yesterday
    Auto-check passed

Questions about Workflow Progress Screenshots

What does Workflow Progress Screenshots do?

Show the user real screenshots of the work as it progresses, without being asked. Workflow Progress Screenshots is an agent skill from MengTo/Skills. Show the user real screenshots of the work as it progresses, without being asked.

When should I use Workflow Progress Screenshots?

Workflow Progress Screenshots fits situations like: keep giving me screenshots; where are the screenshots?; before any report that claims a visual change works.

How do I install Workflow Progress Screenshots in Claude Code?

Run `npx skills add MengTo/Skills --skill workflow-progress-screenshots -a claude-code`. Or copy the skill folder (agent-skills/workflow/workflow-progress-screenshots in MengTo/Skills) into .claude/skills/workflow-progress-screenshots in your project. Claude Code loads it when a task matches its description.

How do I install Workflow Progress Screenshots in Codex?

Run `npx skills add MengTo/Skills --skill workflow-progress-screenshots -a codex`. Or copy the skill folder (agent-skills/workflow/workflow-progress-screenshots in MengTo/Skills) into .agents/skills/workflow-progress-screenshots in your project. Codex loads it when a task matches its description.

Can I use Workflow Progress Screenshots in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MengTo/Skills --skill workflow-progress-screenshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/workflow-progress-screenshots, .gemini/skills/workflow-progress-screenshots, .github/skills/workflow-progress-screenshots and .opencode/skills/workflow-progress-screenshots in your project.

What does Workflow Progress Screenshots need to run?

Going by SKILL.md and its folder, Workflow Progress Screenshots needs JavaScript and Python for the scripts in its folder. Our summary lists: Python 3; Node.js.

Does Workflow Progress Screenshots access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Workflow Progress Screenshots safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Workflow Progress Screenshots use?

Workflow Progress Screenshots is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Workflow Progress Screenshots use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Workflow Progress Screenshots?

Skills that share tags, products or a category with Workflow Progress Screenshots: Screenshot (nexu-io/open-design, 100k stars), Tabler Screenshot Maker (tabler/tabler, 42k stars), Electron App Screenshot (keybase/client, 9.3k stars) and Screenshots Marketing (nexu-io/open-design, 100k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Workflow Progress Screenshots?

MengTo (a GitHub user) maintains it in MengTo/Skills, which has 6,647 GitHub stars. The repository holds 39 skills in this directory. The repository was last updated on October 6, 2026.

Source: MengTo/Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.