CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

sbshot-visual-diff

Shoot Storybook stories with sbshot at two git refs and produce a diff a reviewer can read. Use when asked for a visual diff, before/after screenshots, a screenshot comparison for a PR, or to prove a change did not alter screens it should not have.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

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.

An expert-level operational skill: dense with non-obvious sbshot and repo-specific knowledge, concrete commands and flags, explicit failure modes, and a closing validation checklist. The main gaps are placeholder-style commands without one fully worked example, a workflow sequence that must be assembled from sections, and troubleshooting content that could be split into a reference file.

Suggestions

Add one fully-substituted end-to-end example (e.g., the complete npx capture → diff → tag → export command sequence with a real dev-server URL, run names, and merge-base ref) so the common case is copy-paste ready rather than assembled from placeholder templates.

Consolidate the workflow into a single ordered step list (cover stories → capture baseline at merge-base → capture branch ref → optional noise run → diff → review pairs → tag → export/host → PR link), with the existing sections as detail beneath each step.

Move the environment-specific "Operational traps" (macOS freemem pinning, ImageMagick fonts, worktree i18n hash generation) into a troubleshooting reference file, keeping SKILL.md as the lean overview.

DimensionReasoningScore

Conciseness

The body never explains concepts Claude already knows (no primer on Storybook, git merge-base, Playwright, or WebP) and every section carries non-obvious, tool- or repo-specific knowledge ("--noise marks a pair flaky when the noise diff does not show it as unchanged", "os.freemem() counts only truly free pages"), so it matches anchor 5's lean, competence-assuming standard.

5 / 5

Actionability

Concrete commands and flags throughout — "--theme dark,light", "git merge-base origin/main <branch>", "node ./i18-generate-hash.cjs", "viewer.html#/job/diff/<diff>" — but every command is a placeholder template ("capture <storybook> --name-run <ref>") with no single fully-substituted end-to-end example, leaving the minor gap that keeps it below anchor 5's copy-paste-ready standard.

4 / 5

Workflow Clarity

The sequence (stories first → per-ref captures → diff/noise → review pairs → tag → export/host) is recoverable from section order and backed by real checkpoints — the story-count check, the noise floor, and the "Done means" checklist — but it is never consolidated into one explicit ordered procedure, matching anchor 4's clear sequence with minor gaps rather than anchor 5's fully explicit step list.

4 / 5

Progressive Disclosure

Well-organized sections with clear headers and easy navigation, but the ~100-line body is entirely inline with no bundle files; the "Operational traps" section (macOS freemem sampling, ImageMagick font mapping, worktree i18n hash) is environment troubleshooting that could live in a one-level-deep reference file — anchor 4's "good structure, minor organization gaps".

4 / 5

Total

17

/

20

Passed

Description

87%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 model what-and-when description: concrete capabilities with the tool named, followed by four explicit natural-language triggers. Its only weaknesses are a compact capability list (two actions where the skill does more) and a few missing trigger synonyms such as "visual regression".

DimensionReasoningScore

Specificity

"Shoot Storybook stories with sbshot at two git refs" and "produce a diff a reviewer can read" name the tool, target, and two concrete actions — noticeably more specified than anchor 3's generic 1–2 actions, but only two capabilities are listed (no mention of tagging, exporting, or noise handling), short of anchor 5's comprehensive coverage.

4 / 5

Completeness

It explicitly answers both: what ("Shoot Storybook stories with sbshot at two git refs and produce a diff a reviewer can read") and when ("Use when asked for a visual diff, before/after screenshots, a screenshot comparison for a PR, or to prove a change did not alter screens"), matching the anchor 5 example pattern of concrete trigger phrases paired with a clear capability statement.

5 / 5

Trigger Term Quality

Natural phrases a user would actually say are present — "visual diff", "before/after screenshots", "screenshot comparison for a PR" — giving good keyword coverage, but common variants like "visual regression" or "UI changes" are missing, so it falls short of anchor 5's synonym-complete coverage.

4 / 5

Distinctiveness Conflict Risk

"Storybook stories with sbshot" pins a clear niche, and the triggers ("visual diff", "screenshot comparison for a PR") are scoped to Storybook visual change verification — minimal overlap with generic screenshot or story-writing skills.

5 / 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.

Repository

SigNoz/signoz

Path

.claude/skills/sbshot-visual-diff/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.