New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Dozzle Visual Snapshot Updater

by amir20 in amir20/dozzle

Regenerates Playwright visual snapshots for Dozzle after an intentional UI change, running them through Docker Compose so filenames match the Linux CI platform.

MITAuto-check passedTesting & QA

Install Dozzle Visual Snapshot Updater

skills CLI
$ npx skills add amir20/dozzle --skill update-int-snapshots -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install amir20/dozzle update-int-snapshots --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/amir20/dozzle.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/update-int-snapshots .claude/skills/update-int-snapshots && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
update-int-snapshots
GitHub stars
15k
Token cost
~797 tokens
SKILL.md length
339 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Regenerates Playwright visual snapshots for Dozzle after an intentional UI change, running them through Docker Compose so filenames match the Linux CI platform.

  • Works in 4 steps: Delete the stale snapshots so Playwright… → Run with --update-snapshots via compose… → Verify by rerunning the normal suite → …
  • A UI change makes Dozzle's Playwright visual snapshots fail in make int
  • SKILL.md covers When to Use, Procedure, Common Mistakes and Quick Reference
  • Calls make and npx

What it does

The skill applies once a visual change such as a logo, color, spacing or font update lands and make int starts failing on visual.spec.ts, or once a snapshot diff has been confirmed intentional rather than a regression to investigate. It is explicitly not for unintentional diffs, which need investigation first.

The procedure deletes the stale PNGs under e2e/visual.spec.ts-snapshots/ so Playwright writes clean ones instead of updating in place, then runs the suite with --update-snapshots through docker compose up rather than compose run, because the navigation sidebar snapshot includes the live container list and the two modes produce different sibling containers; the cleanest way is to temporarily patch the Playwright command in docker-compose.yml, run make int, then restore the file. Snapshots must come from the Linux Chromium image rather than macOS, since filenames carry a platform suffix such as -chromium-linux.png.

After verifying with a normal make int run, the regenerated PNGs are committed alongside the UI change so CI stays green; two worktrees running make int at the same time will still clobber each other.

When your agent uses it

  • A UI change makes Dozzle's Playwright visual snapshots fail in make int
  • Confirmed-intentional visual diffs need their baseline snapshots regenerated
  • Snapshot filenames need to be generated on Linux/Chromium rather than macOS

Example prompts

  • “I changed the logo color. Regenerate the visual snapshots so make int passes.”
  • “These snapshot diffs are intentional from the new sidebar spacing. Update them.”
  • “Why do my locally regenerated snapshots not match what CI expects?”

