OpenSkillIndex← back to search
claude-code

Awesome-omni-skill 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.

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data-ai/update-screenshots" ~/.claude/skills/diegosouzapw-awesome-omni-skill-update-screenshots && rm -rf "$T"
manifest: skills/data-ai/update-screenshots/SKILL.md
source content

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. 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.