CtrlK
BlogDocsLog inGet started
Tessl Logo
PluginPublic

testland/storybook-visual-regression-testing

Use when a repo already has Storybook and wants a visual test per story: the hosted Chromatic addon, or the self-hosted Storybook test-runner with a postVisit hook calling Playwright's toHaveScreenshot, plus CI setup.

Quality

86%

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.

A strong, self-contained skill: it gives fully executable guidance for both the hosted Chromatic and self-hosted test-runner paths, with a useful decision table and realistic CI gotchas. Weaknesses are minor — duplicated serve-and-test instructions and no baseline-update recovery flow when snapshots legitimately change.

Suggestions

Deduplicate the Storybook serve-and-test flow: keep the detailed bash sequence in one place (Running or CI integration) and reference it from the other to trim roughly 15 lines.

Add a short 'Updating baselines' note for Path 2 covering how to regenerate snapshots after intentional UI changes (e.g., test-storybook --update-snapshots) so CI failures have a recovery loop.

Consider moving the full GitHub Actions YAML into a reference file to keep SKILL.md as a lean overview, since the workflow is already summarized by the concurrently/wait-on guidance.

DimensionReasoningScore

Conciseness

The body avoids explaining concepts Claude already knows and uses tables efficiently (hooks, path comparison), but the serve-and-test flow is duplicated between the 'Running' bash block and the 'CI integration' YAML, and phrases like 'This is the default recommendation in the docs' are editorial padding.

4 / 5

Actionability

Every step is copy-paste ready: install commands, the package.json script, a complete .storybook/test-runner.ts config with opt-out handling, run commands, and a full GitHub Actions workflow covering the common cases for both paths.

5 / 5

Workflow Clarity

Both paths are clearly sequenced (install, activate/config, run, CI) with practical checkpoints like 'wait-on ... will fail unhelpfully' and 'without -k, the workflow hangs'. The missing piece is an error-recovery flow for intentional UI changes (e.g., updating baselines via --update-snapshots), which keeps it below a 5.

4 / 5

Progressive Disclosure

No bundle files exist and the skill is well-sectioned, correctly delegating Chromatic CLI and toHaveScreenshot details to sibling skills rather than duplicating them. The ~245-line single file with a 40-line inlined CI workflow could be split into a reference file, which leaves minor organization gaps.

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 states a concrete trigger condition, names both implementation paths with specific technologies, and carves out a clear Storybook-scoped niche. The only refinements would be adding 'snapshot'/'visual regression' synonyms and acknowledging the boundary with the Chromatic CLI skill.

DimensionReasoningScore

Specificity

Names several concrete mechanisms — 'the hosted Chromatic addon', 'test-runner with a postVisit hook calling Playwright's toHaveScreenshot', 'plus CI setup' — but coverage has minor gaps (baseline management and diff review are not named). This is above anchor 3 (more than 1-2 actions) but short of anchor 5's comprehensiveness.

4 / 5

Completeness

Explicitly answers 'when' with a concrete trigger ('Use when a repo already has Storybook and wants a visual test per story') and 'what' with the two named implementation paths plus CI setup, matching the anchor-5 pattern of both what and when with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural terms users would say — 'repo already has Storybook', 'visual test per story', 'Chromatic', 'Playwright', 'CI setup' — but misses common synonyms like 'snapshot' and 'visual regression' (the latter appears only in the name field, not the description).

4 / 5

Distinctiveness Conflict Risk

Storybook + per-story visual testing is a clear niche discriminator, but the description explicitly covers 'the hosted Chromatic addon' path, which overlaps the closely related chromatic-visual-regression-testing skill — minor overlap risk rather than the minimal risk of anchor 5.

4 / 5

Total

17

/

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

On this page