CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

68

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

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

A well-structured review skill body: crisp imperative checklists, a clean Check/Fix/Explain workflow, and proper progressive disclosure to a real, one-level-deep reference. The main improvements are trimming the motivational intro and duplicated caveats, and surfacing one inline markup example so the body alone demonstrates the corrected HTML.

Suggestions

Trim the intro paragraph's benefit explanation (megabytes/LCP/bandwidth rationale) and state the LCP caveat and fold-position guardrail once instead of repeating each across Quick Reference, Check/Fix, and Explain — Claude already understands why lazy loading matters.

Add one short inline example of a correctly lazy-loaded <img> (loading="lazy" with width/height, and the LCP image with fetchpriority="high") so the body is self-sufficient for the common cases, keeping extended examples in references/rule.md.

Close the workflow with an explicit verification step (e.g., re-scan modified files to confirm attributes changed and no above-fold image kept loading="lazy") instead of only mentioning DevTools confirmation in passing.

DimensionReasoningScore

Conciseness

The body is mostly tight imperatives (Quick Reference bullets, numbered Check/Fix steps), but the intro paragraph explains benefits Claude already knows ('A page with 20 images below the fold may transfer several megabytes... improves LCP... saves bandwidth'), the Explain section restates how native lazy loading works including a duplicated browser-support claim, and the LCP caveat and fold-position guardrail each appear 3-4 times. This is 'efficient with minor instances of over-explanation that could be trimmed' (score 4) rather than the every-token-earns-its-place profile of score 5.

4 / 5

Actionability

Guidance is concrete and executable: exact attribute values (`loading="lazy"`, `fetchpriority="high"`), explicit width/height pairing to prevent CLS, removal rules for hero/logo images, and 'Show the corrected HTML for each modified image'. It stops short of score 5 because no markup example appears inline — the copy-paste-ready code lives only in references/rule.md, leaving a minor gap in the body itself.

4 / 5

Workflow Clarity

A clear Check -> Fix -> Explain -> Code Review sequence with a three-way classification (missing lazy below the fold, lazy on above-fold images, eager below the fold) and separate reporting per category. It fits 'clear sequence with most checkpoints present; minor validation gaps' (score 4): DevTools confirmation of the fix is mentioned but there is no explicit verify/feedback step in the workflow. The destructive/batch validation cap does not apply since this is a read-and-report review skill.

4 / 5

Progressive Disclosure

The body is short and well-sectioned (Quick Reference, Check, Fix, Explain, Code Review) and ends with a clearly signaled one-level-deep pointer — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — to a real, well-organized reference file (verified: no nested references inside it). This matches the score-5 anchor for clear overview plus well-signaled references.

5 / 5

Total

17

/

20

Passed

Description

88%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: it states concrete, multi-part checks, an explicit 'Use when' trigger tied to the rule, and even a guardrail against invalid findings. Its only weaknesses are a few missing natural trigger synonyms and slight overlap with sibling image-optimization skills on size-checking language.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions ('reviewing image assets, markup, and CDN or build transforms', 'Check encoded size, rendered size, loading strategy, and above-the-fold impact together') plus a finding-validity condition ('Missing loading='lazy' is only a valid finding when you can reasonably tell the image is offscreen or non-critical'). Coverage is comprehensive for the rule's scope, matching the score-5 anchor rather than the 'minor gaps' of score 4.

5 / 5

Completeness

It explicitly answers 'what' (check encoded size, rendered size, loading strategy, and above-the-fold impact together) and 'when' ('Use when reviewing image assets, markup, and CDN or build transforms related to Lazy load offscreen images'), mirroring the score-5 anchor's 'concrete what + explicit Use-when trigger' pattern. Not score 4, because the when-clause is explicit and rule-specific rather than merely present.

5 / 5

Trigger Term Quality

Natural terms like 'lazy', 'offscreen', 'above-the-fold', 'loading strategy', and the literal `loading='lazy'` attribute are present and would be said by users reviewing front-end performance. Common variations such as 'below the fold', 'LCP', 'hero image', and 'page speed' are missing, so it fits 'good keyword coverage; a few natural terms missing' rather than the comprehensive synonym coverage of score 5.

4 / 5

Distinctiveness Conflict Risk

The loading-strategy focus (lazy loading, fold position, fetchpriority) is a clear niche with distinct triggers. However, 'Check encoded size, rendered size' overlaps with sibling image-optimization skills/rules, which is minor overlap risk with closely related skills — the score-4 anchor — rather than the minimal-conflict profile of score 5.

4 / 5

Total

18

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
Reviewed

Table of Contents

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.