first-contentful-paint

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

Quality

66%

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/first-contentful-paint/SKILL.md

Quality

Content

63%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 well-structured with an appropriate split between overview and the detailed reference file, and its Check/Fix flow carries an explicit threshold checkpoint. Its weaknesses are padding that re-explains FCP—a concept Claude already knows—and a lack of any executable command or snippet in the body itself, plus no post-fix re-measurement step.

Suggestions

Delete the introductory 'why FCP matters' paragraph and the 'Explain' section; Claude already knows what FCP is, and the same information appears in references/rule.md.

Add a re-measurement verification step after Fix (e.g., 'Re-run Lighthouse and confirm FCP is under 1.8s before considering the fix complete') to close the feedback loop.

Include one small executable element in the body—e.g., the lighthouse CLI command or a two-line preconnect/inline-CSS snippet—so the Fix section is actionable without opening the reference.

Dimension	Reasoning	Score
Conciseness	The opening paragraph ('FCP is the first visual signal that a page is loading—fast FCP reassures users... reducing perceived wait time and bounce rates') and the 'Explain' section re-teach what FCP is—a concept Claude already knows—and the Quick Reference bullets duplicate Check/Fix content. Mostly efficient, but several lines could be cut.	3 / 5
Actionability	Concrete specifics exist—named tools ('Lighthouse or PageSpeed Insights'), a hard threshold ('within 1.8 seconds'), and named techniques ('inlining critical CSS', 'preconnect')—but the body contains no executable commands or code; the how-to is entirely delegated to references/rule.md. This is some concrete guidance with key execution details missing.	3 / 5
Workflow Clarity	A clear Check → Fix sequence exists with an explicit checkpoint ('Verify first content appears within 1.8 seconds'), and this is not a destructive/batch operation so no cap applies. The main gap is the absence of a re-measure/verification step after fixes are applied.	4 / 5
Progressive Disclosure	A short (~30 line) well-sectioned overview body points via one clearly signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md') to a verified real file that holds the bulk detail with no nested references. Content is appropriately split and easy to navigate.	5 / 5
	Total	15 / 20 Passed

Description

70%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.

The description has strong, explicit trigger guidance and a concrete verification directive, but its statement of what the skill actually does is muddied by a title spliced mid-sentence, and it lacks common synonyms like 'FCP' or 'Core Web Vitals'. It is a solid trigger description with room to sharpen the capability statement.

Suggestions

Rewrite the capability statement as a clean third-person action, e.g., 'Audits and optimizes first contentful paint (FCP): verifies the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.'

Add common trigger synonyms such as 'FCP', 'page speed', or 'Core Web Vitals' so users who use those terms naturally match this skill.

Briefly enumerate the main capabilities (e.g., measuring FCP against the 1.8s threshold, eliminating render-blocking resources, inlining critical CSS) to lift specificity.

Dimension	Reasoning	Score
Specificity	The description names the domain (first contentful paint) and 1-2 concrete actions ('auditing slow page loads, heavy assets, or rendering delays' and 'Verify the actual bottleneck in DevTools, Lighthouse, or field data'), but coverage is not comprehensive and the phrase 'related to Optimize first contentful paint' awkwardly splices the skill title into the sentence rather than stating a concrete capability.	3 / 5
Completeness	The 'when' is explicit with concrete triggers ('Use when auditing slow page loads, heavy assets, or rendering delays') and a 'what' is present ('Verify the actual bottleneck... before recommending changes'), but the skill's core purpose of optimizing FCP is only weakly embedded in the awkward title-splice, so the 'what' is not cleanly stated.	4 / 5
Trigger Term Quality	Natural user phrases like 'slow page loads', 'heavy assets', 'rendering delays', and 'first contentful paint' are present alongside tool names (DevTools, Lighthouse), but common synonyms such as 'FCP', 'page speed', and 'Core Web Vitals' are missing.	4 / 5
Distinctiveness Conflict Risk	FCP auditing is a clear niche, but the trigger terms 'slow page loads' and 'heavy assets' overlap with closely related web-performance skills (e.g., LCP or general page-speed audits), creating minor conflict risk.	4 / 5
	Total	15 / 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/first-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.