mcpbeat

Update Screenshots

microsoft/update-screenshots

Download screenshot baselines from the latest CI run and commit them. Use when asked to update, accept, or refresh component screenshot baselines from CI, or after the screenshot-test GitHub Action reports differences. This skill should be run as a subagent.

362 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
188278
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/microsoft/vscode --skill update-screenshots

What it tells the agent to use

found in the instruction text
Task spawns other agents

The instruction itself

3 sections, as written by the author

Update Component Screenshots from CI

Screenshot baselines are no longer stored in the repository. They are managed by an external screenshot service (hediet-screenshots.azurewebsites.net). The CI workflow uploads screenshots to this service and diffs them automatically.

When the Checking Component Screenshots GitHub Action detects changes, it posts a PR comment with before/after comparisons. No manual baseline updates are needed — the screenshots on the main branch commit become the new baselines automatically after merge.

What Changed

  • Baseline images were removed from test/componentFixtures/.screenshots/baseline/.
  • Git LFS is no longer used for screenshot storage.
  • The screenshot service stores images keyed by commit SHA and handles diffing.

If Screenshots Need Investigation

  • Check the PR comment posted by the CI workflow for visual diffs.
  • Download the screenshots artifact from the CI run for the raw captured images:
gh run download <run-id> --name screenshots --dir .tmp/screenshots
  • Compare locally if needed. The artifact contains the full set of captured screenshots.

How to use it

Copy the folder

Take microsoft/update-screenshots from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.