Update Screenshots
Investigate VS Code component screenshot diffs from CI when the screenshot-test action reports visual changes on a PR.
Overview
Update Screenshots is an agent skill most often used in Ship (also Build docs tooling context) that explains how VS Code CI manages component screenshot baselines via an external service instead of git.
Install
npx skills add https://github.com/microsoft/vscode --skill update-screenshotsWhat is this skill?
- Baselines live on hediet-screenshots.azurewebsites.net keyed by commit SHA—not in the repo
- Git LFS baseline folders under test/componentFixtures were removed from the workflow model
- CI posts before/after PR comments; main-branch commits become baselines after merge automatically
- Download raw captures with gh run download --name screenshots when investigating locally
- Designed to run as a subagent after Checking Component Screenshots reports differences
- Baselines removed from test/componentFixtures/.screenshots/baseline/ in-repo storage
Adoption & trust: 1.3k installs on skills.sh; 186k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your PR failed visual screenshot checks and you still think baselines live in the repo or need manual LFS commits.
Who is it for?
VS Code contributors or fork maintainers responding to component screenshot CI failures on GitHub pull requests.
Skip if: Generic Playwright visual tests, mobile app screenshot stores, or projects that still commit baseline PNGs locally without the hediet screenshot service.
When should I use this skill?
Asked to update, accept, or refresh component screenshot baselines from CI, or after screenshot-test GitHub Action reports differences; run as subagent.
What do I get? / Deliverables
You interpret CI diff comments, download screenshot artifacts with gh, and align review with automatic baseline rollover on main merge.
- Local screenshot artifact folder for comparison
- Documented understanding of post-merge baseline behavior
Recommended Skills
Journey fit
Ship/testing is canonical because the skill activates when CI visual regression checks fail or need review before merge. Testing subphase covers component screenshot comparison workflows tied to GitHub Actions and artifacts.
How it compares
CI investigation playbook for hosted baselines—not a skill to bulk-accept images into git.
Common Questions / FAQ
Who is update-screenshots for?
Developers working on the VS Code codebase (or similar setups) who use agents to handle screenshot-test Action failures on PRs.
When should I use update-screenshots?
In Ship when asked to update, accept, or refresh component screenshot baselines from CI, after visual diffs are posted, or when downloading artifacts to validate intentional UI changes before merge.
Is update-screenshots safe to install?
It guides gh CLI downloads and CI review only; check the Security Audits panel on this page before running as a subagent with shell access.
SKILL.md
READMESKILL.md - Update Screenshots
# 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 1. Check the PR comment posted by the CI workflow for visual diffs. 2. Download the `screenshots` artifact from the CI run for the raw captured images: ```bash gh run download <run-id> --name screenshots --dir .tmp/screenshots ``` 3. Compare locally if needed. The artifact contains the full set of captured screenshots.