Requirements

  • Docker Compose
  • make
  • Playwright

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Delete the stale snapshots so Playwright writes fresh ones (don't try to update in place, the old PNGs can confuse the diff)
  2. Run with --update-snapshots via compose up. You must use compose up (not compose run) because the navigation sidebar snapshot includes the…
  3. Verify by rerunning the normal suite
  4. Commit the regenerated PNGs alongside the UI change so CI stays green.

What it can do on your machine

Read from SKILL.md and the folder at commit 3cdb57e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • make
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Dozzle Visual Snapshot Updater loads about 797 tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 339 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~62
When it runs · the whole SKILL.md, loaded when a task matches
~797

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from amir20/dozzle at commit 3cdb57e, republished under its MIT licence (© amir20). 339 words, ~797 tokens.

Download SKILL.mdSave it as .claude/skills/update-int-snapshots/SKILL.md (or your agent's skills folder).
name
update-int-snapshots
description
Use when Playwright visual snapshots in e2e/visual.spec.ts-snapshots/ need to be regenerated after a UI change (logo, theme, layout, anything that affects rendered pixels) and the integration suite needs to be rerun via make int

Update Integration Snapshots

When to Use

  • A visual change landed (logo, color, spacing, fonts) and make int will fail on visual.spec.ts until snapshots are regenerated.
  • A snapshot test reports diffs you've confirmed are intentional.

Do NOT use when diffs are unintentional regressions — investigate first.

Procedure

  1. Delete the stale snapshots so Playwright writes fresh ones (don't try to update in place, the old PNGs can confuse the diff):

    bash
    rm e2e/visual.spec.ts-snapshots/*.png

  2. Run with --update-snapshots via compose up. You must use compose up (not compose run) because the navigation sidebar snapshot includes the live container list, and the two modes produce different sibling containers. The cleanest way is to patch the playwright command in docker-compose.yml temporarily:

    bash
    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

    Snapshots must be generated in Linux/Chromium (the compose image), not macOS, because filenames include the platform suffix (e.g. -chromium-linux.png).

    Nothing needs clearing first. The compose file publishes no host ports, every container is named dozzle_e2e_* under the fixed project dozzle_e2e, and filters match those names exactly. Other containers on the machine can't block the run or show up in the snapshots, and a leftover run from another worktree is recreated. Two worktrees running make int at the same time do still clobber each other, so run one at a time.

  3. Verify by rerunning the normal suite:

    bash
    make int

    Should now pass cleanly.

  4. Commit the regenerated PNGs alongside the UI change so CI stays green.

Show full SKILL.md (112 more words)Show less

Common Mistakes

  • Running npx playwright test --update-snapshots locally on macOS. Generates -darwin filenames CI doesn't use. Always go through the docker compose image.
  • Forgetting to delete first. --update-snapshots does overwrite, but if the test layout changed (new test, renamed snapshot), stale PNGs are left behind. Wipe-and-regenerate is safest.
  • Adding a test container without the prefix, or a filter without anchors. name=dozzle is a substring match and pulls in any local container with "dozzle" in its name. Use container_name: dozzle_e2e_<service> and DOZZLE_FILTER=name=^dozzle_e2e_<service>$$ ($$ escapes $ in compose).
  • Publishing a host port "for debugging". It brings back conflicts with whatever else is on the machine. Reach instances by service name from inside the network.

Quick Reference

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

© amir20, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/update-int-snapshots of amir20/dozzle.

Open the folder on GitHubat commit 3cdb57e

Compare with similar skills

Dozzle Visual Snapshot Updater next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Dozzle Visual Snapshot Updater compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dozzle Visual Snapshot Updater this skillamir20/dozzle15k—~797Automated safety check: PassMIT
E2Eopenathleteorg/openathlete101—~699Automated safety check: PassAGPL-3.0
Dokan Automationgetdokan/dokan288—~6.1kAutomated safety check: NotesNone
Run Dashboard E2E Local ChangesBlackBeltTechnology/pi-agent-dashboard315—~1.3kAutomated safety check: PassMIT
Acarshub Tool Additionssdr-enthusiasts/docker-acarshub117—~707Automated safety check: PassGPL-3.0
Verifier Webpolarsource/polar10k—~3kAutomated safety check: NotesMIT

Similar skills

  • E2E

    openathleteorg/openathlete

    Run, debug or extend the OpenAthlete Playwright end-to-end tests, which exercise the production Docker images (API, worker, web, PostgreSQL, Redis) through the API and a real browser on desktop and…

    101 GitHub stars~699 tokensUpdated today
    Testing & QAAuto-check passed

  • Dokan Automation

    getdokan/dokan

    Build, scaffold, and run the Dokan Lite/Pro Playwright suite.

    288 GitHub stars~6.1k tokensUpdated yesterday
    Testing & QAAuto-check: notes

  • Run Dashboard E2E Local Changes

    BlackBeltTechnology/pi-agent-dashboard

    Run Playwright E2E (tests/e2e/) against the docker/ all-in-one harness so it reflects LOCAL code changes, not a stale cached image.

    315 GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Acarshub Tool Additions

    sdr-enthusiasts/docker-acarshub

    Use ONLY when working in the docker-acarshub repository AND a task may require adding a system tool, npm package, or other dependency.

    117 GitHub stars~707 tokensUpdated 2 days ago
    DevOps & CloudAuto-check passed

  • Verifier Web

    polarsource/polar

    Evidence-capture protocol for verifying web/dashboard/backoffice/checkout changes in the Polar local stack by driving the real UI with Playwright.

    10k GitHub stars~3k tokensUpdated today
    Data & AnalyticsAuto-check: notes

  • Redis Insight Plugin

    redis/RedisInsight

    Official

    A skill your agent uses when creating, modifying, debugging, deploying, or testing Redis Insight Workbench visualization plugins, plugin manifests, package.json visualizations, activationMethod…

    8.9k GitHub stars~3.5k tokensUpdated 5 days ago
    DatabasesAuto-check passed

More from amir20/dozzle

  • Dozzle App Icon Adder

    amir20/dozzle

    Adds a bundled app icon to Dozzle for container images that show no logo or resolve to the wrong one, including conversion and alias entries.

    15k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Run Dozzle Dev Instance

    amir20/dozzle

    Starts a Dozzle dev server on a port derived from the current worktree so you can test by hand in a browser, without disturbing instances started elsewhere.

    15k GitHub stars~747 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Dozzle Visual Snapshot Updater

What does Dozzle Visual Snapshot Updater do?

Regenerates Playwright visual snapshots for Dozzle after an intentional UI change, running them through Docker Compose so filenames match the Linux CI platform. ts, or once a snapshot diff has been confirmed intentional rather than a regression to investigate. It is explicitly not for unintentional diffs, which need investigation first.

When should I use Dozzle Visual Snapshot Updater?

Dozzle Visual Snapshot Updater fits situations like: A UI change makes Dozzle's Playwright visual snapshots fail in make int; confirmed-intentional visual diffs need their baseline snapshots regenerated; snapshot filenames need to be generated on Linux/Chromium rather than macOS.

How do I install Dozzle Visual Snapshot Updater in Claude Code?

Run `npx skills add amir20/dozzle --skill update-int-snapshots -a claude-code`. Or copy the skill folder (.claude/skills/update-int-snapshots in amir20/dozzle) into .claude/skills/update-int-snapshots in your project. Claude Code loads it when a task matches its description.

How do I install Dozzle Visual Snapshot Updater in Codex?

Run `npx skills add amir20/dozzle --skill update-int-snapshots -a codex`. Or copy the skill folder (.claude/skills/update-int-snapshots in amir20/dozzle) into .agents/skills/update-int-snapshots in your project. Codex loads it when a task matches its description.

Can I use Dozzle Visual Snapshot Updater in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add amir20/dozzle --skill update-int-snapshots -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/update-int-snapshots, .gemini/skills/update-int-snapshots, .github/skills/update-int-snapshots and .opencode/skills/update-int-snapshots in your project.

What does Dozzle Visual Snapshot Updater need to run?

Going by SKILL.md and its folder, Dozzle Visual Snapshot Updater needs the command-line tools its instructions call (make and npx). Our summary lists: Docker Compose; make; Playwright.

Does Dozzle Visual Snapshot Updater access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Dozzle Visual Snapshot Updater safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Dozzle Visual Snapshot Updater use?

Dozzle Visual Snapshot Updater is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Dozzle Visual Snapshot Updater use?

About 797 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Dozzle Visual Snapshot Updater?

Skills that share tags, products or a category with Dozzle Visual Snapshot Updater: E2E (openathleteorg/openathlete, 101 stars), Dokan Automation (getdokan/dokan, 288 stars), Run Dashboard E2E Local Changes (BlackBeltTechnology/pi-agent-dashboard, 315 stars) and Acarshub Tool Additions (sdr-enthusiasts/docker-acarshub, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Dozzle Visual Snapshot Updater?

amir20 (a GitHub user) maintains it in amir20/dozzle, which has 14,593 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on October 10, 2026.

Source: amir20/dozzle on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.