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.

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

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

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.

Highly actionable, self-contained guidance with a clear workflow and clean organization; its main weakness is redundancy — the same URL-conversion examples are stated three times and the rationale is repeated. A modest trim plus a load-verification checkpoint would lift it further.

Suggestions

Remove the 'Examples' section or merge it into the conversion steps — it repeats the exact two URL transformations already shown under 'Storybook URL Rules'.

Trim the closing paragraph, which restates the opening rationale about avoiding the outer docs UI.

Add a quick verification step after navigation (e.g., confirm the story rendered before interacting, and handle the case where a derived '--default' story id 404s).

Dimension	Reasoning	Score
Conciseness	Mostly efficient with no teaching of known concepts, but the docs-to-iframe conversion recipe is presented three times: the 'Storybook URL Rules' section, the numbered conversion steps, and an 'Examples' section that repeats the same two conversions verbatim; the closing paragraph also restates the opening rationale. Not a 2 because nothing is padding-fluff; not a 4 because whole duplicated sections could be cut.	3 / 5
Actionability	Gives exact, executable URL transformation rules with fully worked examples ('?path=/docs/components-accordion--docs' → 'iframe.html?id=components-accordion--default&viewMode=story') plus concrete interaction guidance (find by role/text/data attributes, clicks, keyboard nav, screenshots). This is copy-paste ready and covers the common cases.	5 / 5
Workflow Clarity	The sequence (resolve URL → navigate to iframe URL → run interactions) is clear and coherent, and the operation is non-destructive so no validation cap applies. Not a 5 because there is no checkpoint that the iframe URL loaded or that the derived '--default' story actually exists — it is only listed under 'Assumptions'.	4 / 5
Progressive Disclosure	The skill is a single self-contained SKILL.md with no bundle files and no need for external references; sections (When to Use, Storybook URL Rules, Using the chrome-devtools MCP) are well-organized and easy to navigate, which per the scoring notes earns full marks for a simple skill.	5 / 5
	Total	17 / 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.

A specific, well-scoped description with strong distinctiveness and good trigger terms, weakened by the complete absence of an explicit 'Use when...' trigger clause and missing common synonyms like 'visual checks' or 'screenshots'. Adding a trigger clause would resolve its only structural gap.

Suggestions

Append an explicit trigger clause, e.g. 'Use when the user asks for browser-based tests, visual checks, or screenshots of a Storybook story, or provides a localhost:6006 Storybook URL.'

Add common synonym trigger terms such as 'visual checks', 'screenshots', 'component testing', or 'CDP' to broaden natural-language matching.

Mention the concrete interactions covered (click, type, keyboard navigation, screenshots) to round out capability coverage.

Dimension	Reasoning	Score
Specificity	Names the tool (chrome-devtools MCP), the action (run browser tests), the target (local Storybook stories), and the concrete technique (navigate to iframe.html story URLs instead of outer docs pages). Not a 5 because coverage isn't comprehensive — interactions like clicks, keyboard navigation, and screenshots are absent; not a 3 because it goes beyond 1-2 generic actions with a precise, specific method.	4 / 5
Completeness	The 'what' is clear and concrete, but there is no 'Use when...' clause or equivalent explicit trigger guidance in the description, which per judging guidelines caps completeness at 3. It is not a 2 because the 'what' is specific rather than vague.	3 / 5
Trigger Term Quality	Contains natural trigger terms users would say: 'chrome-devtools', 'browser tests', 'Storybook stories', 'iframe.html'. A few common variations are missing (e.g., 'visual checks', 'screenshots', 'component testing', 'CDP'), keeping it below the comprehensive-synonym level of 5.	4 / 5
Distinctiveness Conflict Risk	The pairing of 'chrome-devtools MCP', 'local Storybook stories', and 'iframe.html story URLs' carves out a clear niche with distinct triggers and minimal risk of firing for unrelated skills.	5 / 5
	Total	16 / 20 Passed

Validation

100%

Warnings & errors only

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: leboncoin/spark-web
Path: .cursor/skills/chrome-devtools-storybook/SKILL.md
Commit: da35814

Reviewed: 12 days ago

Table of Contents

Discovery Implementation Validation

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.