CtrlK
BlogDocsLog inGet started
Tessl Logo

chrome-devtools-storybook

Use the chrome-devtools MCP to run browser tests on local Storybook stories by navigating directly to `iframe.html` story URLs instead of the outer docs pages.

62

Quality

72%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./.cursor/skills/chrome-devtools-storybook/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

72%

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 technically specific and occupies a clear niche, making it distinctive and rich in natural trigger terms. However, it lacks an explicit 'Use when...' clause, which limits completeness, and it describes only a single technique rather than listing multiple concrete actions the skill enables.

Suggestions

Add an explicit 'Use when...' clause, e.g., 'Use when the user asks to test or debug Storybook components in a browser, run visual tests on stories, or interact with Storybook via chrome-devtools MCP.'

List additional concrete actions the skill covers beyond URL navigation, such as 'capture screenshots, inspect component state, validate rendering, or debug interactive stories.'

DimensionReasoningScore

Specificity

It names the domain (browser tests on Storybook stories) and a specific action (navigating to iframe.html story URLs), but doesn't list multiple concrete actions beyond that single technique.

2 / 3

Completeness

It explains what (run browser tests on Storybook stories via chrome-devtools MCP using iframe.html URLs) but lacks an explicit 'Use when...' clause specifying when Claude should select this skill.

2 / 3

Trigger Term Quality

Includes strong natural trigger terms: 'chrome-devtools', 'MCP', 'browser tests', 'Storybook', 'stories', 'iframe.html', 'story URLs'. A user working with Storybook testing would naturally use several of these terms.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive — the combination of chrome-devtools MCP, Storybook stories, and iframe.html navigation creates a very specific niche that is unlikely to conflict with other skills.

3 / 3

Total

10

/

12

Passed

Implementation

72%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured, actionable skill that clearly teaches the critical pattern of converting Storybook URLs to iframe URLs for chrome-devtools MCP testing. Its main strengths are concrete URL conversion rules with examples and clear workflow sequencing. Its weaknesses are some content redundancy (examples repeat the conversion rules) and missing validation/error-handling steps in the workflow.

Suggestions

Add a validation checkpoint after navigation (e.g., 'Verify the page loaded by checking for the presence of the root component element before proceeding with interactions').

Remove the redundant Examples section or consolidate it into the URL conversion rules section to reduce token usage.

DimensionReasoningScore

Conciseness

The content is mostly efficient but has some redundancy. The examples section repeats the URL conversion rules that were already explained in detail above. The final paragraph restates the rationale already covered. Some trimming is possible, but it doesn't over-explain concepts Claude already knows.

2 / 3

Actionability

The URL conversion rules are concrete and specific with exact patterns and examples. The step-by-step process for using the MCP is clear with specific instructions (navigate to iframe URL, find elements by role/text/data attributes, etc.). The conversion algorithm is copy-paste applicable.

3 / 3

Workflow Clarity

The workflow has clear sequencing (convert URL → navigate → interact), but lacks validation checkpoints. There's no guidance on what to do if the story doesn't load, if the component ID is wrong, or how to verify the page loaded correctly before interacting. For browser testing operations, a validation step after navigation would be important.

2 / 3

Progressive Disclosure

For a standalone skill with no bundle files, the content is well-organized with clear sections (When to Use, URL Rules, Converting URLs, Examples, Using the MCP). The structure is logical and easy to navigate. No external references are needed for this scope of content.

3 / 3

Total

10

/

12

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
leboncoin/spark-web
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.