Skip to content
Get packs

Guide · Agent skill

How to use the Update Integration Snapshots agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

Update Integration Snapshots is an agent skill, a packaged set of instructions that an AI coding agent can load and follow, for the Dozzle project. It handles one specific job: after you make a deliberate UI change such as a new logo, colour, or layout, it regenerates the Playwright visual snapshot files and reruns the integration suite so the tests pass again. This guide explains what the skill does, how to install it, how to ask for it, and where it should not be used.

Update Integration Snapshotsamir20/dozzle · MIT

Quick start

  1. 1Install the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
  2. 2Make your UI change. Apply the deliberate change, such as a new logo, colour, or layout, that causes the visual tests to fail.
  3. 3Confirm the diffs are intentional. Check that the failing visual.spec.ts diffs are expected. If they might be regressions, investigate before regenerating.
  4. 4Ask the agent to regenerate. Describe the change and ask the agent to regenerate the visual snapshots and rerun make int.
  5. 5Verify with make int. Confirm the integration suite passes cleanly after the snapshots are regenerated.
  6. 6Review and commit the PNGs. Check the regenerated PNG files and the restored docker-compose.yml, then commit the PNGs with the UI change so CI stays green.

What the skill makes the agent do

The skill applies when Playwright visual snapshots in e2e/visual.spec.ts-snapshots/ need regenerating after a change that affects rendered pixels, and the integration suite needs rerunning with make int. The source describes the workflow as four stages: delete the stale snapshot PNGs, regenerate them inside the project's Docker Compose image, verify with a normal make int run, and commit the regenerated PNGs alongside the UI change.

  • Deletes the old PNG files in e2e/visual.spec.ts-snapshots/ so Playwright writes fresh ones.
  • Regenerates snapshots with --update-snapshots through docker compose, which produces Linux/Chromium filenames.
  • Reruns make int to confirm the suite passes.
  • Reminds you to commit the regenerated PNGs so CI stays green.

Install the update-int-snapshots skill

Download the skill's ZIP file from this page. The skill ships as a single file, SKILL.md. There are two ways to install it, depending on how you use your agent.

For Claude Code, unzip the download into ~/.claude/skills/ to make it available in all your projects, or into a project's .claude/skills/ folder to limit it to that repository. For the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/.
  • Project install: unzip into .claude/skills/ inside your Dozzle checkout.
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP.

Trigger the skill with a natural request

You do not need a special command. The skill's description tells the agent when to use it, so a plain request about regenerating visual snapshots after a UI change should be enough. Mention the change you made and the failing test so the agent knows the diffs are intentional.

Good requests name the cause and the goal, for example: I changed the logo and make int now fails on visual.spec.ts, regenerate the snapshots and confirm the suite passes.

  • I replaced the logo. Regenerate the visual snapshots and rerun make int.
  • I changed the theme colours and visual.spec.ts fails. The diffs are intentional, so update the snapshots.
  • The sidebar layout changed on purpose. Refresh the Playwright snapshots and verify.

Run the regeneration steps by hand

The skill follows a fixed procedure, and you can run it yourself to understand what the agent will do. First delete the stale PNGs so old files cannot confuse the diff. Then run make int with --update-snapshots applied through compose up, which the source requires because the navigation sidebar snapshot includes the live container list. The source suggests temporarily patching docker-compose.yml with sed and restoring it afterwards. Finally, run make int again to verify.

Snapshots must be generated in the Linux/Chromium compose image, not on macOS, because filenames include a platform suffix such as -chromium-linux.png.

rm e2e/visual.spec.ts-snapshots/*.png sed -i.bak 's|command: npx --yes playwright test|command: npx --yes playwright test --update-snapshots|' docker-compose.yml make int mv docker-compose.yml.bak docker-compose.yml make int

Know what the skill changes and what it needs

The skill runs scripts and temporarily edits docker-compose.yml. The sed step writes a docker-compose.yml.bak backup and then the mv step restores the original, so the file should be back to normal after a successful run. The skill does not use the network, according to its listing. It requires Docker and Docker Compose, make, a Dozzle repository checkout with its e2e test setup and docker-compose.yml, and Git for committing the regenerated PNG files.

Because the skill depends on Dozzle's Makefile, docker-compose.yml, and e2e directory layout, it will not work in other projects. Review the diff before committing, and check that the sed step was reverted so no unintended compose changes get committed.

  • Requires: Docker and Docker Compose, make, the Dozzle checkout with e2e setup, Git.
  • Runs scripts: yes. Uses network: no.
  • Temporarily modifies docker-compose.yml and restores it from a .bak file.

Avoid common mistakes

The most common error is running npx playwright test --update-snapshots directly on macOS, which generates -darwin filenames that CI does not use. Always go through the Docker Compose image. Another is skipping the delete step: --update-snapshots overwrites files, but if a test was added or renamed, stale PNGs can remain behind, so wiping first is safer.

Do not run two worktrees' make int at the same time, because they clobber each other. The source also advises against publishing host ports for debugging, since that causes conflicts with other software on the machine.

  • Do not generate snapshots on macOS; use the compose image.
  • Delete old PNGs before regenerating.
  • Run one make int at a time across worktrees.
  • Do not publish host ports for debugging; reach services by name inside the network.

What people use it for

  • Updating visual snapshots after replacing the Dozzle logo.
  • Regenerating screenshots after a deliberate theme colour change.
  • Refreshing snapshots after a layout change in the navigation sidebar.
  • Reviewing a pull request that includes regenerated screenshot files.

Frequently asked questions

What is the update-int-snapshots skill?

It is an agent skill for the Dozzle project that guides an AI agent through deleting old Playwright visual snapshots, regenerating them in the Docker-based Linux test environment, and rerunning make int to confirm the suite passes. It is meant for intentional UI changes only.

How do I install the update-int-snapshots skill?

Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

What do I need to run it?

You need Docker and Docker Compose, make, a Dozzle repository checkout with its e2e test setup and docker-compose.yml, and Git to commit the regenerated PNG files. The skill is not designed for other projects.

Is the skill free to use?

The skill is listed under the MIT licence, as stated on this page. Check the licence of the Dozzle repository and the skill files for the terms that apply to your use.

Does the skill need internet access?

The listing says the skill uses no network. It does run scripts, including make int and docker compose commands, so it needs a local Docker environment to work.

Should I use this skill if my visual tests fail unexpectedly?

No. The skill says to investigate first when diffs might be regressions, because regenerating snapshots would hide real bugs. Use it only when you have confirmed the visual changes are intentional.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits Dozzle contributors who have made a deliberate UI change and need the visual snapshot tests to pass again, and maintainers reviewing the regenerated PNG files in a pull request. It is not suitable for investigating unexpected visual failures, and it will not work in projects that do not share Dozzle's Makefile, docker-compose.yml, and e2e layout.

Download the skill