القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | chrome-devtools-storybook |
| description | 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. |
Use the project-0-spark-chrome-devtools MCP server to run browser-level tests and interactions against local Storybook stories. Storybook renders stories inside iframes on the docs pages, so you must always target the underlying iframe.html story URL to avoid unnecessary DOM exploration.
http://localhost:6006 (or another Storybook host)Storybook has two kinds of URLs:
http://localhost:6006/?path=/docs/components-accordion--docshttp://localhost:6006/iframe.html?id=components-accordion--default&viewMode=storyAlways navigate chrome-devtools to the iframe URL, not the docs page.
Docs page URL (?path=/docs/...):
http://localhost:6006/?path=/docs/components-accordion--docs/docs/ and before --docs → here: components-accordion--default:
id=components-accordion--defaulthttp://localhost:6006/iframe.html?id=components-accordion--default&viewMode=storyStory page URL (?path=/story/...):
http://localhost:6006/?path=/story/components-accordion--with-icon/story/ → here: components-accordion--with-iconid directly:
id=components-accordion--with-iconhttp://localhost:6006/iframe.html?id=components-accordion--with-icon&viewMode=storyOther query params:
viewMode=story in the iframe URL.globals, args, or other query parameters, append them to the iframe URL as-is.User URL: http://localhost:6006/?path=/docs/components-accordion--docs
→ Use with chrome-devtools:
http://localhost:6006/iframe.html?id=components-accordion--default&viewMode=story
User URL: http://localhost:6006/?path=/story/components-accordion--with-icon
→ Use with chrome-devtools:
http://localhost:6006/iframe.html?id=components-accordion--with-icon&viewMode=story
Resolve the correct Storybook URL
?path=/docs/... or ?path=/story/...), first convert it to the corresponding iframe.html URL as described above.iframe.html URL with an id and viewMode, use it directly.Navigate directly to the iframe URL
project-0-spark-chrome-devtools, never ask it to search inside the docs page for the story iframe.iframe.html URL directly. This avoids the extra layer of Storybook UI and speeds up tests.Run interactions and checks
Assumptions
http://localhost:6006 unless the user specifies another base URL.<group>-<component>--<storyName>).--default story name exists for docs pages when you derive it from ...--docs.By always converting to the iframe.html URL first, the chrome-devtools MCP avoids wasting time exploring Storybook’s outer docs UI and directly loads the markup for the story under test.
Generate code using nx generators. INVOKE IMMEDIATELY when user mentions scaffolding, setup, structure, creating apps/libs, or setting up project structure. Trigger words - scaffold, setup, create a ... app, create a ... lib, project structure, generate, add a new project. ALWAYS use this BEFORE calling nx_docs or exploring - this skill handles discovery internally.
Run all quality checks including linting, type checking, and tests. Use when the user wants to verify code quality, before committing, or when preparing a PR.
Link workspace packages in monorepos (npm, yarn, bun). USE WHEN: (1) you just created or generated new packages and need to wire up their dependencies, (2) user imports from a sibling package and needs to add it as a dependency, (3) you get resolution errors for workspace packages (@org/*) like "cannot find module", "failed to resolve import", "TS2307", or "cannot resolve". DO NOT patch around with tsconfig paths or manual package.json edits - use the package manager's workspace commands to fix actual linking.
Monitor Nx Cloud CI pipeline and handle self-healing fixes. USE WHEN user says "monitor ci", "watch ci", "ci monitor", "watch ci for this branch", "track ci", "check ci status", wants to track CI status, or needs help with self-healing CI fixes. ALWAYS USE THIS SKILL instead of native CI provider tools (gh, glab, etc.) for CI monitoring.
Find and add Nx plugins. USE WHEN user wants to discover available plugins, install a new plugin, or add support for a specific framework or technology to the workspace.
Check and verify accessibility compliance for Spark UI components. Use when the user wants to test accessibility, verify WCAG compliance, or fix accessibility issues.