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.

62

Quality

74%

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

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.

The content is a tight, well-structured overview with concrete, actionable guidance and an exemplary one-level-deep pointer to references/rule.md for implementation detail. Its only weaknesses are minor redundancy between the Check and Code Review sections and the absence of an explicit validate/re-check feedback loop.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence — it names Intersection Observer and 'rootMargin' directly with no tutorial padding, and every section carries information. The only trimming opportunity is the overlap between the Check section ('Flag which ones can switch to visibility-based loading') and the Code Review section ('Flag code that is bundled eagerly even though the corresponding UI stays offscreen'), which restates the same detection guidance. This minor redundancy keeps it at 4 rather than 5.

4 / 5

Actionability

Guidance is concrete and specific: 'Use Intersection Observer... to start loading code before an offscreen section becomes visible', 'Reserve space with placeholders or skeletons', 'Tune rootMargin so heavy content loads early enough', plus a verification cue ('verify the deferred version still loads before the user reaches it'). As an instruction-only skill the absence of inline code is acceptable, but copy-ready specifics (API patterns, framework primitives) live in the reference rather than the body, so it stops short of anchor 5.

4 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review structure gives a clear, coherent sequence for a review/fix skill, and a verification point exists ('verify the deferred version still loads before the user reaches it'). However, there is no explicit feedback loop (re-check after applying the fix) and no validation steps, which are minor gaps for this non-destructive context — matching anchor 4 rather than 5.

4 / 5

Progressive Disclosure

The body is a short, well-sectioned overview (Quick Reference, Check, Fix, Explain, Code Review) that keeps implementation details, code examples, and framework-specific guidance in a single clearly-signaled one-level-deep reference: 'see references/rule.md', and the file references/rule.md exists in the bundle and covers exactly that content. This matches the 5 anchor: clear overview, well-signaled one-level reference, easy navigation.

5 / 5

Total

17

/

20

Passed

Description

70%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, well-scoped trigger clause and a distinct niche, but the capability statement is a goal ('balance loading against route weight') rather than concrete actions, and it omits the most natural trigger synonym ('lazy loading'). It is solid but not exemplary.

Suggestions

Replace or supplement the abstract 'Balance early enough loading... against keeping the initial route light' with 1-2 concrete capabilities, e.g. 'Identify eagerly bundled offscreen modules and defer them until they approach the viewport'.

Add the natural synonyms users actually say, especially 'lazy loading' (and optionally 'below the fold' or 'bundle size'), to the trigger clause.

Consider naming the core mechanism (Intersection Observer / visibility-based import) in the description to sharpen the 'what'.

DimensionReasoningScore

Specificity

The description names the domain well ('long pages, dashboards, or content feeds with expensive offscreen modules') but its only stated action — 'Balance early enough loading for smooth scrolling against keeping the initial route light' — is a goal/tradeoff statement rather than a concrete capability like identifying offscreen modules or configuring deferred imports. It sits between the domain-only anchor (2) and the several-concrete-actions anchor (4), so 3 is the best fit.

3 / 5

Completeness

Both parts are present: an explicit 'Use when reviewing long pages, dashboards, or content feeds...' trigger clause and a what-statement ('Balance early enough loading... against keeping the initial route light'). The 'what' is goal-stated rather than enumerating concrete operations, so it does not fully reach anchor 5's level of explicit what-plus-when pairing.

4 / 5

Trigger Term Quality

It includes several natural user phrases — 'long pages', 'dashboards', 'content feeds', 'smooth scrolling', 'initial route' — giving good keyword coverage, but misses the most common phrasing users would say, 'lazy loading' (and 'bundle size'). Good coverage with a few natural terms missing matches anchor 4, not comprehensive enough for 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche — visibility-based loading of offscreen modules on long scrolling pages — with distinct triggers that are unlikely to fire for unrelated skills. Minor overlap risk with general performance or lazy-loading skills keeps it at 4 rather than 5.

4 / 5

Total

15

/

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.