菜单
Bootstrap web performance debugging tooling: install chrome-devtools-mcp and related MCP servers/skills.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | setup-perf-stack |
| description | Bootstrap web performance debugging tooling: install chrome-devtools-mcp and related MCP servers/skills. |
Bootstrap the MCP servers and skills required for Claude Code to autonomously investigate performance issues in web applications.
This skill only handles installation. For the actual investigation workflow (the reproduce → capture → analyze → fix → validate loop, framework-specific rules, per-scenario playbooks), use the investigate-web-perf skill once setup is complete.
The anchor is chrome-devtools-mcp — it wraps Puppeteer + CDP and exposes performance_analyze_insight, which compresses a ~30 MB Chrome trace into a ~4 KB summary across 18 named insights (LCPBreakdown, INPBreakdown, ForcedReflow, DuplicatedJavaScript, CLSCulprits, etc.). Without this compression, raw traces blow the context window. Everything else layers on top.
| Component | Role | Required? |
|---|---|---|
chrome-devtools-mcp | Lab traces, CDP, insights, Lighthouse-in-MCP | Yes |
| Chrome DevTools Skills plugin | Curated LCP + a11y workflows that prevent Perf-API hallucinations | Yes |
next-devtools-mcp | Next.js 16+ dev-server bridge, route tree, Suspense automation | Next.js 16+ only |
@danielsogl/lighthouse-mcp | Batch scoring + regression diff | Optional; CDT MCP has lighthouse_audit |
react-scan dev dep | Runtime render profiler (successor to why-did-you-render) | React projects |
| Dedicated Chrome debug profile | Required for authenticated sites (Chrome 136+ blocks default profile) | Auth flows only |
Ask the user (or infer from the repo) and confirm:
next-devtools-mcp for Next.js 16+.--scope user, every project inherits) or project-level (--scope project, only this repo). Default to user for the core tools.Never install speculatively. Each MCP costs ~13–18k tokens of tool definitions per session; a minimal stack is the right default.
chrome-devtools-mcpclaude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest
Privacy-sensitive or offline contexts:
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --no-performance-crux --no-usage-statistics
WSL: Chrome must be installed inside the Linux distro, not via the Windows host. Check with which google-chrome.
These are the curated skills Google ships alongside the MCP. They encode the capture→analyze loop and counter the documented failure mode where models hallucinate non-existent Performance-API calls (chrome-devtools-mcp#1114).
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-mcp
This brings in at minimum: chrome-devtools-cli, debug-optimize-lcp, and the accessibility debug skill.
Bridges the /_next/mcp dev-server endpoint for route/Suspense/compile-error introspection.
claude mcp add next-devtools --scope user -- npx -y next-devtools-mcp@latest
Skip this step for non-Next.js projects and for Next.js 15 or earlier.
Lighthouse MCP (batch scoring, regression diffs, reusable prompts) — skip unless the user explicitly needs batch Lighthouse runs. chrome-devtools-mcp already exposes lighthouse_audit for one-off runs.
claude mcp add lighthouse --scope user -- npx @danielsogl/lighthouse-mcp@latest
react-scan as a dev dependency for in-browser render inspection:
npm install --save-dev react-scan
Optional convenience script for package.json:
"scripts": {
"scan": "react-scan http://localhost:3000"
}
Do not install: @million/lint (deprecated on npm), why-did-you-render for new projects (maintenance-only since Jan 2025), any community "react-scan MCP" (none is officially supported; the one on LobeHub is an unrelated static analyzer).
Chrome 136+ blocks remote debugging against the default profile. For any authenticated page, launch a dedicated profile:
google-chrome \
--remote-debugging-port=9222 \
--user-data-dir="$HOME/.chrome-debug"
Log in once in this profile (cookies persist across sessions), then reconfigure the MCP to attach to the running instance:
claude mcp remove chrome-devtools
claude mcp add chrome-devtools --scope user -- \
npx chrome-devtools-mcp@latest \
--browserUrl http://localhost:9222 \
--user-data-dir "$HOME/.chrome-debug"
Ask the agent to record a trace against a known URL:
Record a reload trace of
https://example.comwith Slow 4G + 4× CPU. Callperformance_analyze_insightforLCPBreakdown. Report the LCP element and the dominant subpart.
Success signals:
performance_start_trace with emulation params, not freeform evaluate_script.performance_analyze_insight with a valid insight name from the fixed list of 18.Failure signals (reinstall steps 1–2):
performance.getEntriesByType("largest-contentful-paint-v2") or similar non-existent APIs.performance_analyze_insight is not available as a tool.Once the smoke test passes, hand off to the investigate-web-perf skill for real work.
chrome-devtools-mcp process leak on Codex CLI — Open issue openai/codex#17574. Long sessions leak helper processes consuming tens of GB of swap. Run pkill -f chrome-devtools-mcp between sessions until patched./clear between unrelated perf investigations, delegate trace triage to subagents, prefer snapshots over screenshots.investigate-web-perf skill handles this by always pinning emulation and running N=3.Snyk's ToxicSkills study found ~13% of community "awesome-skill" packages had critical security issues, some exfiltrating credentials. Review every SKILL.md and bundled script before installing community skills. Safe base: Anthropic's own skills/ repo, addyosmani/web-quality-skills, and skills bundled with ChromeDevTools/chrome-devtools-mcp.
Add terms, context, or instructions to Shama voice-to-text files for clipboard mode (Ctrl+Opt+Space) or shell-command mode (Ctrl+Opt+S), at project or global level.
Initialize Shama voice-to-text config for the project — create voice.json, voice-vocabulary.md, voice-context.md, and register the project in Shama's registry.toml.
Reflect on codebase navigation effectiveness at end of conversation. Surfaces dead ends, inefficiencies, missing context. Does not write files — pair with /kiro:steering-custom to persist.
Use when picking or vetting a keyboard shortcut on macOS. Triggers include "what hotkey should I use for X", "is `<combo>` available", "does this shortcut conflict", "recommend a keybinding for…", "check `<combo>` against my setup", "pick a hotkey for…", or any mention of choosing/binding/changing a shortcut in WezTerm, tmux, Zed, Chrome, Claude Code, or macOS. Determines whether a proposed combo collides with OS-reserved bindings, app defaults, or the user's customizations, and recommends ergonomic alternatives when needed.
Detect and remove dead code with knip. Use when the user asks to "run knip", "find unused files", "find unused exports", "find unused dependencies", "clean up dead code", "remove dead code", "set up knip", "configure knip", "knip.json", "knip false positive", "knip CI", or mentions a `knip` config, dependency bloat, bundle bloat from unused imports, or tree-shaking unused exports. Covers the configuration-first workflow, confidence-gated deletion, framework-specific gotchas (Next.js 15+, Tailwind, Storybook, Jest, Bun's test runner and `bun build --compile`), monorepos, CI integration, and performance tuning.
This skill should be used when the user asks to "set up react-scan", "install react-scan", "diagnose React re-renders", "find unnecessary renders", "find unstable props", "automate React render checks with Playwright", "react-scan + playwright", "measure component renders programmatically", "check why a React component is slow", or mentions React rendering issues, slow React interactions, render counts, or component-level perf attribution. Covers install across Next.js/Vite/Remix/script-tag/browser-extension, the lite headless API for CI, and the canonical render-attribution → fix → validate loop driven through Playwright.