CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

testland/visual-baseline-conventions

Use when planning or auditing visual regression coverage: which stories or pages get baselines, which breakpoints, masking vs thresholds, when to add or drop a baseline, and how to choose between Percy, Chromatic, Playwright and Storybook test-runner.

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

82%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.

The body is an effective conventions catalog: nearly every line is non-obvious team judgment delivered as concrete values, tool-specific API options, and worked examples, with clear section organization and a stated decision order. The main flaws are moderate redundancy - three anti-patterns stated twice - and an authoring sequence that is implied by section order rather than explicit.

Suggestions

Deduplicate the anti-patterns: three of the eight rows in 'Common anti-patterns' (Percy/Chromatic mixing, threshold cranking, snapshot-refresh PRs) restate guidance already given in 'Engine selection', 'Masking, threshold, or wait?', and 'When to update a baseline' - either drop the table rows or remove the inline 'Anti-pattern' callouts.

Make the authoring sequence explicit: add a brief numbered flow (pick engine -> select stories/pages -> choose breakpoints -> handle noise -> set severity tier -> name baselines) at the top so the section order reads as a deliberate workflow rather than an implicit one.

Pull the cross-skill pointer to playwright-snapshots' references/responsive-breakpoints.md out of the mid-paragraph prose in 'Engine selection' into a clearly signaled 'Related skills' line so the reference is easy to discover.

DimensionReasoningScore

Conciseness

The body is dense, judgment-heavy tables ("the per-prop combination matrix is exponential and catches very few real bugs") with no explanation of concepts Claude already knows, but three anti-patterns appear twice ("running both Percy and Chromatic on the same project" / "Mixing Percy and Chromatic on the same coverage"; "maxDiffPixels: 5000" / "Threshold cranked above 0.3 / maxDiffPixels > 500"; the snapshot-refresh PR in both 'When to update a baseline' and the anti-pattern table) and the intro repeats its how/which distinction. Efficient with minor trimmable redundancy - anchor 4, not 5; not 3 since the padding is incidental duplication, not explanatory filler.

4 / 5

Actionability

Guidance is concrete and copy-paste-ready throughout: exact breakpoint widths (375 / 768 / 1280 / 1920 px), exact tolerances ("maxDiffPixels (50 - 200) or threshold (0.2 default to 0.3 max)"), exact API options ("freezeAnimatedImage (Percy)", "caret: 'hide' (Playwright)", "page.waitForSelector"), and worked naming examples ("Atoms/Button/Primary-Disabled", "/dashboard/billing -> dashboard-billing", "-375, -768, -1280, -1920"). Per the rubric's code-vs-instruction note, an instruction-only skill with guidance this specific earns the top anchor; nothing falls into anchor 4's 'minor gaps'.

5 / 5

Workflow Clarity

The entry point is explicit ("Pick before authoring any baseline"), a decision order is stated ("Order of preference: wait -> mask -> threshold"), and lifecycle rules are sequenced with a promotion checkpoint ("Promote warn-tier baselines to block-tier after they've been stable for ~2 weeks"), but the sections follow the authoring flow implicitly rather than as an explicit numbered procedure - clear sequence with minor gaps, anchor 4. No validation cap applies since the skill is advisory with no destructive or batch operations.

4 / 5

Progressive Disclosure

No bundle files exist (no references/, scripts/, or assets/ directories), so the ~170-line self-contained catalog is scored on structure: clear section headers, consistent tables, and relevant one-level cross-skill pointers ("playwright-snapshots (references/responsive-breakpoints.md)", "visual-baseline-gate"). It exceeds the under-50-line simple-skill case, and the cross-skill path is embedded mid-paragraph rather than clearly signaled - good structure with minor organization gaps, anchor 4.

4 / 5

Total

17

/

20

Passed

Description

83%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: it leads with an explicit 'Use when' trigger, enumerates the concrete decision areas the skill covers, and names the four relevant engines for routing. Its only weaknesses are minor - the enumerated items are decision topics rather than crisp actions, a few common synonyms are missing, and the tool names create slight overlap with the engine-specific skills it complements.

DimensionReasoningScore

Specificity

Enumerates five concrete coverage decisions ("which stories or pages get baselines, which breakpoints, masking vs thresholds, when to add or drop a baseline, and how to choose between Percy, Chromatic, Playwright and Storybook test-runner"), but they are decision areas rather than explicit actions and body-only topics (severity tiering, naming) are missing - several specific items with minor gaps, matching anchor 4 rather than anchor 5's comprehensive list of concrete actions.

4 / 5

Completeness

Explicitly answers 'when' with a concrete trigger context ("Use when planning or auditing visual regression coverage") and explicitly answers 'what' via the colon-enumerated list of coverage decisions. Anti-drift check against anchor 4: its example's 'when' is weaker and less specific than this one, and the 'what' here is enumerated concretely, so the anchor 5 fit is better.

5 / 5

Trigger Term Quality

Natural keywords include "visual regression", "baselines", "breakpoints", "masking", "thresholds" plus tool names users would say verbatim (Percy, Chromatic, Playwright, Storybook), but common synonyms like "visual diff", "snapshot testing", or "screenshot testing" are absent - good coverage with a few natural terms missing, anchor 4.

4 / 5

Distinctiveness Conflict Risk

The niche (deciding which baselines and where, versus running them) is distinct and the named engines aid routing, but those same tool names overlap with the closely related engine-specific skills it pairs with, so a request like 'set up Percy' could match either - mostly distinct with minor overlap risk against closely related skills, anchor 4.

4 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

referenced_paths_exist

Referenced path issues: 1 missing

Warning

Total

15

/

16

Passed

Reviewed

On this page