Update Screenshots

This handles the workflow for accepting new screenshot baselines after your CI detects visual changes. The project moved away from storing baseline images in the repo or Git LFS, so everything now lives in an external screenshot service keyed by commit SHA. When the GitHub Action flags differences in a PR, you run this skill to pull down the latest screenshots from CI and commit them. It's meant to run as a subagent, which makes sense since it's a focused task you'd trigger after reviewing the before/after comparisons the bot posts. Saves you from manually downloading artifacts and moving files around when you're confident the visual changes are intentional.

skills.sh installs: 3K
GitHub stars: 195.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add microsoft/vscode --skill update-screenshots --agent claude-code

Installs into .claude/skills of the current project.

Files

Update Component Screenshots from CI

Screenshot images are not stored in the repository — they live in an external service (hediet-screenshots.azurewebsites.net), keyed by commit SHA. But a subset of fixtures is pinned by hash in test/componentFixtures/blocks-ci-screenshots.md, and that file is committed. When those hashes change, CI fails and you must update the file.

Two different outcomes, only one of which blocks

The Screenshots & Tests job in .github/workflows/component-fixtures.yml produces two independent results:

Result	Blocking?	Action
Screenshot diff report (PR comment with before/after images)	No — informational	Review the visuals. Nothing to commit.
blocks-ci hash mismatch	Yes — fails the check	Update `blocks-ci-screenshots.md` and commit.

A fixture opts into the blocking gate with labels: { kind: 'screenshot', blocksCi: true }. Only those fixtures appear in blocks-ci-screenshots.md.

The failure looks like this:

SKILL.md on GitHub