Agent skill

Chrome Devtools MCP Skill

by holon-run in holon-run/uxc

Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default…

MITAuto-check passedTesting & QA

Install Chrome Devtools MCP Skill

skills CLI
$ npx skills add holon-run/uxc --skill chrome-devtools-mcp-skill -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install holon-run/uxc chrome-devtools-mcp-skill --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/holon-run/uxc.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chrome-devtools-mcp-skill .claude/skills/chrome-devtools-mcp-skill && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
chrome-devtools-mcp-skill
GitHub stars
116
Token cost
~1.1k tokens
SKILL.md length
426 words
Files
4 (incl. scripts, references)
Skills in repo
62
Repo updated
First seen
Licence
MIT

At a glance

Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default…

  • Works in 6 steps: Verify protocol/path from official… → Detect auth requirement explicitly → Use a fixed link command by default → …
  • Tasks that involve Browser testing
  • SKILL.md covers Prerequisites, Core Workflow (Chrome DevTools…, Guardrails and References
  • Runs Shell scripts from its folder; calls npx; reaches github.com

What it does

Chrome Devtools MCP Skill is an agent skill from holon-run/uxc. Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default and optional browserUrl or isolated fallback modes.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts and reference files (for example `agents/openai.yaml`, `references/usage-patterns.md` and `scripts/validate.sh`).

It sits in Testing & QA, covering Browser testing and MCP servers. It works with Model Context Protocol and Chrome DevTools. The repository describes itself as: A unified CLI for discovering and invoking tools across OpenAPI, MCP, GraphQL, gRPC, and JSON-RPC. The licence is MIT.

When your agent uses it

  • Tasks that involve Browser testing
  • Tasks that involve MCP servers

Example prompts

  • “/chrome-devtools-mcp-skill”

Requirements

  • Node.js
  • A Bash shell

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Verify protocol/path from official source and probe
  2. Detect auth requirement explicitly
  3. Use a fixed link command by default
  4. Inspect operation schema before execution
  5. Prefer read-first interaction
  6. Confirm before mutating page state

What it can do on your machine

Read from SKILL.md and the folder at commit 562d47c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Shell), which the agent can run.

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Chrome Devtools MCP Skill loads about 1.1k tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 69 tokens; SKILL.md has 426 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~69
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from holon-run/uxc at commit 562d47c, republished under its MIT licence (© holon-run). 426 words, ~1,135 tokens.

Download SKILL.mdSave it as .claude/skills/chrome-devtools-mcp-skill/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
chrome-devtools-mcp-skill
description
Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default and optional browserUrl or isolated fallback modes.

Chrome DevTools MCP Skill

Use this skill to run Chrome DevTools MCP operations through uxc using a fixed stdio endpoint.

Reuse the uxc skill for generic MCP discovery, daemon reuse, JSON envelope parsing, and error handling.

Prerequisites

  • uxc is installed and available in PATH.
  • npx is available in PATH (Node.js installed).
  • Chrome 144+ is running locally with remote debugging enabled from chrome://inspect/#remote-debugging if you use the default live-browser flow.
  • Network access is available for first-time chrome-devtools-mcp package fetch.

Core Workflow (Chrome DevTools MCP-Specific)

Endpoint candidate inputs before finalizing:

  • Raw package form from official docs:
    • npx chrome-devtools-mcp@latest
  • Reliable non-interactive form:
    • npx -y chrome-devtools-mcp@latest
  • Default live-browser endpoint for this skill:
    • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
  • Explicit browser-url endpoint:
    • npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics
  • Fallback isolated endpoint:
    • npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics
  • Running local Chrome auto-connect mode:
    • npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics
  1. Verify protocol/path from official source and probe:
    • Official source:
      • https://github.com/ChromeDevTools/chrome-devtools-mcp
    • probe candidate endpoints with:
      • uxc "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics" -h
    • Confirm protocol is MCP stdio (protocol == "mcp" in envelope).
  2. Detect auth requirement explicitly:
    • Run host help or a minimal read call and inspect envelope.
    • Default local stdio flow requires no OAuth/API key.
    • Existing Chrome attachment requires remote debugging to be enabled separately, but not API auth.
  3. Use a fixed link command by default:
    • command -v chrome-devtools-mcp-cli
    • If missing, create it:
      • uxc link chrome-devtools-mcp-cli "npx -y chrome-devtools-mcp@latest --autoConnect --no-usage-statistics"
    • Optional explicit browser-url link:
      • command -v chrome-devtools-mcp-port
      • uxc link chrome-devtools-mcp-port "npx -y chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222 --no-usage-statistics"
    • Optional isolated fallback link:
      • command -v chrome-devtools-mcp-isolated
      • uxc link chrome-devtools-mcp-isolated "npx -y chrome-devtools-mcp@latest --headless --isolated --no-usage-statistics"
    • chrome-devtools-mcp-cli -h
  4. Inspect operation schema before execution:
    • chrome-devtools-mcp-cli new_page -h
    • chrome-devtools-mcp-cli take_snapshot -h
    • chrome-devtools-mcp-cli list_network_requests -h
    • chrome-devtools-mcp-cli lighthouse_audit -h
  5. Prefer read-first interaction:
    • Start with new_page, list_pages, take_snapshot, list_network_requests, or list_console_messages.
  6. Confirm before mutating page state:
    • click
    • fill
    • fill_form
    • press_key
    • upload_file
    • evaluate_script
    • handle_dialog
