メニュー
Audit web performance using Chrome DevTools MCP. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Generate reproducible analysis artifacts — SQL queries, Python visualizations, and summary tables — as you work through a BigQuery data analysis. Use when asked to conduct a deep dive, exploratory analysis, or investigation that goes beyond a simple data lookup.
Provide a lookup index of dbt models (BigQuery tables) to guide query writing against a data warehouse. Use when you need to query, analyze, or look up data in a dbt-powered data warehouse, or when resolving a vague data question into the right BigQuery tables to query.
Diagnose and fix GitHub Actions CI failures. Inspects workflow runs and logs, identifies root causes, implements minimal fixes, and pushes to a fix branch. Use when CI is failing, red, broken, or needs diagnosis.
Create a GitHub pull request following project conventions. Use when the user asks to create a PR, submit changes for review, or open a pull request. Handles commit analysis, branch management, and PR creation using the gh CLI tool.
Update user-facing documentation when code changes. Use when asked to update docs, review docs, handle documentation changes, run scheduled documentation tasks, or analyze recent commits for documentation needs.
Triage GitHub bug reports for actionability. Use when evaluating whether a bug issue has sufficient detail and identifying missing information from the reporter.
| name | web-performance-audit |
| description | Audit web performance using Chrome DevTools MCP. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. |
| license | MIT |
Audit web page performance using Chrome DevTools MCP tools. This skill focuses on Core Web Vitals, network optimization, and high-level accessibility gaps.
Run this before starting. Try calling navigate_page or performance_start_trace. If unavailable, STOP—the chrome-devtools MCP server isn't configured.
Ask the user to add this to their MCP config:
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
| Task | Tool Call |
|---|---|
| Load page | navigate_page(url: "...") |
| Start trace | performance_start_trace(autoStop: true, reload: true) |
| Analyze insight | performance_analyze_insight(insightSetId: "...", insightName: "...") |
| List requests | list_network_requests(resourceTypes: ["Script", "Stylesheet", ...]) |
| Request details | get_network_request(reqid: <id>) |
| A11y snapshot | take_snapshot(verbose: true) |
Copy this checklist to track progress:
Audit Progress:
- [ ] Phase 1: Performance trace (navigate + record)
- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)
- [ ] Phase 3: Network analysis
- [ ] Phase 4: Accessibility snapshot
- [ ] Phase 5: Codebase analysis (skip if third-party site)
Navigate to the target URL:
navigate_page(url: "<target-url>")
Start a performance trace with reload to capture cold-load metrics:
performance_start_trace(autoStop: true, reload: true)
Wait for trace completion, then retrieve results.
Troubleshooting:
navigate_page firstUse performance_analyze_insight to extract key metrics.
Note: Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the insightSetId from the trace response to discover available insights.
Common insight names:
| Metric | Insight Name | What to Look For |
|---|---|---|
| LCP | LCPBreakdown | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |
| CLS | CLSCulprits | Elements causing layout shifts (images without dimensions, injected content, font swaps) |
| Render Blocking | RenderBlocking | CSS/JS blocking first paint |
| Document Latency | DocumentLatency | Server response time issues |
| Network Dependencies | NetworkRequestsDepGraph | Request chains delaying critical resources |
Example:
performance_analyze_insight(insightSetId: "<id-from-trace>", insightName: "LCPBreakdown")
Key thresholds (good/needs-improvement/poor):
List all network requests to identify optimization opportunities:
list_network_requests(resourceTypes: ["Script", "Stylesheet", "Document", "Font", "Image"])
Look for:
<head> without async/defer/media attributesCache-Control, ETag, or Last-Modified headersFor detailed request info:
get_network_request(reqid: <id>)
Take an accessibility tree snapshot:
take_snapshot(verbose: true)
Flag high-level gaps:
Skip if auditing a third-party site without codebase access.
Analyze the codebase to understand where improvements can be made.
Search for configuration files to identify the stack:
| Tool | Config Files |
|---|---|
| Webpack | webpack.config.js, webpack.*.js |
| Vite | vite.config.js, vite.config.ts |
| Rollup | rollup.config.js, rollup.config.mjs |
| esbuild | esbuild.config.js, build scripts with esbuild |
| Parcel | .parcelrc, package.json (parcel field) |
| Next.js | next.config.js, next.config.mjs |
| Nuxt | nuxt.config.js, nuxt.config.ts |
| SvelteKit | svelte.config.js |
| Astro | astro.config.mjs |
Also check package.json for framework dependencies and build scripts.
mode: 'production', sideEffects in package.json, usedExports optimizationtreeshake optionsindex.js re-exports), large utility libraries imported wholesale (lodash, moment)content config)@babel/preset-env targets and useBuiltIns settingcore-js imports (often oversized)browserslist config for overly broad targetingterser, esbuild, or swc minificationPresent findings as: