Use Chrome DevTools MCP for frontend performance work such as slow page loads, LCP, CLS, INP, Lighthouse regressions, scripting hotspots, or layout thrash.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 9/2/2026
What it changes
Passed 14 of 20 test cases with the skill, and 14 of 20 without it.
Without skill68%
With skill68%
Checks it passed that the model alone missed
Selects lighthouse_audit for high-level page diagnostics
Selects performance_analyze_insight to examine the DevTools insight
Uses performance_start_trace and performance_stop_trace to bound the timeline capture
3 fixed12 passed either way4 still failing3 broke
Pass-rate lift
0 pp
Tokens
-24%
Agent turns
0%
Response time
-37%
Model gemini-3.6-flashMeasured 9/2/2026v115 of 22 cases passed with skill · 20 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
We captured a trace for https://dashboard.example.com and identified a specific DevTools performance insight regarding render blocking resources. Which targeted browser analysis function should we use to inspect that specific insight?
What was checked, without and with the skill
Checked
Without skill
With skill
Selects performance_analyze_insight to examine the DevTools insight
Missed
Passed
case-08 · gemini-3.6-flash · 9/2/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md26 linessingle file
Use this skill when performance findings need evidence from Chrome instead of code inspection alone.
Default Flow
Start from the exact URL and device profile that reproduces the problem.
Record a baseline with lighthouse_audit or performance_start_trace and performance_stop_trace.
Drill into the highest-signal issue first, then inspect network, DOM, or scripts only as needed.
After code changes, rerun the same scenario and compare the results.
Tool Selection
lighthouse_audit for quick page-level diagnostics and report output.
performance_start_trace and performance_stop_trace for deeper timing analysis.
performance_analyze_insight to drill into a specific DevTools insight.
emulate to keep device, network, CPU, and viewport conditions consistent.
Working Rules
Keep the scenario deterministic: one URL, one interaction path, one device profile.
Save traces and reports to files when they are large.
Treat LCP, CLS, and INP as user-path problems; connect each finding to the specific element, request, or script that caused it.
Avoid mixing unrelated experiments in one trace.
Expected Output
Return the problem, the evidence, the likely cause, and the concrete code area to change before proposing fixes.
Design a real harness for an agentic system using Claude Code-inspired patterns. Use when the user needs a harness blueprint, request assembly design, execution loop, tool runtime, memory layering, permission model, transcript or recovery strategy, or wants to turn a vague agent idea into a harness-level architecture. Do not use for generic product brainstorming, simple prompt writing, or isolated code generation.