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, waterfall analysis) rather than the general 'debugging and optimizing' framing.
Suggestions
Replace 'Guides debugging and optimizing' with more specific actions like 'Identifies LCP elements, analyzes render-blocking resources, diagnoses slow server response times, 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 with a clear debugging workflow and explicit verification steps. Its main weakness is moderate verbosity in the introductory sections explaining LCP concepts Claude likely already knows, and the optimization strategies section could potentially be offloaded to a reference file. The tool-specific guidance with exact parameters and the sequential workflow with validation are strong points.
Suggestions
Trim or remove the 'What is LCP and why it matters' section — Claude knows what LCP is; keep only the threshold numbers as a quick reference table.
Move the detailed 'Optimization Strategies' section to a separate reference file (e.g., references/lcp-optimizations.md) and link to it, keeping only a brief summary inline.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill includes some unnecessary explanatory content Claude already knows (e.g., 'What is LCP and why it matters' section explaining basic concepts, the statistic about 73% of mobile pages). The subparts table and optimization strategies are valuable, but the introductory material and some elaboration ('Common Pitfall' note, repeated target percentages) add tokens without proportional value. | 2 / 3 |
Actionability | The skill provides specific, concrete tool calls (navigate_page, performance_start_trace with exact parameters like 'reload: true' and 'autoStop: true', list_network_requests with specific resourceTypes filters). Each debugging step names exact tools and parameters, and optimization strategies give specific HTML attributes and techniques to apply. | 3 / 3 |
Workflow Clarity | The debugging workflow is clearly sequenced with 5 numbered steps that build on each other, and the verification section explicitly creates a feedback loop (re-run trace, compare subpart breakdown). The workflow includes validation checkpoints (Step 4's 'Key Checks') and a clear verify-after-fix step with emulation testing. | 3 / 3 |
Progressive Disclosure | The skill references 'references/lcp-snippets.md' for code snippets (good separation), but no bundle files were provided to verify these exist. The main content is fairly long with the optimization strategies section that could potentially be split out. The structure is reasonable with clear sections, but the inline optimization guide makes the file lengthy. | 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
faac61d
- 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.