CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ui-workflow

Storybook's workflow for UI changes in a project with Storybook - look up the components to reuse, write and update stories, run story tests, and publish a review of the result. Also shows existing components or stories in a review. Use when the project's agent instructions (such as AGENTS.md) or the user ask for it.

Quality

84%

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

78%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 lean, operationally specific body that avoids teaching known concepts and sensibly delegates the detailed, versioned workflow to an on-demand command. Weaknesses are minor: trimmable version-pattern detail and no fallback guidance if the workflow-fetch command fails.

Suggestions

Trim the exact prerelease version patterns ('11.0.0-alpha.x', '0.0.0-pr-*') to something like 'an 11.0 prerelease or canary build also counts' to reduce version-specific detail that will age.

Add a fallback for when 'npx storybook skills ui-workflow' fails or is unavailable (e.g. verify the Storybook version, or bundle the workflow in a reference file).

State an explicit checkpoint that story tests must pass before publishing the review.

DimensionReasoningScore

Conciseness

The body teaches nothing Claude already knows (no 'what is Storybook' padding) and every paragraph carries operational rules, but the exact prerelease version patterns ("11.0.0-alpha.x", "0.0.0-pr-*") are trimmable version-specific detail that will age. Fits anchor 4 (efficient with minor instances that could be trimmed); not 5 for those instances, not 3 because there is no genuine over-explanation.

4 / 5

Actionability

Concrete executable anchors are present: "npx storybook skills ui-workflow", probing "http://localhost:6006", "npm run storybook", and the /storybook-init and /storybook-upgrade invocations. Not 5 because the actual story-writing workflow is delegated entirely to the command output with no fallback if that command fails or is unavailable; not 3 because everything written is concrete and executable.

4 / 5

Workflow Clarity

Prerequisites are explicit numbered gates (install, version 11.0+) and the dev-server section has checkpoints ("probe the URL", "Reuse a dev server", "Wait until the URL responds"). Not 5 because there is no in-body checkpoint that story tests pass before publishing the review (validation is implicit in the external workflow); not 3 because sequencing and gates are clearly present.

4 / 5

Progressive Disclosure

The body is ~25 lines with no bundle files (references/, scripts/, assets/ are absent), organized into prerequisites, the workflow-fetch command, and dev-server guidance, with detail fetched on demand via "npx storybook skills ui-workflow". This meets the rubric's simple-skill exception: under 50 lines, no external references needed, well-organized sections.

5 / 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 that names the domain and enumerates the workflow's concrete actions with an explicit use-when clause. Its main gaps are the absence of natural synonyms/file extensions and a task-based (rather than request-based) trigger phrase.

Suggestions

Add task-based trigger phrases to the 'when' clause, e.g. 'Use when creating, modifying, or deleting frontend components, or when writing or updating stories.'

Include natural synonyms and file extensions such as '.stories.js', 'CSF', or 'component library' to broaden keyword coverage.

DimensionReasoningScore

Specificity

Quotes: "look up the components to reuse, write and update stories, run story tests, and publish a review of the result" plus "shows existing components or stories in a review" — multiple concrete actions covering the full workflow (lookup, authoring, testing, review, display). Matches the anchor 5 example's breadth; not 4 because coverage is comprehensive rather than 'several actions with minor gaps'.

5 / 5

Completeness

Both elements are explicit: a concrete 'what' and "Use when the project's agent instructions (such as AGENTS.md) or the user ask for it". Not 5 because the 'when' is request-based rather than concrete task trigger phrases (e.g. 'when creating or modifying components or stories'); not 3 because both what and when are explicitly stated.

4 / 5

Trigger Term Quality

Natural user phrasing is present ("UI changes", "write and update stories", "story tests", "components", "review"), but there are no synonyms or file-extension forms (e.g. ".stories.js", "CSF", "component library"). Fits anchor 4 (good coverage, a few natural terms missing); not 5 because synonyms and extensions are absent.

4 / 5

Distinctiveness Conflict Risk

Deeply domain-specific phrasing ("Storybook's workflow", "stories", "story tests") gives it a clear niche with distinct triggers and minimal conflict risk with other skills. Not 4 because no plausible overlap with closely related skills exists — the Storybook terms are unambiguous.

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

storybookjs/storybook

Path

code/lib/claude-plugin/skills/ui-workflow/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.