CtrlK
BlogDocsLog inGet started
Tessl Logo

storybook

Scaffolds, audits, and tests Storybook stories for React (web) and React Native / Expo (native) component libraries. Generates three artefacts in two files per invocation: a visual regression `*.stories.tsx` file holding a `Default` story (variants grouped into one snapshot) and a `Playground` story (interactive `args` / `argTypes`), plus a sibling `*.test.stories.tsx` interaction test under a `/Tests` namespace. Supports an opt-in, per-pathname auth flow whose credentials live in the OS keychain, never in the repo. The iteration loop drives the Playwright CLI against the running Storybook URL; visual evidence delegates to the `pr-reviewer` agent and the `screen-recorder` skill. An opt-in `--validate` phase drives Playwright adversarially against the rendered story, then fixes what it breaks behind a confidence gate. Triggers on "scaffold stories", "add storybook", "story for this component", "interaction test for this story", "validate this story", "/storybook".

72

Quality

90%

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

81%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 well-engineered skill body: gated phases, concrete commands, hard rules stated as enforceable constraints, and a genuine thin-index structure with on-demand loading. The main weaknesses are duplicated decision content between the Phase 0 table and the summary table, and that the majority of referenced bundle files (rules/, templates/) are missing from the shipped bundle, leaving links unresolvable.

Suggestions

Collapse the 'Decision flow at a glance' table into the Phase 0 decision table (or keep only the rows not already covered) — the two tables repeat the same five signals and could be merged into one.

Ship the referenced `rules/*.md` and `templates/*` files in the skill bundle (or trim the links to only what is included) so that the 13 currently-unresolvable navigation paths work.

Inline one copy-paste Playwright CLI verification command in Phase 5 (e.g., the exact navigate-and-probe invocation) so the minimum verification is executable even before the linked rules file is loaded.

DimensionReasoningScore

Conciseness

The body is dense and assumes Claude's competence — no space is spent explaining what Storybook or Playwright is, and guidance is delivered via compact tables (arguments, phase gates, argTypes mapping, anti-pattern one-liners). It is not a 5 because there is real duplication that could be trimmed: the "Decision flow at a glance" table restates the Phase 0 decision table almost row-for-row, and the `--validate`-in-CI / never-skip-a-test rules are stated twice (Phase 6 prose and the anti-patterns list).

4 / 5

Actionability

Mostly executable: the Phase 0 preflight gives copy-paste `jq`/`grep`/`ls` commands, sub-commands are shown verbatim, file naming and locator priority (`getByRole` → ... → `getByTestId`) are exact, and the TypeScript→argTypes mapping is a concrete lookup table. It stops short of fully copy-paste-ready because the Phase 2 output shape is a text diagram rather than literal code (the literal templates live in `templates/*.md` files not present in this bundle) and the Playwright verification loop is only linked, not shown.

4 / 5

Workflow Clarity

The six-phase workflow has a single explicit gate per phase ("Do not proceed until it passes"), Phase 5 gives an ordered verification sequence (compiles → renders → reachable → test runner passes), Phase 6 is a closed feedback loop (probe → triage → gated fix → pin with regression test → re-validate), and the "Definition of done" checklist plus decision tables close it out. This matches the anchor-5 example: explicit validation steps, error-recovery loops, and checklists for a complex process.

5 / 5

Progressive Disclosure

The structure is textbook progressive disclosure — an explicit "This SKILL.md is a thin index" note, "load only what the current phase asks for", one-level-deep links into `rules/`, `references/`, and `templates/`, and a catalog of those files with per-file scope descriptions. It cannot score 5 against the actual bundle: only `references/flake-cookbook.md` and `references/platform-detection.md` exist, while all 8 `rules/*.md` and 5 `templates/*` paths referenced from the body are absent from the bundle, so most navigation links do not resolve.

4 / 5

Total

17

/

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.

This is an exemplary description: it states exactly what artefacts the skill produces (with file names and story names), how auth and validation work, and closes with an explicit, natural trigger list. It is dense but every clause is concrete, in third person, and free of fluff.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete actions and concrete artefacts: "Scaffolds, audits, and tests Storybook stories", "a visual regression `*.stories.tsx` file holding a `Default` story ... and a `Playground` story (interactive `args` / `argTypes`), plus a sibling `*.test.stories.tsx` interaction test under a `/Tests` namespace", plus keychain-based auth and an adversarial `--validate` phase. Coverage of the skill's capabilities is comprehensive and nothing is vague.

5 / 5

Completeness

Both questions are explicitly answered: the "what" is the detailed artefact-generating scaffold described in the first sentences, and the "when" is an explicit "Triggers on ..." clause listing concrete trigger phrases — mirroring the anchor-5 example structure. Voice is third person ("Scaffolds, audits, and tests"), so no voice penalty applies.

5 / 5

Trigger Term Quality

Trigger phrases are natural user utterances with command and file-pattern synonyms: "scaffold stories", "add storybook", "story for this component", "interaction test for this story", "validate this story", "/storybook", alongside file patterns like `*.stories.tsx`. It matches the comprehensive anchor including synonyms/extensions; score 4 would require noticeably missing natural terms, and none of the obvious user phrasings are absent.

5 / 5

Distinctiveness Conflict Risk

It occupies a clear niche (Storybook story scaffolding for React/React Native with visual regression and interaction tests) with triggers like "add storybook" and "/storybook" that no other plausible skill would claim. It could only be confused with general Storybook-adjacent skills, and the explicit `/storybook` command and artifact names keep conflict risk minimal.

5 / 5

Total

20

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 35 missing, 13 suspicious

Warning

Total

13

/

16

Passed

Repository
mthines/agent-skills
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.