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.

65

Quality

78%

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

Fix and improve this skill with Tessl

tessl review fix ./.cursor/skills/chrome-devtools-storybook/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

86%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 concrete URL transformation rules and worked examples, and well-structured for a self-contained single-purpose skill. The main improvement is reducing the duplicated conversion explanations and adding a light validation checkpoint before interactions.

Suggestions

Consolidate the docs→iframe conversion into one place and have the 'Examples' and 'Using the chrome-devtools MCP' sections reference it, cutting the redundancy that holds conciseness at 4.

Add an explicit validation checkpoint such as 'confirm the iframe URL loaded and the target element is present before interacting' to lift workflow_clarity toward 5.

Trim the repeated 'Always navigate to the iframe URL, not the docs page' guidance, which appears in multiple sections.

DimensionReasoningScore

Conciseness

The body is mostly lean and assumes Claude's competence (no preamble on what Storybook or chrome-devtools is), but the docs-to-iframe conversion is restated in both the 'Converting' section and 'Using the chrome-devtools MCP' step 1, plus an 'Examples' section that duplicates those transformations — minor redundancy keeping it below 5.

4 / 5

Actionability

Provides concrete, copy-paste-ready URL transformation rules ('Extract the part after /docs/ and before --docs', 'append --default', 'id=components-accordion--default&viewMode=story') with worked examples covering both docs and story URL cases; per the instruction-only scoring note, absence of code is not penalized when guidance is this actionable.

5 / 5

Workflow Clarity

A clear numbered sequence (resolve URL → navigate to iframe → run interactions) with explicit assumptions, but no explicit validation checkpoint (e.g., confirm the story/iframe loaded before interacting), so it sits at 4 rather than 5; not capped at 3 because browser testing is not a destructive/batch operation.

4 / 5

Progressive Disclosure

No bundle files exist (references/scripts/assets are empty) and none are needed; the ~75-line single-purpose body is well-organized into clearly signaled sections (When to Use, Storybook URL Rules, Using the chrome-devtools MCP, Examples, Assumptions) with no nested references, matching the simple-skill exception for well-organized self-contained content.

5 / 5

Total

18

/

20

Passed

Description

70%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 specific and distinctive, clearly conveying a narrow niche (chrome-devtools + Storybook iframe testing). Its main weakness is the missing 'Use when...' trigger clause, which caps completeness at 3.

Suggestions

Append an explicit 'Use when...' clause naming triggers like browser-based testing, visual checks, or chrome devtools/CDP for Storybook components to lift completeness past 3.

Add natural synonyms (CDP, DevTools MCP, visual/component testing) to broaden trigger-term coverage toward 5.

Enumerate one or two more concrete actions (e.g., take screenshots, inspect DOM/CSS) to push specificity toward 5.

DimensionReasoningScore

Specificity

Quotes 'run browser tests on local Storybook stories by navigating directly to iframe.html story URLs instead of the outer docs pages' name the domain plus a concrete, mechanism-specific action; above the 3-anchor (one generic action) because the iframe-vs-docs navigation is a specific, non-obvious action, but not a 5 since only one core action is enumerated.

4 / 5

Completeness

Has a clear 'what' (run browser tests on Storybook stories via iframe URLs) but no 'Use when...' clause or explicit trigger guidance, so per the rubric cap completeness cannot exceed 3; not a 2 because the 'what' is concrete, not vague.

3 / 5

Trigger Term Quality

Includes natural terms users would say — 'chrome-devtools', 'browser tests', 'Storybook', 'iframe.html' — giving good coverage; falls short of 5 because synonyms like 'CDP', 'DevTools MCP', or 'visual/component testing' are absent.

4 / 5

Distinctiveness Conflict Risk

The chrome-devtools-MCP + Storybook-iframe-URL combination is a sharply defined niche with minimal overlap risk against other skills; fits the 5 anchor's 'clear niche with distinct triggers, minimal conflict risk'.

5 / 5

Total

16

/

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.

Validation16 / 16 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.