CtrlK
BlogDocsLog inGet started
Tessl Logo

storybook-visual-diff

Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs to see what a CSS or component change did, with the changes tinted over the new shot. Use when asked to take story screenshots, capture a visual baseline, compare before/after of a style change, or find which pages a change affects.

75

Quality

94%

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

SKILL.md
Quality
Evals
Security

Quality

Content

88%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 highly actionable with executable commands, clear sequencing, and strong validation checkpoints for a fragile batch operation. Its main weakness is conciseness: several deep-dive sections on internal mechanics could be offloaded to reference files to improve token efficiency and progressive disclosure.

Suggestions

Move the 'How the comparison works' YIQ/pixelmatch internals and the full 'What makes a shot reproducible' deep-dive into a references/ file, leaving a one-line summary in SKILL.md with a clear link.

Tighten the 'The caption' subsection: the operational rule (keep shots.json next to shots) is what matters; the rendering/typeface fallback detail can be trimmed.

Consider extracting the residual-noise story table (the three bimodal stories) into a reference doc, keeping only the principle 'diff a story against itself before believing its number' inline.

DimensionReasoningScore

Conciseness

Mostly lean and assumes Claude's competence with concrete commands and tables, but the deep 'What makes a shot reproducible' and 'How the comparison works' sections explain internal mechanics at length that could be trimmed or moved to references.

4 / 5

Actionability

Provides fully executable, copy-paste-ready bash commands for server startup, capture, and diff, plus a complete flag table and concrete examples covering the common cases.

5 / 5

Workflow Clarity

Clear multi-step loop with explicit validation (noise-floor run before believing a number, two-identical-frames check, busy flagging) and feedback loops (git stash/restore even on capture failure, re-validate by diffing a story against itself); the destructive/batch caveat is well handled.

5 / 5

Progressive Disclosure

Well-organized with clear sections and two real bundle scripts referenced by path, but several substantial subsections (caption mechanics, comparison internals, reproducibility deep-dive) are inlined in SKILL.md rather than split into one-level-deep reference files.

4 / 5

Total

18

/

20

Passed

Description

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

The description is exemplary: it states concrete capabilities in third person, lists natural trigger phrases, and clearly separates the 'what' from the 'when'. It is concise yet comprehensive with minimal conflict risk.

DimensionReasoningScore

Specificity

Lists multiple concrete actions (screenshot stories, pixel-diff two runs, tint changes over the new shot) with comprehensive coverage of the skill's capabilities.

5 / 5

Completeness

Explicitly answers both what ('Screenshot a set of SigNoz Storybook stories, then pixel-diff two runs... changes tinted over the new shot') and when ('Use when asked to take story screenshots, capture a visual baseline, compare before/after...').

5 / 5

Trigger Term Quality

Covers natural trigger phrases users would say ('take story screenshots', 'capture a visual baseline', 'compare before/after of a style change', 'find which pages a change affects') plus the technical terms.

5 / 5

Distinctiveness Conflict Risk

Clear niche (SigNoz Storybook visual diffing) with distinct triggers; the specificity of 'SigNoz Storybook stories' and 'pixel-diff two runs' makes overlap with other skills minimal.

5 / 5

Total

20

/

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: 3 missing

Warning

Total

15

/

16

Passed

Repository
SigNoz/signoz
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.