skills.rest
fallguyconsulting
fallguyconsultingOFFICIAL
Explore all skills by this author →
GitHub

setup-web

Merges the chrome-devtools-mcp server entry into a project's .mcp.json configuration.

1|Updated Jul 21, 2026
Search Tags:#web development#claude code#browser automation#configuration#mcp#setup#chrome-devtools
One-click install
npx skills add https://github.com/fallguyconsulting/ok-plugins --skill setup-web-fallguyconsulting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setup-web
Source: https://github.com/fallguyconsulting/ok-plugins/tree/main/plugins/ok-web/skills/setup-web
Command: npx skills add https://github.com/fallguyconsulting/ok-plugins --skill setup-web-fallguyconsulting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp.

What problem does it solve? Web projects need agent-facing browser control, but manually wiring an MCP server into project configuration is error-prone and risks clobbering existing entries. This Skill converges the chrome-devtools-mcp server into the project's .mcp.json idempotently, so running it repeatedly verifies and repairs rather than duplicating or overwriting. ## Core Features & Use Cases - Merge-never-clobber configuration: Adds the chrome-devtools server entry to .mcp.json without touching other entries, and refuses to overwrite deliberate local variants. - Prerequisite checks: Verifies Node.js 20+ and Chrome stable are installed, reporting what to install while still writing the inert configuration. - Migration and flagging: Upgrades the suite's previous default entry to the per-project profile version, and flags superseded hand-rolled CDP-attach browser kits without deleting anything. - Use Case: Run /setup-web in a new web project to give the agent full browser control — navigation, clicks, screenshots, console messages — via a headed Chrome with a persistent per-project profile. ## Quick Start Run the /setup-web slash command in your web project to configure the chrome-devtools-mcp server in .mcp.json, then restart the session and verify with /mcp.

Frequently Asked Questions about setup-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up chrome-devtools-mcp in a Claude Code project?▼

Run the /setup-web slash command in the project. It merges the chrome-devtools server entry into .mcp.json at the project root, then restart the session or reconnect via /mcp and approve the server when prompted.

How do I give an AI agent browser control in a web project?▼

Add Google's chrome-devtools-mcp server to the project's .mcp.json. It launches its own headed Chrome with a persistent per-project profile, exposing tools like navigate_page, click, take_snapshot, and list_console_messages.

What are the prerequisites for chrome-devtools-mcp?▼

You need Node.js LTS with major version 20 or newer, and Chrome stable installed — /Applications/Google Chrome.app on macOS or google-chrome/chrome on PATH elsewhere. The configuration is still written if prerequisites are missing, since it stays inert until used.

Why do browser tool calls fail when two sessions run concurrently?▼

Without a per-project --userDataDir, the server uses one user-wide Chrome profile, and Chrome allows only one process to hold a profile. The setup entry adds a per-project profile path so sessions in different projects never contend.

Will setup-web overwrite my existing .mcp.json entries?▼

No. It merges the chrome-devtools entry without touching other keys, no-ops if the entry already matches, and refuses to overwrite a differing entry — it shows both versions and lets the owner decide.

Does the chrome-devtools MCP server replace Playwright test suites?▼

No. Playwright test suites are not flagged or affected — they were never part of the interactive tooling. Only hand-rolled CDP-attach browser kits are flagged as superseded, and retiring them remains the owner's decision.

Related Skills

Explore More Software Engineering Skills→
theflysurfertheflysurfer

julien-mcp-chrome-devtools

Install Chrome DevTools MCP and merge its configuration into .mcp.json.

Community
Advanced
runablehqrunablehq
182

mini-browser

Automate browser control and web interaction in a real Chrome session.

Official
Advanced
thktthkt
11

e2e

Generate Playwright E2E tests and documentation through guided browser interactions.

Community
Intermediate
metasavermetasaver

chrome-devtools-testing

Automate GUI Chrome web application testing via Chrome DevTools Protocol.

Community
Advanced