Show full SKILL.md (116 more words)Show less

Guardrails

  • Keep automation on the JSON output envelope; do not rely on --text.
  • Use chrome-devtools-mcp-cli as the default command path.
  • Prefer the live-browser default endpoint when you need real logged-in state, current tabs, network diagnostics, console inspection, or performance analysis.
  • Prefer --autoConnect first when browser-side remote debugging is available.
  • Use chrome-devtools-mcp-port only when you intentionally run a Chrome instance with --remote-debugging-port=9222.
  • If no debuggable Chrome is available, fallback to chrome-devtools-mcp-isolated.
  • Prefer take_snapshot over screenshots for model-action loops.
  • Prefer list_network_requests / get_network_request over raw script evaluation when inspecting network behavior.
  • Treat lighthouse_audit, performance_start_trace, and take_memory_snapshot as heavier operations; use them intentionally.
  • Use evaluate_script only when an existing higher-level DevTools tool cannot answer the question.

References

  • Invocation patterns:
    • references/usage-patterns.md

© holon-run, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (scripts, references) in skills/chrome-devtools-mcp-skill of holon-run/uxc.

  • SKILL.md
  • agents/openai.yaml
  • references/usage-patterns.md
  • scripts/validate.sh

Open the folder on GitHubat commit 562d47c

Compare with similar skills

Chrome Devtools MCP Skill next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Chrome Devtools MCP Skill compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Chrome Devtools MCP Skill this skillholon-run/uxc116—~1.1kAutomated safety check: PassMIT
Mirroir Onboardjfarcand/mirroir-mcp245—~4.4kAutomated safety check: NotesApache-2.0
Browser Testing With Devtoolsshashankswe2020-ux/whoop-mcp165—~3kAutomated safety check: WarnMIT
Extension Puppeteer Debuggingmengxi-ream/read-frog10k—~2kAutomated safety check: NotesGPL-3.0
Chrome Devtools MCPmanagedcode/dotnet-skills486—~2.2kAutomated safety check: PassMIT
React Devtools MCPsanity-io/ui176—~2kAutomated safety check: PassMIT

Similar skills

  • Mirroir Onboard

    jfarcand/mirroir-mcp

    Onboard a consumer web app to mirroir's .mirroir/ dotfile by EXPLORING the running app (chrome-devtools-mcp) — derive real selectors from the accessibility tree, exercise each surface's primary…

    245 GitHub stars~4.4k tokensUpdated 2 days ago
    Testing & QAAuto-check: notes
  • Browser Testing With Devtools

    shashankswe2020-ux/whoop-mcp

    Tests in real browsers. An agent skill from shashankswe2020-ux/whoop-mcp.

    165 GitHub stars~3k tokensUpdated yesterday
    Testing & QAAuto-check: warnings
  • Extension Puppeteer Debugging

    mengxi-ream/read-frog

    Debug the built Read Frog extension in real Chrome. An agent skill from mengxi-ream/read-frog.

    10k GitHub stars~2k tokensUpdated today
    DevelopmentAuto-check: notes
  • Chrome Devtools MCP

    managedcode/dotnet-skills

    Use Chrome DevTools MCP from .NET agents and .NET-focused repos to inspect, debug, and automate Chrome through an MCP client.

    486 GitHub stars~2.2k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • React Devtools MCP

    sanity-io/ui

    Official

    Inspect and profile the React component tree of a running Storybook story through chrome-devtools-mcp (React DevTools over the Chrome DevTools Protocol, via react-devtools-cdt-mcp).

    176 GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Team Frontend Debug

    catlog22/Claude-Code-Workflow

    Frontend debugging team using Chrome DevTools MCP. An agent skill from catlog22/Claude-Code-Workflow.

    2.1k GitHub stars~2.8k tokensUpdated 3 mo ago
    Testing & QAAuto-check: notes

