Skip to content
Get packs

Import on Visibility

Review pages to lazy-load offscreen code with Intersection Observer without layout shift

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews web pages for heavy code (charts, reviews, embeds, recommendation widgets) that loads up front even though users may never scroll to it. It suggests deferring that code until the section nears the screen, using Intersection Observer, with placeholders so the layout does not jump. It also explains how this differs from loading on interaction and how to tune the early-loading margin.

Great for

  • Front-end developers reviewing long landing pages, dashboards, or content feeds
  • Teams trying to reduce initial JavaScript size and improve page load speed

Skip it if

  • Small, simple pages where all code is needed immediately; deferring code adds complexity for little gain
  • Projects not using web front-end code, since the guidance is specific to browser viewport loading

Try asking

  • “Review this product page and flag components that load eagerly but appear only after scrolling”
  • “Add visibility-based loading to the reviews and related products sections of my React page”
  • “Explain the difference between import-on-visibility and import-on-interaction for my dashboard”
Step-by-step guide: how to use Import on VisibilityInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    import-on-visibility.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip import-on-visibility.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip import-on-visibility.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a specific page or component so it can check real imports rather than general patterns.
  • Ask for placeholder or skeleton markup alongside the change to keep layout stable.
  • Check the referenced rule page for framework-specific examples if you use React, Vue, or similar.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.