Back to Skills

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.

187,277stars41,000forksUpdated 7/9/2026

Security Assessment

Safe(100/100)
Security Score100/100

About update-screenshots

A focused operational procedure for refreshing component screenshot baselines in the VS Code repository from CI, meant to be run as a subagent. It documents a key change in how baselines are managed: screenshot baselines are no longer stored in the repository (the baseline images were removed from test/componentFixtures/.screenshots/baseline/ and Git LFS is no longer used). Instead, an external screenshot service (hediet-screenshots.azurewebsites.net) stores images keyed by commit SHA and performs diffing automatically. The CI workflow uploads screenshots to that service and diffs them, and when the 'Checking Component Screenshots' GitHub Action detects changes it posts a PR comment with before/after comparisons. Because of this design, no manual baseline updates are needed — the screenshots on the main-branch commit automatically become the new baselines after merge. The skill's main value is explaining what to do when screenshots need investigation: check the PR comment posted by the CI workflow for the visual diffs, and download the raw captured images from the CI run's 'screenshots' artifact using the gh run download command with the run id, the screenshots artifact name, and a target directory, then compare locally if needed. The downloaded artifact contains the full set of captured screenshots. It is useful when asked to update, accept, or refresh component screenshot baselines, or after the screenshot-test GitHub Action reports differences, and it primarily corrects the outdated expectation that baselines live in the repo and must be committed by hand, clarifying that the process is now automated through the external service and the main-branch merge rather than through manual commits of image files.

FAQ

Where are screenshot baselines stored now?

No longer in the repository — an external screenshot service (hediet-screenshots.azurewebsites.net) stores images keyed by commit SHA and diffs them automatically; the old baseline directory and Git LFS are gone.

Do I need to manually update or commit baselines?

No — the screenshots on the main-branch commit automatically become the new baselines after merge, so no manual baseline updates are required.

How do I see what changed?

When the 'Checking Component Screenshots' GitHub Action detects changes, it posts a PR comment with before/after visual comparisons.

How do I get the raw captured images?

Download the CI run's 'screenshots' artifact with gh run download, passing the run id, the screenshots artifact name, and an output directory; it contains the full set of captured screenshots for local comparison.

How should this skill be run?

It is intended to be run as a subagent, for tasks like updating, accepting, or refreshing component screenshot baselines or investigating differences the screenshot-test Action reports.

Install update-screenshots

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill