Allow to generate skill from MCP

[zats]

$ ./runner pnpm exec tsx src/cli.ts generate-skill --command "npx -y chrome-devtools-mcp@latest" --name chrome-devtools --description "Chrome DevTools" --output ~/.codex/skills/chrome-devtools

Contents of ~/.codex/skills/chrome-devtools

$ tree ~/.codex/skills/chrome-devtools
~/.codex/skills/chrome-devtools
├── assets
│   └── mcporter.json
├── references
│   └── tools.md
└── SKILL.md

File contents

SKILL.md

---
name: "chrome-devtools"
description: "Use when you need to work with the chrome-devtools. Chrome DevTools"
---

Use this skill to work with the chrome-devtools MCP server.

Capabilities:
- `click` — Clicks on the provided element
- `close_page` — Closes the page by its index.
- `drag` — Drag an element onto another element
- `emulate` — Emulates various features on the selected page.
- `evaluate_script` — Evaluate a JavaScript function inside the currently selected page.
- `fill` — Type text into a input, text area or select an option from a <select> element.
- `fill_form` — Fill out multiple form elements at once
- `get_console_message` — Gets a console message by its ID.
- `get_network_request` — Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Networ...
- `handle_dialog` — If a browser dialog was opened, use this command to handle it
- `hover` — Hover over the provided element
- `list_console_messages` — List all console messages for the currently selected page since the last navigation.
- `list_network_requests` — List all requests for the currently selected page since the last navigation.
- `list_pages` — Get a list of pages open in the browser.
- `navigate_page` — Navigates the currently selected page to a URL.
- `new_page` — Creates a new page
- `performance_analyze_insight` — Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the re...
- `performance_start_trace` — Starts a performance trace recording on the selected page.
- `performance_stop_trace` — Stops the active performance trace recording on the selected page.
- `press_key` — Press a key or key combination.
- `resize_page` — Resizes the selected page's window so that the page has specified dimension
- `select_page` — Select a page as a context for future tool calls.
- `take_screenshot` — Take a screenshot of the page or element.
- `take_snapshot` — Take a text snapshot of the currently selected page based on the a11y tree.
- `upload_file` — Upload a file through a provided element.
- `wait_for` — Wait for the specified text to appear on the selected page.

See `references/tools.md` for full signatures and examples.

Resources:
- `assets/mcporter.json` contains a ready-to-use MCPorter config for this server.
- `references/tools.md` lists tool signatures, flags, and examples.

Workflow:
1. Run `mcporter list --config assets/mcporter.json chrome-devtools` when you need to refresh tool docs.
2. Invoke tools with `mcporter call --config assets/mcporter.json chrome-devtools.<tool> ...`.
3. Prefer `--output json` when you need structured results.

assets/mcporter.json

{
  "mcpServers": {
    "chrome-devtools": {
      "description": "Chrome DevTools",
      "command": [
        "npx",
        "-y",
        "chrome-devtools-mcp@latest"
      ]
    }
  }
}

references/tools.md

# chrome-devtools tools



Generated by mcporter@0.7.4 on 2026-01-12T20:10:28.952Z.



Use `mcporter call --config assets/mcporter.json chrome-devtools.<tool>` to invoke tools.



## click

Clicks on the provided element

Signature:
`function click(uid: string, dblClick?: boolean);`

Flags:
`--uid <uid> [--dbl-click <dbl-click:true|false>] [--output <format>]`

Parameters:
- `--uid <uid>` — The uid of an element on the page from the page content snapshot (example: example-id)
- `--dbl-click <dbl-click:true|false>` — Set to true for double clicks. Default is false. (example: true)

Example:
`mcporter call 'chrome-devtools.click(uid: "example-id", dblClick: true)'`

## close_page

Closes the page by its index. The last open page cannot be closed.

Signature:
`function close_page(pageIdx: number);`

Flags:
`--page-idx <page-idx:number> [--output <format>]`

Parameters:
- `--page-idx <page-idx:number>` — The index of the page to close. Call list_pages to list pages. (example: 1)

Example:
`mcporter call 'chrome-devtools.close_page(pageIdx: 1)'`

## drag

Drag an element onto another element

Signature:
`function drag(from_uid: string, to_uid: string);`

Flags:
`--from-uid <from-uid> --to-uid <to-uid> [--output <format>]`

Parameters:
- `--from-uid <from-uid>` — The uid of the element to drag (example: example-id)
- `--to-uid <to-uid>` — The uid of the element to drop into (example: example-id)

Example:
`mcporter call 'chrome-devtools.drag(from_uid: "example-id", to_uid: "example-id")'`

## emulate

Emulates various features on the selected page.

Signature:
`function emulate(networkConditions?: "No emulation" | "Offline" | "Slow 3G" | "Fast 3G" | "Slow 4G" | "Fast 4G", cpuThrottlingRate?: number, geolocation?: unknown);`

Flags:
`[--network-conditions <network-conditions:No emulation|Offline|Slow 3G|Fast 3G|Slow 4G|Fast 4G>] [--cpu-throttling-rate <cpu-throttling-rate:number>] [--geolocation <geolocation>] [--output <format>]`

Parameters:
- `--network-conditions <network-conditions:No emulation|Offline|Slow 3G|Fast 3G|Slow 4G|Fast 4G>` — Throttle network. Set to "No emulation" to disable. If omitted, conditions remain unchanged. (choices: No emulation, Offline, Slow 3G, Fast 3G, Slow 4G, Fast 4G; example: No emulation)
- `--cpu-throttling-rate <cpu-throttling-rate:number>` — Represents the CPU slowdown factor. Set the rate to 1 to disable throttling. If omitted, throttling remains unchanged. (example: 1)
- `--geolocation <geolocation>` — Geolocation to emulate. Set to null to clear the geolocation override.

Example:
`mcporter call 'chrome-devtools.emulate(networkConditions: "No emulation", cpuThrottlingRate: 1)'`

## evaluate_script

Evaluate a JavaScript function inside the currently selected page. Returns the response as JSON
so returned values have to JSON-serializable.

Signature:
`function evaluate_script(function: string, args?: string[]);`

Flags:
`--function <function> [--args <args:value1,value2>] [--output <format>]`

Parameters:
- `--function <function>` — A JavaScript function declaration to be executed by the tool in the currently selected page.
Example without arguments: `() => {
  return document.title
}` or `async () => {
  return await fetch("example.com")
}`.
Example with arguments: `(el) => {
  return el.innerText;
}`

- `--args <args:value1,value2>` — An optional list of arguments to pass to the function. (example: value1,value2)

Example:
`mcporter call 'chrome-devtools.evaluate_script(function: "value", args: ["value1", "value2"])'`

## fill

Type text into a input, text area or select an option from a <select> element.

Signature:
`function fill(uid: string, value: string);`

Flags:
`--uid <uid> --value <value> [--output <format>]`

Parameters:
- `--uid <uid>` — The uid of an element on the page from the page content snapshot (example: example-id)
- `--value <value>` — The value to fill in

Example:
`mcporter call 'chrome-devtools.fill(uid: "example-id", value: "value")'`

## fill_form

Fill out multiple form elements at once

Signature:
`function fill_form(elements: string[]);`

Flags:
`--elements <elements:value1,value2> [--output <format>]`

Parameters:
- `--elements <elements:value1,value2>` — Elements from snapshot to fill out. (example: value1,value2)

Example:
`mcporter call 'chrome-devtools.fill_form(elements: ["value1", "value2"])'`

## get_console_message

Gets a console message by its ID. You can get all messages by calling list_console_messages.

Signature:
`function get_console_message(msgid: number);`

Flags:
`--msgid <msgid:number> [--output <format>]`

Parameters:
- `--msgid <msgid:number>` — The msgid of a console message on the page from the listed console messages (example: 1)

Example:
`mcporter call 'chrome-devtools.get_console_message(msgid: 1)'`

## get_network_request

Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.

Signature:
`function get_network_request(reqid?: number);`

Flags:
`[--reqid <reqid:number>] [--output <format>]`

Parameters:
- `--reqid <reqid:number>` — The reqid of the network request. If omitted returns the currently selected request in the DevTools Network panel. (example: 1)

Example:
`mcporter call 'chrome-devtools.get_network_request(reqid: 1)'`

## handle_dialog

If a browser dialog was opened, use this command to handle it

Signature:
`function handle_dialog(action: "accept" | "dismiss", promptText?: string);`

Flags:
`--action <action:accept|dismiss> [--prompt-text <prompt-text>] [--output <format>]`

Parameters:
- `--action <action:accept|dismiss>` — Whether to dismiss or accept the dialog (choices: accept, dismiss; example: accept)
- `--prompt-text <prompt-text>` — Optional prompt text to enter into the dialog.

Example:
`mcporter call 'chrome-devtools.handle_dialog(action: "accept")'`

## hover

Hover over the provided element

Signature:
`function hover(uid: string);`

Flags:
`--uid <uid> [--output <format>]`

Parameters:
- `--uid <uid>` — The uid of an element on the page from the page content snapshot (example: example-id)

Example:
`mcporter call 'chrome-devtools.hover(uid: "example-id")'`

## list_console_messages

List all console messages for the currently selected page since the last navigation.

Signature:
`function list_console_messages(pageSize?: number, pageIdx?: number, types?: "log" | "debug" | "info" | "error" | "warn" | "dir" | "dirxml" | "table" | "trace" | "clear" | "startGroup" | "startGroupCollapsed" | "endGroup" | "assert" | "profile" | "profileEnd" | "count" | "timeEnd" | "verbose" | "issue", includePreservedMessages?: boolean);`

Flags:
`[--page-size <page-size:number>] [--page-idx <page-idx:number>] [--types <types:log|debug|info|error|warn|dir|dirxml|table|trace|clear|startGroup|startGroupCollapsed|endGroup|assert|profile|profileEnd|count|timeEnd|verbose|issue>] [--include-preserved-messages <include-preserved-messages:true|false>] [--output <format>]`

Parameters:
- `--page-size <page-size:number>` — Maximum number of messages to return. When omitted, returns all requests. (example: 1)
- `--page-idx <page-idx:number>` — Page number to return (0-based). When omitted, returns the first page. (example: 1)
- `--types <types:log|debug|info|error|warn|dir|dirxml|table|trace|clear|startGroup|startGroupCollapsed|endGroup|assert|profile|profileEnd|count|timeEnd|verbose|issue>` — Filter messages to only return messages of the specified resource types. When omitted or empty, returns all messages. (choices: log, debug, info, error, warn, dir, dirxml, table, trace, clear, startGroup, startGroupCollapsed, endGroup, assert, profile, profileEnd, count, timeEnd, verbose, issue; example: log)
- `--include-preserved-messages <include-preserved-messages:true|false>` — Set to true to return the preserved messages over the last 3 navigations. (default: false; example: false)

Example:
`mcporter call 'chrome-devtools.list_console_messages(pageSize: 1, pageIdx: 1, types: "log", includePreservedMessa, ...)'`

## list_network_requests

List all requests for the currently selected page since the last navigation.

Signature:
`function list_network_requests(pageSize?: number, pageIdx?: number, resourceTypes?: "document" | "stylesheet" | "image" | "media" | "font" | "script" | "texttrack" | "xhr" | "fetch" | "prefetch" | "eventsource" | "websocket" | "manifest" | "signedexchange" | "ping" | "cspviolationreport" | "preflight" | "fedcm" | "other", includePreservedRequests?: boolean);`

Flags:
`[--page-size <page-size:number>] [--page-idx <page-idx:number>] [--resource-types <resource-types:document|stylesheet|image|media|font|script|texttrack|xhr|fetch|prefetch|eventsource|websocket|manifest|signedexchange|ping|cspviolationreport|preflight|fedcm|other>] [--include-preserved-requests <include-preserved-requests:true|false>] [--output <format>]`

Parameters:
- `--page-size <page-size:number>` — Maximum number of requests to return. When omitted, returns all requests. (example: 1)
- `--page-idx <page-idx:number>` — Page number to return (0-based). When omitted, returns the first page. (example: 1)
- `--resource-types <resource-types:document|stylesheet|image|media|font|script|texttrack|xhr|fetch|prefetch|eventsource|websocket|manifest|signedexchange|ping|cspviolationreport|preflight|fedcm|other>` — Filter requests to only return requests of the specified resource types. When omitted or empty, returns all requests. (choices: document, stylesheet, image, media, font, script, texttrack, xhr, fetch, prefetch, eventsource, websocket, manifest, signedexchange, ping, cspviolationreport, preflight, fedcm, other; example: document)
- `--include-preserved-requests <include-preserved-requests:true|false>` — Set to true to return the preserved requests over the last 3 navigations. (default: false; example: false)

Example:
`mcporter call 'chrome-devtools.list_network_requests(pageSize: 1, pageIdx: 1, resourceTypes: "document", includeP, ...)'`

## list_pages

Get a list of pages open in the browser.

Signature:
`function list_pages();`

Flags:
`[--output <format>]`

Example:
`mcporter call 'chrome-devtools.list_pages()'`

## navigate_page

Navigates the currently selected page to a URL.

Signature:
`function navigate_page(type?: "url" | "back" | "forward" | "reload", url?: string, ignoreCache?: boolean, timeout?: number);`

Flags:
`[--type <type:url|back|forward|reload>] [--url <url>] [--ignore-cache <ignore-cache:true|false>] [--timeout <timeout:number>] [--output <format>]`

Parameters:
- `--type <type:url|back|forward|reload>` — Navigate the page by URL, back or forward in history, or reload. (choices: url, back, forward, reload; example: url)
- `--url <url>` — Target URL (only type=url)
- `--ignore-cache <ignore-cache:true|false>` — Whether to ignore cache on reload. (example: true)
- `--timeout <timeout:number>` — Maximum wait time in milliseconds. If set to 0, the default timeout will be used. (example: 1)

Example:
`mcporter call 'chrome-devtools.navigate_page(type: "url", ignoreCache: true, timeout: 1)'`

## new_page

Creates a new page

Signature:
`function new_page(url: string, timeout?: number);`

Flags:
`--url <url> [--timeout <timeout:number>] [--output <format>]`

Parameters:
- `--url <url>` — URL to load in a new page.
- `--timeout <timeout:number>` — Maximum wait time in milliseconds. If set to 0, the default timeout will be used. (example: 1)

Example:
`mcporter call 'chrome-devtools.new_page(url: "https://example.com", timeout: 1)'`

## performance_analyze_insight

Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.

Signature:
`function performance_analyze_insight(insightSetId: string, insightName: string);`

Flags:
`--insight-set-id <insight-set-id> --insight-name <insight-name> [--output <format>]`

Parameters:
- `--insight-set-id <insight-set-id>` — The id for the specific insight set. Only use the ids given in the "Available insight sets" list. (example: example-id)
- `--insight-name <insight-name>` — The name of the Insight you want more information on. For example: "DocumentLatency" or "LCPBreakdown"

Example:
`mcporter call 'chrome-devtools.performance_analyze_insight(insightSetId: "example-id", insightName: "value")'`

## performance_start_trace

Starts a performance trace recording on the selected page. This can be used to look for performance problems and insights to improve the performance of the page. It will also report Core Web Vital (CWV) scores for the page.

Signature:
`function performance_start_trace(reload: boolean, autoStop: boolean);`

Flags:
`--reload <reload:true|false> --auto-stop <auto-stop:true|false> [--output <format>]`

Parameters:
- `--reload <reload:true|false>` — Determines if, once tracing has started, the page should be automatically reloaded. (example: true)
- `--auto-stop <auto-stop:true|false>` — Determines if the trace recording should be automatically stopped. (example: true)

Example:
`mcporter call 'chrome-devtools.performance_start_trace(reload: true, autoStop: true)'`

## performance_stop_trace

Stops the active performance trace recording on the selected page.

Signature:
`function performance_stop_trace();`

Flags:
`[--output <format>]`

Example:
`mcporter call 'chrome-devtools.performance_stop_trace()'`

## press_key

Press a key or key combination. Use this when other input methods like fill() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).

Signature:
`function press_key(key: string);`

Flags:
`--key <key> [--output <format>]`

Parameters:
- `--key <key>` — A key or a combination (e.g., "Enter", "Control+A", "Control++", "Control+Shift+R"). Modifiers: Control, Shift, Alt, Meta

