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

61%

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/cumulative-layout-shift/SKILL.md

Quality

Content

65%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, token-efficient overview that delegates implementation detail to a real, clearly signaled one-level-deep reference. Its weaknesses are the absence of any executable specifics or concrete values in the body itself and a missing validation loop — nothing instructs re-measuring CLS after fixes to confirm the improvement.

Suggestions

Add a closing verification step to the workflow, e.g. 'After applying fixes, re-run Lighthouse and confirm CLS is below 0.1; if not, use a PerformanceObserver layout-shift entry to identify the remaining shifting elements.'

Make the Fix section slightly more concrete in-body (name 'font-display: swap' and 'aspect-ratio' rather than 'font-display strategies' and 'dimensions'), even while keeping code in the reference.

Drop or fold the 'Explain' section — its content duplicates the intro and instructs Claude to explain a concept it already knows.

Dimension	Reasoning	Score
Conciseness	The body is lean with tight sections (Quick Reference, Check, Fix, Explain, Code Review) and no tutorial-style padding. It loses a point because the 'Explain' section re-states the intro's content ('accidental clicks, reading disruption, and user frustration') and directs Claude to explain a concept it already knows, which could be trimmed.	4 / 5
Actionability	The Fix section names concrete strategies ('Reserve space for images/embeds with dimensions, use font-display strategies, and avoid injecting content above existing content') and Check names real tools (Lighthouse, PageSpeed Insights), but the body contains no commands, code, or specific values — 'use font-display strategies' leaves which strategy unspecified, and all executable detail is delegated to the reference. This matches the some-concrete-guidance-but-incomplete anchor.	3 / 5
Workflow Clarity	A rough sequence is present (Check → Fix → Explain → Code Review), but there is no validation checkpoint closing the loop — nothing says to re-measure CLS after applying fixes to confirm the score dropped below 0.1, and no guidance on interpreting the measurement before choosing a fix. The verification loop is only implicit, matching the steps-listed-but-checkpoints-missing anchor.	3 / 5
Progressive Disclosure	The body is under 50 lines, clearly sectioned, and appropriately splits content: it keeps a concise overview inline and delegates all code examples and framework-specific guidance to references/rule.md (verified as a real file) with a clear, well-signaled, one-level-deep pointer ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'). Navigation is easy and the split is clean.	5 / 5
	Total	15 / 20 Passed

Description

57%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 an explicit and reasonably natural 'Use when...' trigger clause and one concrete verification action with named tools, but it garbles the 'what' by embedding the skill title mid-sentence ('related to Minimize cumulative layout shift') and never states the skill's actual capabilities. Its broad performance triggers also create real overlap risk with other performance-audit skills.

Suggestions

Rewrite the 'what' as a leading capability statement in third person, e.g. 'Audits and fixes cumulative layout shift (CLS): measuring visual stability, reserving space for images/ads/embeds, and applying font-loading and animation strategies that avoid shifts.'

Replace the awkward 'related to Minimize cumulative layout shift' title embedding with natural trigger terms like 'layout jumping', 'page elements moving during load', or 'CLS score'.

Sharpen trigger terms away from generic performance complaints ('slow page loads', 'heavy assets') toward stability-specific ones so sibling performance skills (LCP, page weight) don't mis-trigger.

Dimension	Reasoning	Score
Specificity	The description names the domain (cumulative layout shift) and one or two concrete actions ('Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes'), but coverage is not comprehensive and the awkward embedded phrase 'related to Minimize cumulative layout shift' obscures what the skill actually does. It does not list the several specific actions needed for the level-4 anchor.	3 / 5
Completeness	The 'when' is explicitly and specifically answered ('Use when auditing slow page loads, heavy assets, or rendering delays...'), but the 'what' is only weakly implied: the description never clearly states what the skill does — measure, fix, or audit layout shift — and the garbled 'related to Minimize cumulative layout shift' phrase fails to convey the skill's actions. This sits between the weak-'what' anchor and the both-present anchor, closer to the former.	3 / 5
Trigger Term Quality	'slow page loads', 'heavy assets', 'rendering delays', 'DevTools', and 'Lighthouse' are natural phrases users would say when needing this skill. However, common synonyms for the core problem — 'layout jumping', 'page jumping', 'elements moving', 'CLS' — are missing, so it falls short of comprehensive coverage.	4 / 5
Distinctiveness Conflict Risk	The trigger phrases 'slow page loads, heavy assets, or rendering delays' are broad performance complaints that overlap significantly with sibling performance skills (LCP, page weight, lazy loading, image optimization), so the wrong skill could easily trigger. The CLS tie is present but only via the awkward embedded title phrase, so it is somewhat specific but still has real overlap risk.	3 / 5
	Total	13 / 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/cumulative-layout-shift/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.