More from holon-run/uxc

All 62 skills in this repo
  • Context7 MCP Skill

    holon-run/uxc

    Query up-to-date library documentation and code examples using Context7 MCP.

    116 GitHub stars~564 tokensUpdated 23 days ago
    Auto-check passed
  • Deepwiki MCP Skill

    holon-run/uxc

    Ask questions and read documentation about any GitHub repository using DeepWiki MCP.

    116 GitHub stars~700 tokensUpdated 23 days ago
    Auto-check passed
  • Operate Linear workspace issues, projects, and teams through Linear GraphQL API using UXC.

    116 GitHub stars~1.8k tokensUpdated 23 days ago
    Auto-check passed
  • Operate Notion Public API through UXC with a curated OpenAPI schema for search, block traversal, page reads, content writes, and data source/database inspection.

    116 GitHub stars~2.3k tokensUpdated 23 days ago
    Auto-check passed
  • Operate Alchemy Prices API reads through UXC with a curated OpenAPI schema, path-templated API-key auth, and read-first guardrails.

    116 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed
  • Uxc

    holon-run/uxc

    Discover and call remote schema-exposed interfaces with UXC.

    116 GitHub stars~1.8k tokensUpdated 23 days ago
    Auto-check passed

Questions about Chrome Devtools MCP Skill

What does Chrome Devtools MCP Skill do?

Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default…. Chrome Devtools MCP Skill is an agent skill from holon-run/uxc. Use Chrome DevTools MCP through UXC over local stdio for page navigation, DOM/a11y snapshots, network inspection, console inspection, and performance tooling, with a live-browser autoConnect default and optional browserUrl or isolated fallback modes.

When should I use Chrome Devtools MCP Skill?

Chrome Devtools MCP Skill fits situations like: tasks that involve Browser testing; tasks that involve MCP servers.

How do I install Chrome Devtools MCP Skill in Claude Code?

Run `npx skills add holon-run/uxc --skill chrome-devtools-mcp-skill -a claude-code`. Or copy the skill folder (skills/chrome-devtools-mcp-skill in holon-run/uxc) into .claude/skills/chrome-devtools-mcp-skill in your project. Claude Code loads it when a task matches its description.

How do I install Chrome Devtools MCP Skill in Codex?

Run `npx skills add holon-run/uxc --skill chrome-devtools-mcp-skill -a codex`. Or copy the skill folder (skills/chrome-devtools-mcp-skill in holon-run/uxc) into .agents/skills/chrome-devtools-mcp-skill in your project. Codex loads it when a task matches its description.

Can I use Chrome Devtools MCP Skill in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add holon-run/uxc --skill chrome-devtools-mcp-skill -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chrome-devtools-mcp-skill, .gemini/skills/chrome-devtools-mcp-skill, .github/skills/chrome-devtools-mcp-skill and .opencode/skills/chrome-devtools-mcp-skill in your project.

What does Chrome Devtools MCP Skill need to run?

Going by SKILL.md and its folder, Chrome Devtools MCP Skill needs a shell for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js; A Bash shell.

Does Chrome Devtools MCP Skill access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Chrome Devtools MCP Skill safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Chrome Devtools MCP Skill use?

Chrome Devtools MCP Skill is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Chrome Devtools MCP Skill use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 690 tokens, read only when the agent opens those files.

What are the alternatives to Chrome Devtools MCP Skill?

Skills that share tags, products or a category with Chrome Devtools MCP Skill: Mirroir Onboard (jfarcand/mirroir-mcp, 245 stars), Browser Testing With Devtools (shashankswe2020-ux/whoop-mcp, 165 stars), Extension Puppeteer Debugging (mengxi-ream/read-frog, 10k stars) and Chrome Devtools MCP (managedcode/dotnet-skills, 486 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Chrome Devtools MCP Skill?

holon-run (a GitHub organization) maintains it in holon-run/uxc, which has 116 GitHub stars. The repository holds 62 skills in this directory. The repository was last updated on September 15, 2026.

Source: holon-run/uxc on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.