Skip to content
Get packs

Update Integration Snapshots

Regenerate Playwright visual test snapshots for Dozzle after intentional UI changes

Source Download skill
Repository
amir20/dozzle
Stars
14,785
Licence
MIT
Files
1 file

What it does

When a deliberate visual change such as a new logo, color, or layout breaks Dozzle's visual regression tests, this skill guides the agent through deleting the old reference screenshots, regenerating them inside the project's Docker-based Linux test environment, and rerunning the integration suite to confirm it passes. It also warns against using it when the visual differences are actual bugs.

Great for

  • Contributors to the Dozzle project who have just changed the UI and need the visual snapshot tests to pass again
  • Maintainers reviewing pull requests that include regenerated screenshot files

Skip it if

  • Investigating unexpected visual failures, since the skill itself says to investigate first when diffs may be regressions, and regenerating snapshots would hide real bugs
  • Projects other than Dozzle, because it depends on its specific Makefile, docker-compose.yml, and e2e directory layout

Try asking

  • “A logo change broke the visual.spec.ts tests, so regenerate the snapshots and rerun make int”
  • “I changed the theme colors and the integration suite fails on snapshot diffs; update the snapshots the right way”
  • “Rerun the Playwright visual snapshots through docker compose after my layout change and verify it passes”
Step-by-step guide: how to use Update Integration SnapshotsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    update-int-snapshots.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip update-int-snapshots.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip update-int-snapshots.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Only use this after confirming the visual differences are intentional; review the new PNGs before committing them.
  • Run make int one at a time when multiple worktrees are involved, because concurrent runs can overwrite each other.
  • Generate snapshots through the Docker image rather than running Playwright directly on macOS, otherwise the filenames will not match CI.

What's inside

  • SKILL.md

Redistributed unmodified from amir20/dozzle under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.