CtrlK
BlogDocsLog inGet started
Tessl Logo

lazy-loading

Use when auditing slow page loads, heavy assets, or rendering delays related to Implement lazy loading for offscreen content. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes. Absence of `loading='lazy'` is not enough by itself when fold position is unknown.

56

Quality

64%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/lazy-loading/SKILL.md
SKILL.md
Quality
Evals
Security

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 good progressive disclosure and sensible audit-workflow checkpoints, but it is held back by conceptual padding in the intro and 'Explain' sections and a vague 'Fix' section that defers all concrete implementation detail without summarizing the key technique.

Suggestions

Cut the conceptual intro sentence and the 'Explain' section — both restate knowledge Claude already has and duplicate each other.

Make 'Fix' concrete: inline a minimal loading="lazy" example or name the exact technique per media type (native attribute for images/iframes, Intersection Observer with rootMargin for sections).

Add a post-fix verification step in the body pointing at the reference's Verification guidance (PageSpeed Insights or a throttled waterfall trace) so the workflow closes the loop.

DimensionReasoningScore

Conciseness

The intro sentence ('Lazy loading defers non-critical resources until needed—this reduces initial page weight, speeds up first paint...') and the 'Explain' section both restate basic lazy-loading concepts Claude already knows and duplicate each other. Otherwise the body is lean, so this is unnecessary explanation that could be tightened rather than severe padding.

3 / 5

Actionability

'Check' gives concrete directives ('Verify that images and other heavy resources below the fold are lazy loaded. Only report this when the code or route context makes offscreen placement clear'), but 'Fix' is a high-level hint ('using native loading='lazy' or JavaScript solutions') with no code or named technique, and 'describe the measurement method used to confirm the issue' leaves the method unspecified.

3 / 5

Workflow Clarity

A clear Check → Fix → Explain → Code Review sequence is present with real checkpoints ('If fold position is unclear from the snippet, do not invent a lazy-loading defect'; 'Only report this when the code or route context makes offscreen placement clear'). The minor gap is that post-fix verification (PageSpeed/throttled trace) lives only in the reference file and is not surfaced as a step in the body.

4 / 5

Progressive Disclosure

The body is a concise, well-sectioned ~35-line overview that appropriately defers code examples and framework-specific guidance to a clearly signaled, one-level-deep reference ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), which exists in the bundle.

5 / 5

Total

15

/

20

Passed

Description

66%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 a solid explicit 'Use when' trigger and useful audit-context keywords, but the capability statement is grammatically fused into the trigger clause (an apparent template substitution artifact), leaving the 'what' muddled and the actions under-specified. Broad performance triggers also create overlap risk with sibling performance skills.

Suggestions

Restructure so the capability leads as a third-person statement — e.g., 'Implements lazy loading for offscreen images, videos, and iframes to reduce initial page weight. Use when auditing slow page loads...' — instead of embedding 'Implement lazy loading for offscreen content' inside the 'when' clause.

List the concrete implementation actions (native loading='lazy', Intersection Observer for section-level deferral) to raise specificity beyond the two audit actions currently named.

Add lazy-loading-specific trigger terms such as 'below the fold', 'LCP image', and 'defer offscreen media' to narrow the triggers and reduce conflict with general performance skills.

DimensionReasoningScore

Specificity

Two concrete actions are named ('Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes'; 'auditing slow page loads, heavy assets, or rendering delays'), but the core capability — implementing lazy loading — never appears as its own action statement, only embedded inside the trigger clause. Not 4 because the 'what' actions are not comprehensively listed.

3 / 5

Completeness

Both elements are present: an explicit 'Use when auditing slow page loads, heavy assets, or rendering delays...' trigger and the capability phrase 'Implement lazy loading for offscreen content'. Not 5 because the 'what' is awkwardly embedded inside the 'when' clause ('...rendering delays related to Implement lazy loading for offscreen content') rather than stated as a clear capability sentence.

4 / 5

Trigger Term Quality

Good natural keyword coverage: 'slow page loads', 'heavy assets', 'rendering delays', 'lazy loading', and 'loading='lazy'' are phrases users would actually say. A few natural terms are missing (e.g., 'below the fold', 'LCP', 'page performance'), so it falls short of the comprehensive-synonym anchor 5.

4 / 5

Distinctiveness Conflict Risk

The lazy-loading niche is identifiable, but the leading triggers ('slow page loads', 'heavy assets', 'rendering delays') are broad performance complaints that would also fire for image-optimization, bundling, and code-splitting skills. Somewhat specific, but overlap with closely related performance skills remains.

3 / 5

Total

14

/

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.