CtrlK
BlogDocsLog inGet started
Tessl Logo

testland/playwright-snapshots

Authors Playwright `expect(page).toHaveScreenshot()` assertions, configures masks / clips / threshold / maxDiffPixels per test, manages the per-OS / per-browser snapshot directory, and runs the update flow with `--update-snapshots`; references/ carry the responsive-breakpoint viewport matrix (one project per breakpoint, cross-breakpoint matrix report, plus Chromatic / Percy / Storybook test-runner viewport syntax). Use when the project ships self-hosted visual regression coverage in Playwright (no external snapshot service), or needs a unified multi-viewport breakpoint matrix.

68

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Overview
Quality
Evals
Security
Files

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-structured skill body: executable code at every step, explicit diff-review warnings around the destructive `--update-snapshots` flow, and proper use of a one-level-deep reference file. The main cost is token weight — the options table and CI YAML duplicate knowledge Claude already has.

Suggestions

Move the 13-row `toHaveScreenshot()` options table into references/ (keeping only the 3-4 options that matter in practice inline) — Claude already knows the Playwright API surface.

Trim the GitHub Actions workflow to the two load-bearing details (`npx playwright install --with-deps` and the `if: always()` report upload) rather than a full 30-line YAML.

Add a short fix-and-retry loop for failed diffs (open the HTML report → mask or adjust threshold → re-run the single test) to close the workflow-clarity gap.

DimensionReasoningScore

Conciseness

Mostly efficient — sections are dense and there is no tutorial-style padding — but the 13-row `toHaveScreenshot()` options table and the full GitHub Actions YAML largely restate the Playwright API and CI boilerplate Claude already knows. It fits the level-3 anchor ('includes some unnecessary explanation or could be tightened') better than level 4, which expects only minor instances of over-explanation.

3 / 5

Actionability

Fully executable throughout: a copy-paste page-level test, a locator-level test, concrete option patterns (`mask: [page.locator('#intercom-container')]`, `maxDiffPixels: 50`, an exact `clip` rect), a complete `playwright.config.ts`, runnable `--update-snapshots` commands scoped to a file, and a ready-to-use CI workflow. This matches the level-5 anchor with the common cases covered.

5 / 5

Workflow Clarity

The sequence (author → configure defaults → first run generates baseline → update flow → CI matching) is clear, and the risky batch operation gets an explicit checkpoint: 'Always **review the diff** of the baselines in your PR - an over-broad update can hide a real regression', plus report-artifact triage guidance ('the HTML report is the only place to view the actual / expected / diff images'). It stops short of the level-5 anchor because there is no explicit fix-and-retry feedback loop for diff failures, and the two CI-matching options are presented without a validation step confirming baselines actually match.

4 / 5

Progressive Disclosure

The viewport-matrix material is correctly split into references/responsive-breakpoints.md (which exists, is one level deep, and links only to external docs), and it is clearly signaled both inline ('the full pattern ... are in references/responsive-breakpoints.md') and in a closing References section. Not a 5 because the inlined `toHaveScreenshot()` options table is API-reference bulk that belongs in the references layer, matching the level-4 anchor's 'minor organization gaps'.

4 / 5

Total

16

/

20

Passed

Description

88%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: third-person voice, a comprehensive list of concrete capabilities, and an explicit 'Use when...' trigger clause with a clear self-hosted boundary. The only gaps are a few natural-language synonyms ('screenshot tests', 'visual diff') that would broaden the trigger surface.

Suggestions

Add one or two natural phrasings users actually say — e.g. 'screenshot tests' or 'visual diffs failing in CI' — alongside the API identifiers to widen the trigger surface.

Consider naming the hosted alternatives in the description itself (e.g. 'instead of Chromatic or Percy') to sharpen distinctiveness against sibling visual-regression skills.

DimensionReasoningScore

Specificity

Quotes multiple specific concrete actions: 'Authors Playwright `expect(page).toHaveScreenshot()` assertions', 'configures masks / clips / threshold / maxDiffPixels per test', 'manages the per-OS / per-browser snapshot directory', 'runs the update flow with `--update-snapshots`'. Coverage is comprehensive for the domain; it does not fit the level-4 anchor because there are no meaningful gaps in the action list.

5 / 5

Completeness

Both halves are explicit: the 'what' is the concrete action list above, and the 'when' is a literal trigger clause — 'Use when the project ships self-hosted visual regression coverage in Playwright (no external snapshot service), or needs a unified multi-viewport breakpoint matrix.' This matches the level-5 anchor exactly and exceeds level 4, whose 'when' is weaker or less specific.

5 / 5

Trigger Term Quality

Good keyword coverage: 'Playwright', 'visual regression coverage', 'snapshot', 'multi-viewport breakpoint matrix', '--update-snapshots'. It falls short of the level-5 anchor because several natural user phrasings are missing (e.g. 'screenshot tests', 'visual diff', 'flaky snapshots'), and the trigger surface leans on API identifiers like `toHaveScreenshot()` and `maxDiffPixels` that a user is less likely to say verbatim.

4 / 5

Distinctiveness Conflict Risk

The 'no external snapshot service' qualifier and the self-hosted framing carve out a clear niche against hosted engines (Chromatic / Percy). It is not a 5 because a generic request like 'set up visual regression testing' could still plausibly match sibling skills covering those hosted engines, so the overlap risk is minor rather than minimal.

4 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Reviewed

Table of Contents