Update Component Screenshots from CI

When asked to update, accept, or refresh screenshot baselines from CI — or when the Screenshot Tests GitHub Action has failed with screenshot differences — follow this procedure to download the CI-generated screenshots and commit them as the new baselines.

Why CI Screenshots?

Screenshots captured locally may differ from CI due to platform differences (fonts, rendering, DPI). The CI (Linux, ubuntu-latest) is the source of truth. This skill downloads the CI-produced screenshots and commits them as baselines.

Prerequisites

The gh CLI must be authenticated (gh auth status).
The Screenshot Tests GitHub Action must have run and produced a screenshot-diff artifact.

Procedure

1. Find the latest screenshot artifact

If the user provides a specific run ID or PR number, use that. Otherwise, find the latest run:

# For a specific PR:
gh run list --workflow screenshot-test.yml --branch <branch> --limit 5 --json databaseId,status,conclusion,headBranch

# For the current branch:
gh run list --workflow screenshot-test.yml --branch $(git branch --show-current) --limit 5 --json databaseId,status,conclusion

Pick the most recent run that has a screenshot-diff artifact (runs where screenshots matched won't have one).

2. Download the artifact

gh run download <run-id> --name screenshot-diff --dir .tmp/screenshot-diff

The artifact is uploaded from two paths (test/componentFixtures/.screenshots/current/ and test/componentFixtures/.screenshots/report/), but GitHub Actions strips the common prefix. So the downloaded structure is:

current/ — the CI-captured screenshots (e.g. current/baseUI/Buttons/Dark.png)
report/report.json — structured diff report
report/report.md — human-readable diff report

3. Review the changes

Show the user what changed by reading the markdown report:

cat .tmp/screenshot-diff/report/report.md

4. Copy CI screenshots to baseline

# Remove old baselines and replace with CI screenshots
rm -rf test/componentFixtures/.screenshots/baseline/
cp -r .tmp/screenshot-diff/current/ test/componentFixtures/.screenshots/baseline/

5. Clean up

rm -rf .tmp/screenshot-diff

6. Stage and commit

git add test/componentFixtures/.screenshots/baseline/
git commit -m "update screenshot baselines from CI"

7. Push LFS objects before pushing

Screenshot baselines are stored in Git LFS. The git lfs pre-push hook is not active in this repo (husky overwrites it), so LFS objects are NOT automatically uploaded on git push. You must push them manually before pushing the branch, otherwise the push will fail with GH008: Your push referenced unknown Git LFS objects.

git lfs push --all origin <branch-name>
git push

8. Verify

Confirm the baselines are updated by listing the files:

git diff --stat HEAD~1

Notes

If no screenshot-diff artifact exists, the screenshots already match the baselines — no update needed.
The --filter option on the CLI can be used to selectively accept only some fixtures if needed.
After committing updated baselines, the next CI run should pass the screenshot comparison.

update-screenshots