largest-contentful-paint

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize largest contentful paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/largest-contentful-paint/SKILL.md

Quality

Content

57%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, appropriately short overview with excellent progressive disclosure to a real, one-level-deep reference file. Its weaknesses are internal duplication between the Quick Reference, Check, Fix, and Explain sections, the absence of any inline executable detail, and a missing re-measure step to close the Check-to-Fix feedback loop.

Suggestions

Consolidate the Quick Reference and Fix sections into one list of optimization levers to remove the near-duplicate bullets (preload, images, CDN, TTFB) and the twice-stated 2.5s target.

Add a final verification step to the workflow (e.g., 'Re-run Lighthouse after applying fixes to confirm LCP is under 2.5s') so the Check-to-Fix loop closes with a validation checkpoint.

Include at least one concrete inline snippet in the Fix section — such as the `<link rel="preload" as="image">` syntax for hero images or a specific Lighthouse CLI command — instead of deferring all executable detail to the reference file.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean, but the Fix section ("preloading critical resources, optimizing images, using CDN, and reducing server response time") nearly duplicates the Quick Reference bullets, the 2.5s target is stated twice, and the Explain section restates the intro, so it could be meaningfully tightened.	3 / 5
Actionability	It provides some concrete guidance by naming specific levers and tools ("Use preload for hero images", "Measure LCP using Lighthouse or PageSpeed Insights", "Reduce server response time (TTFB)"), but the body contains no executable detail — no preload syntax, commands, or image-format specifics — with all code deferred to the reference file.	3 / 5
Workflow Clarity	A Check-then-Fix sequence is present with a problem-detection checkpoint ("Verify the largest visible element renders within 2.5 seconds"), but there is no re-measure or validation step after applying fixes, so the feedback loop for confirming the optimization worked is missing.	3 / 5
Progressive Disclosure	The body is a concise overview that clearly signals a single one-level-deep reference ("For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`"), and that file exists with the detailed content, matching the top anchor for well-signaled navigation.	5 / 5
	Total	14 / 20 Passed

Description

83%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description that explicitly covers both what the skill does (verify-first LCP auditing with named tools) and when to use it (slow page loads, heavy assets, rendering delays). Its main weaknesses are missing common trigger synonyms (LCP, page speed, Core Web Vitals) and slightly awkward phrasing where the title "Optimize largest contentful paint" is embedded mid-sentence.

Dimension	Reasoning	Score
Specificity	The description lists several concrete actions with named tools ("auditing slow page loads, heavy assets, or rendering delays"; "Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes"), but omits fix-side actions like preloading, image optimization, or CDN usage, leaving minor gaps in coverage rather than comprehensive coverage.	4 / 5
Completeness	It explicitly answers both what ("Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes") and when ("Use when auditing slow page loads, heavy assets, or rendering delays") with concrete trigger phrases, matching the top anchor rather than the anchor where 'when' could be more explicit.	5 / 5
Trigger Term Quality	It includes natural phrases users would say ("slow page loads", "heavy assets", "rendering delays", "DevTools, Lighthouse"), giving good keyword coverage, but misses common variations such as the "LCP" acronym, "page speed", and "Core Web Vitals".	4 / 5
Distinctiveness Conflict Risk	"Optimize largest contentful paint" carves out a clear single-metric niche with distinct tooling, but broad trigger phrases like "slow page loads" and "heavy assets" create minor overlap risk with general page-performance skills.	4 / 5
	Total	17 / 20 Passed

Validation

93%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/largest-contentful-paint/SKILL.md
Commit: 7bfd868

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.