update-screenshots

Update committed blocks-ci screenshot hashes after CI reports a mismatch.

Updated Sep 3, 2026
One-click install
npx skills add https://github.com/az0512124155azz-sys/CodeForge --skill update-screenshots-az0512124155azz-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-screenshots
Source: https://github.com/az0512124155azz-sys/CodeForge/tree/main/.github/skills/update-screenshots
Command: npx skills add https://github.com/az0512124155azz-sys/CodeForge --skill update-screenshots-az0512124155azz-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When the "Screenshots & Tests" CI check fails because rendered component screenshot hashes no longer match the committed baseline file, developers need a safe, verified way to accept the new hashes without regenerating them locally or blindly approving visual regressions. ## Core Features & Use Cases - CI Hash Retrieval: Pull the expected screenshot hashes from the PR comment, job summary, or job log using the GitHub CLI, since locally rendered hashes differ across platforms. - Visual Verification: Download old and new images by hash from the screenshot service and compute a pixel-level diff bounding box with Python and Pillow to confirm the change is intentional. - Precise Baseline Update: Edit only the changed lines in test/componentFixtures/blocks-ci-screenshots.md while preserving its auto-generated format, then commit so the check passes. - Use Case: A PR fails the "Screenshots & Tests" check with a blocks-ci hash mismatch. Run this Skill to fetch the CI-produced hashes, visually confirm the one-pixel shift matches the intended UI change, update the baseline file, and push. ## Quick Start Update the blocks-ci screenshot baselines for my PR after the Screenshots & Tests check failed, verifying the image diffs before committing the new hashes.

Frequently Asked Questions about update-screenshots

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I update screenshot baselines after a CI failure?▼

Copy the updated hashes from the PR comment, job summary, or job log of the failed Screenshots & Tests check, then edit only the changed lines in test/componentFixtures/blocks-ci-screenshots.md and commit. Never regenerate hashes locally.

Why can't I regenerate screenshot hashes locally?▼

The hashes are computed from rendered PNG bytes produced on ubuntu-latest CI runners. Rendering on macOS or Windows yields different bytes and therefore different hashes, so locally generated values will fail CI.

How do I verify a screenshot diff before accepting new hashes?▼

Download both the old and new images by hash from the screenshot service with curl, then use Python with Pillow's ImageChops.difference to compute the diff bounding box. Confirm the delta matches the PR's intended change before updating.

Does updating hashes fix all Screenshots & Tests check failures?▼

No. The check also fails when fixtures fail to render or Playwright fixture tests fail, which are genuine bugs. Look for ::error::<fixtureId>: in the log and download the playwright-test-results artifact instead of updating hashes.

What is the difference between the screenshot diff report and the hash mismatch?▼

The diff report is a non-blocking informational PR comment with before/after images requiring no commit. The blocks-ci hash mismatch is a blocking failure that requires updating and committing blocks-ci-screenshots.md.