offscreen-lazy

Use when reviewing image assets, markup, and CDN or build transforms related to Lazy load offscreen images. Check encoded size, rendered size, loading strategy, and above-the-fold impact together. Missing `loading='lazy'` is only a valid finding when you can reasonably tell the image is offscreen or non-critical.

Quality

81%

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

71%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 clean progressive disclosure to a real reference file and mostly actionable guidance. The main weakness is conciseness: rationale and mechanism explanation are repeated/over-explained across sections.

Suggestions

Remove the duplicate '20 images / megabytes / TTI / metered mobile' rationale — keep it in one place (intro or Explain, not both).

Trim the Explain section's description of how native lazy loading works (the ~1250px distance threshold) since Claude already knows this; keep only the LCP caveat that is skill-specific.

Add one small inline before/after <img> snippet in the Fix section so the body is self-contained without forcing a jump to rule.md for the common case.

Dimension	Reasoning	Score
Conciseness	Mostly efficient, but the '20 images / megabytes / TTI / metered mobile' rationale is restated in both the intro and the Explain section, and Explain re-describes the native lazy-loading mechanism (e.g. the ~1250px threshold) that Claude already knows.	3 / 5
Actionability	Concrete attribute-level guidance (loading="lazy", fetchpriority="high", pair width/height, remove lazy from LCP) with clear conditions; minor gap is that no inline code example appears in the body itself, only in the referenced rule.md.	4 / 5
Workflow Clarity	Check/Fix/Explain/Code Review sections give a clear sequenced flow, and Code Review asks to 'describe how to confirm the fix in DevTools'; not a destructive/batch operation so the cap does not apply, though an explicit validate-then-retry loop is only lightly present.	4 / 5
Progressive Disclosure	Body is a well-organized overview with section headers and a single, clearly signaled one-level-deep reference to references/rule.md (verified to exist), matching the top anchor for clear overview with well-signaled references.	5 / 5
	Total	16 / 20 Passed

Description

92%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 is specific, trigger-rich, and answers both what and when explicitly. Minor trigger-synonym gaps keep it just below a perfect trigger-term score, but it is otherwise exemplary.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete reviewing actions — 'reviewing image assets, markup, and CDN or build transforms' and 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together' — giving comprehensive coverage of what the skill examines.	5 / 5
Completeness	Explicitly answers both: 'what' (review/check these image-related aspects) and 'when' via the 'Use when reviewing...' trigger clause, matching the top anchor's 'what AND when with concrete trigger phrases'.	5 / 5
Trigger Term Quality	Strong natural terms users would say ('image assets', 'markup', 'CDN', 'build transforms', 'Lazy load offscreen images', "loading='lazy'", 'above-the-fold'), but a few common variations/synonyms are not exhaustively covered.	4 / 5
Distinctiveness Conflict Risk	Clearly scoped to a single frontendchecklist rule (offscreen lazy loading) with niche-specific triggers, so it is clearly distinguishable and minimal conflict risk.	5 / 5
	Total	19 / 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/offscreen-lazy/SKILL.md
Commit: 30756a7

Reviewed: 26 days 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.