cumulative-layout-shift

Use when auditing slow page loads, heavy assets, or rendering delays related to Minimize cumulative layout shift. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

Quality

82%

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

Quality

Content

87%

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

The body is concise, well-organized, and provides specific actionable CLS guidance with a single well-signaled one-level-deep reference. The only real gap is workflow clarity: the fix workflow lacks an explicit measure→fix→re-measure validation feedback loop.

Suggestions

Add an explicit validation feedback loop to the Fix section: e.g. 'After applying fixes, re-measure CLS in Lighthouse/PageSpeed and confirm the score is below 0.1 before considering the issue resolved.'

Turn the Code Review measurement guidance into a concrete checklist step with the verification command/tool and the pass/fail threshold, so the confirm-the-issue step is an explicit checkpoint rather than a description.

Dimension	Reasoning	Score
Conciseness	The body is lean and well-organized with no padding about concepts Claude already knows; every line (bullets, Check/Fix/Explain/Code Review) earns its place. Not a 2 because there is no unnecessary explanation to trim.	3 / 3
Actionability	Concrete, specific instruction-style guidance ('target score below 0.1', 'Always set width/height on images and embeds', 'Use transform animations instead of layout-changing properties'). Per rubric, absence of code in an instruction-only skill is not penalized when guidance is actionable — and it is specific and actionable, matching the highest anchor.	3 / 3
Workflow Clarity	The Check→Fix→Explain→Code Review sequence exists with a measure/verify step ('Verify score is below 0.1'), but there is no explicit validation feedback loop (measure→fix→re-measure) gating the Fix step, and checkpoints are implicit. Not a 3 because explicit validate/retry checkpoints are missing; not a 1 because the sequence and one verification step are present.	2 / 3
Progressive Disclosure	A clear overview body points to a single, clearly-signaled one-level-deep reference ('see references/rule.md') which exists and is not nested further. For a simple skill under 50 lines this matches the well-organized clear-overview anchor.	3 / 3
	Total	11 / 12 Passed

Description

77%

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 is well-structured with an explicit 'Use when' trigger and concrete diagnostic actions, scoring high on specificity and completeness. Its main weakness is trigger-term coverage — the most natural user phrasing ('layout shift', 'CLS') is not surfaced as a trigger — and mild overlap with general performance skills.

Suggestions

Surface natural trigger terms users actually say — add 'cumulative layout shift (CLS)', 'layout shifts', or 'visual stability' as explicit triggers alongside the existing performance phrases.

Tighten distinctiveness by leading with the CLS-specific symptom ('elements jumping or shifting after load') rather than generic 'slow page loads / heavy assets' to reduce overlap with general performance-audit skills.

Dimension	Reasoning	Score
Specificity	Names the CLS domain and several concrete diagnostic actions ('auditing slow page loads, heavy assets, or rendering delays', 'Verify the actual bottleneck in DevTools, Lighthouse, or field data'), matching the multiple-specific-actions anchor; not a 2 because actions go beyond a single domain+partial-actions statement.	3 / 3
Completeness	Explicitly answers both what ('auditing... rendering delays', 'Verify the actual bottleneck') and when via a clear 'Use when...' clause, matching the what-AND-when anchor.	3 / 3
Trigger Term Quality	Includes some natural user-facing terms ('slow page loads', 'rendering delays', 'Lighthouse') but the core natural phrase 'layout shift' is buried inside 'Minimize cumulative layout shift' and common variations like 'CLS' or 'layout shifts' are not surfaced as triggers. Not a 3 because common variations are missing; not a 1 because several relevant keywords are present.	2 / 3
Distinctiveness Conflict Risk	Scoped to cumulative layout shift with distinct diagnostic triggers, but 'slow page loads, heavy assets, rendering delays' broadly overlaps with general performance-audit skills, so it could still conflict with sibling performance skills. Not a 3 due to this overlap; not a 1 because the CLS focus provides a real niche.	2 / 3
	Total	10 / 12 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/cumulative-layout-shift/SKILL.md
Commit: 48405aa

Reviewed: about 8 hours 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.