Example:
`mcporter call 'chrome-devtools.press_key(key: "value")'`

## resize_page

Resizes the selected page's window so that the page has specified dimension

Signature:
`function resize_page(width: number, height: number);`

Flags:
`--width <width:number> --height <height:number> [--output <format>]`

Parameters:
- `--width <width:number>` — Page width (example: 1)
- `--height <height:number>` — Page height (example: 1)

Example:
`mcporter call 'chrome-devtools.resize_page(width: 1, height: 1)'`

## select_page

Select a page as a context for future tool calls.

Signature:
`function select_page(pageIdx: number, bringToFront?: boolean);`

Flags:
`--page-idx <page-idx:number> [--bring-to-front <bring-to-front:true|false>] [--output <format>]`

Parameters:
- `--page-idx <page-idx:number>` — The index of the page to select. Call list_pages to get available pages. (example: 1)
- `--bring-to-front <bring-to-front:true|false>` — Whether to focus the page and bring it to the top. (example: true)

Example:
`mcporter call 'chrome-devtools.select_page(pageIdx: 1, bringToFront: true)'`

## take_screenshot

Take a screenshot of the page or element.

Signature:
`function take_screenshot(format?: "png" | "jpeg" | "webp", quality?: number, uid?: string, fullPage?: boolean, filePath?: string);`

Flags:
`[--format <format:png|jpeg|webp>] [--quality <quality:number>] [--uid <uid>] [--full-page <full-page:true|false>] [--file-path <file-path>] [--output <format>]`

Parameters:
- `--format <format:png|jpeg|webp>` — Type of format to save the screenshot as. Default is "png" (choices: png, jpeg, webp; default: png; example: png)
- `--quality <quality:number>` — Compression quality for JPEG and WebP formats (0-100). Higher values mean better quality but larger file sizes. Ignored for PNG format. (example: 1)
- `--uid <uid>` — The uid of an element on the page from the page content snapshot. If omitted takes a pages screenshot. (example: example-id)
- `--full-page <full-page:true|false>` — If set to true takes a screenshot of the full page instead of the currently visible viewport. Incompatible with uid. (example: true)
- `--file-path <file-path>` — The absolute path, or a path relative to the current working directory, to save the screenshot to instead of attaching it to the response. (example: /path/to/file.md)

Example:
`mcporter call 'chrome-devtools.take_screenshot(format: "png", quality: 1, uid: "example-id", fullPage: true, file, ...)'`

## take_snapshot

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).

Signature:
`function take_snapshot(verbose?: boolean, filePath?: string);`

Flags:
`[--verbose <verbose:true|false>] [--file-path <file-path>] [--output <format>]`

Parameters:
- `--verbose <verbose:true|false>` — Whether to include all possible information available in the full a11y tree. Default is false. (example: true)
- `--file-path <file-path>` — The absolute path, or a path relative to the current working directory, to save the snapshot to instead of attaching it to the response. (example: /path/to/file.md)

Example:
`mcporter call 'chrome-devtools.take_snapshot(verbose: true, filePath: "/path/to/file.md")'`

## upload_file

Upload a file through a provided element.

Signature:
`function upload_file(uid: string, filePath: string);`

Flags:
`--uid <uid> --file-path <file-path> [--output <format>]`

Parameters:
- `--uid <uid>` — The uid of the file input element or an element that will open file chooser on the page from the page content snapshot (example: example-id)
- `--file-path <file-path>` — The local path of the file to upload (example: /path/to/file.md)

Example:
`mcporter call 'chrome-devtools.upload_file(uid: "example-id", filePath: "/path/to/file.md")'`

## wait_for

Wait for the specified text to appear on the selected page.

Signature:
`function wait_for(text: string, timeout?: number);`

Flags:
`--text <text> [--timeout <timeout:number>] [--output <format>]`

Parameters:
- `--text <text>` — Text to appear on the page
- `--timeout <timeout:number>` — Maximum wait time in milliseconds. If set to 0, the default timeout will be used. (example: 1)

Example:
`mcporter call 'chrome-devtools.wait_for(text: "value", timeout: 1)'`