CtrlK
BlogDocsLog inGet started
Tessl Logo

import-on-visibility

Use when reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Balance early enough loading for smooth scrolling against keeping the initial route light.

54

Quality

61%

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/import-on-visibility/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%

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-organized and token-efficient with excellent progressive disclosure via a single verified reference, but its in-body guidance stops at naming APIs rather than showing executable code, and the review workflow lacks explicit validation checkpoints. Pulling a minimal code snippet and a verify step into the body would round it out.

Suggestions

Add one small executable Intersection Observer snippet (or a one-line rootMargin starting range) directly in the body so the core action is copy-paste ready without requiring a jump to the reference.

Surface a single explicit validation checkpoint in the Code Review section — e.g. 'Confirm the deferred code is absent from the initial bundle and arrives before the section enters the viewport' — to close the workflow-clarity gap.

Optionally fold the 'Explain' step's framing into the intro so Check/Fix/Code Review read as one continuous review-and-fix loop with a verify step at the end.

DimensionReasoningScore

Conciseness

The body is lean and under 50 lines, assumes Claude's competence, and does not re-explain basics; the Quick Reference bullets and Check/Fix/Explain/Code Review sections each earn their place with no padding.

3 / 3

Actionability

It names concrete APIs ('Intersection Observer', 'rootMargin', 'placeholders or skeletons') but provides no executable code or commands in the body itself — the examples are deferred to references/rule.md — matching 'some concrete guidance but incomplete'.

2 / 3

Workflow Clarity

Check → Fix → Explain → Code Review gives a recognizable sequence, but no validation/verification checkpoints appear in the body (they live only in the reference's Verification section), so checkpoints are implicit rather than explicit.

2 / 3

Progressive Disclosure

The body is a concise overview with a single, clearly signaled one-level-deep pointer ('For full implementation details, code examples, and framework-specific guidance, see references/rule.md'), and that reference file exists, giving easy navigation with no nested hops.

3 / 3

Total

10

/

12

Passed

Description

50%

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 clear trigger clause and a recognizable performance niche, but it describes an abstract trade-off rather than concrete actions and leaves the core mechanism (deferring code until near-viewport) implied. Tightening the 'what' and adding common trigger terms would lift it from a solid mid-score.

Suggestions

State the concrete mechanism up front, e.g. 'Defer importing offscreen components until they approach the viewport using Intersection Observer' — this turns the abstract 'balance' into named actions and lifts specificity and completeness.

Add natural trigger terms users actually say, such as 'lazy loading', 'deferred modules', 'below-the-fold code', or 'import on visibility', to improve trigger-term coverage and distinctiveness.

Sharpen the what/when split: keep the 'Use when...' clause but precede it with a one-line 'what' ('Defers non-critical code so it loads just before it scrolls into view') so both halves are explicit.

DimensionReasoningScore

Specificity

Names the domain ('long pages, dashboards, or content feeds with expensive offscreen modules') but the action is an abstract trade-off ('Balance early enough loading...against keeping the initial route light') rather than a list of concrete named actions, so it falls short of the multi-action score-3 anchor.

2 / 3

Completeness

An explicit 'Use when...' trigger answers the 'when', but the 'what' is only weakly implied — the description never states it defers/imports code on visibility, so it has 'when' with an implied rather than clear 'what'.

2 / 3

Trigger Term Quality

Terms like 'long pages', 'dashboards', 'content feeds', and 'smooth scrolling' are natural, but common variations a user might actually say ('lazy load', 'import on visibility', 'deferred modules') are missing, matching the 'some relevant keywords but missing variations' anchor.

2 / 3

Distinctiveness Conflict Risk

The offscreen-module-loading niche is somewhat specific, but the generic 'keep the initial route light' framing overlaps with broader lazy-loading and performance skills (a lazy-loading rule is itself referenced), so it could still overlap with similar skills.

2 / 3

Total

8

/

12

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.

Validation15 / 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.