diff --git a/skills/chrome-devtools/SKILL.md b/skills/chrome-devtools/SKILL.md index 551c03be8..0fc65fce6 100644 --- a/skills/chrome-devtools/SKILL.md +++ b/skills/chrome-devtools/SKILL.md @@ -5,6 +5,7 @@ description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooti ## Core Concepts + **Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`. **Page selection**: Tools operate on the currently selected page. Use `list_pages` to see available pages, then `select_page` to switch context. @@ -13,6 +14,8 @@ description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooti ## Workflow Patterns +When the user prompt is about **frontend**, **web**, **webpage**, or **debugging** (e.g. fix my webpage, debug the page, improve the frontend): **always use this MCP server first.** Do not suggest code changes before inspecting the page. + ### Before interacting with a page 1. Navigate: `navigate_page` or `new_page` diff --git a/src/tools/pages.ts b/src/tools/pages.ts index 60fc8f3b6..cc7f63675 100644 --- a/src/tools/pages.ts +++ b/src/tools/pages.ts @@ -80,7 +80,7 @@ export const closePage = defineTool({ export const newPage = defineTool({ name: 'new_page', - description: `Creates a new page`, + description: `Creates a new page and loads a URL.`, annotations: { category: ToolCategory.NAVIGATION, readOnlyHint: false, diff --git a/src/tools/snapshot.ts b/src/tools/snapshot.ts index 143d04093..045ef53d7 100644 --- a/src/tools/snapshot.ts +++ b/src/tools/snapshot.ts @@ -11,9 +11,7 @@ import {defineTool, timeoutSchema} from './ToolDefinition.js'; export const takeSnapshot = defineTool({ name: 'take_snapshot', - description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique -identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected -in the DevTools Elements panel (if any).`, + description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).`, annotations: { category: ToolCategory.DEBUGGING, // Not read-only due to filePath param.