debug-optimize-lcp
Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions "largest contentful paint", "page load speed", "CWV", or wants to improve how fast their hero image or main content renders.
86
83%
Does it follow best practices?
Impact
86%
1.75xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Quality
Discovery
89%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong skill description with excellent trigger term coverage and completeness, clearly specifying both what the skill does and when to use it. The main weakness is that the capability description could be more specific about the concrete actions performed (e.g., identifying LCP elements, analyzing render-blocking resources, checking server response times) rather than the general 'debugging and optimizing' framing.
Suggestions
Replace 'Guides debugging and optimizing' with specific concrete actions like 'Identifies LCP elements, analyzes render-blocking resources, diagnoses server response delays, and recommends optimizations for Largest Contentful Paint'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description names the domain (LCP debugging/optimization) and mentions using Chrome DevTools MCP tools, but the concrete actions are somewhat vague — 'debugging and optimizing' rather than listing specific actions like 'identify LCP element, analyze render-blocking resources, measure time-to-render'. | 2 / 3 |
Completeness | Clearly answers both 'what' (guides debugging and optimizing LCP using Chrome DevTools MCP tools) and 'when' (explicit 'Use this skill whenever...' clause with multiple trigger scenarios and terms). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms: 'LCP', 'largest contentful paint', 'slow page loads', 'Core Web Vitals', 'CWV', 'page load speed', 'hero image', 'main content renders'. These are terms users would naturally use when seeking help with this topic. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive — focuses specifically on LCP performance within Core Web Vitals using Chrome DevTools MCP tools. The niche is narrow enough (LCP specifically, not general web performance) that it's unlikely to conflict with other skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, highly actionable skill that provides a clear debugging workflow with specific DevTools MCP tool calls and parameters. Its main weakness is some verbosity in the introductory sections explaining LCP concepts that Claude already knows, and the overall length could benefit from splitting optimization details into a reference file. The workflow clarity is excellent with proper sequencing, validation checkpoints, and a verification feedback loop.
Suggestions
Remove or drastically shorten the 'What is LCP and why it matters' section — Claude already knows what LCP is. Keep only the threshold values (2.5s/4.0s) as a quick reference.
Consider moving the detailed 'Optimization Strategies' section to a separate reference file (e.g., references/lcp-optimizations.md) and summarizing with one-line pointers in the main skill.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill includes some unnecessary explanatory content that Claude already knows (e.g., 'What is LCP and why it matters' section explaining what LCP is, the statistic about 73% of mobile pages). The subparts table and optimization strategies are valuable, but the introductory framing adds tokens without adding actionable value. The 'Common Pitfall' callout is useful but slightly verbose. | 2 / 3 |
Actionability | The skill provides specific, concrete tool calls (navigate_page, performance_start_trace with exact parameters like 'reload: true' and 'autoStop: true', performance_analyze_insight, evaluate_script, list_network_requests with specific resourceTypes filters). Each step names exact tools, parameters, and what to look for in the output. The optimization strategies give specific HTML fixes (fetchpriority='high', preload links, etc.). | 3 / 3 |
Workflow Clarity | The debugging workflow is clearly sequenced with 5 numbered steps that build on each other. The verification section explicitly creates a feedback loop (re-run trace, compare subpart breakdown). Key checks are called out at each step, and the workflow moves logically from recording → analyzing → identifying → checking network → inspecting HTML → optimizing → verifying. | 3 / 3 |
Progressive Disclosure | The skill references 'references/lcp-snippets.md' for code snippets (Steps 3 and 5), which is good progressive disclosure. However, no bundle files were provided, so we can't verify the reference exists. The main content is fairly long and the optimization strategies section could potentially be split into a reference file. The structure is reasonable but the skill is on the longer side for a single file. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- ChromeDevTools/chrome-devtools-mcp
- Commit
2e039c0
- Reviewed
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.