Guide · Agent skill
How to use the Import on Visibility agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The import-on-visibility skill is a set of instructions that teaches an AI agent to review web pages for heavy code that loads up front even though users may never scroll to it. It suggests loading that code only when its section approaches the screen, using Intersection Observer, with placeholders so the layout does not jump. This guide explains what the skill does, how to install it, how to ask for it, and when it is not worth using.
Import on Visibilitythedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the import-on-visibility skill ZIP from the page where you found this guide.
- 2Choose an install location. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder to limit it to that project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Ask for a review in plain language. Describe the long page, dashboard, or feed you want checked for offscreen code that loads too early.
- 5Review the suggestions. Look at which modules the agent flags and the placeholder and rootMargin advice it gives.
- 6Verify the result. Confirm that deferred sections still load before the user scrolls to them and that the layout does not jump.
What the skill makes the agent do
When the skill is installed, the agent reviews pages for code that is loaded on first render but only appears after the user scrolls. Typical examples are charts, reviews, embeds, recommendation widgets, related products, and offscreen dashboard panels.
For each candidate, the agent suggests switching to visibility-based loading. It also explains how this differs from import-on-interaction, which waits for a user action such as a click, and how to tune the early-loading margin so content is ready when the user arrives.
- Finds components that load eagerly but stay offscreen for a long time
- Suggests Intersection Observer, or an equivalent framework primitive, to start loading before the section is visible
- Recommends placeholders or skeletons to prevent layout shift
- Explains tuning of rootMargin so heavy content loads early without competing with above-the-fold work
Install the import-on-visibility skill
Download the ZIP for the skill from the page where you found this guide. Then choose one of the two install locations below.
For a personal setup available across your projects, unzip the download into ~/.claude/skills/. To limit the skill to one project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, open Settings, go to Capabilities, then Skills, and upload the ZIP there.
- Personal: ~/.claude/skills/
- Single project: the .claude/skills/ folder inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
You do not need a special command. The skill's description tells the agent when to use it: reviewing long pages, dashboards, or content feeds with expensive offscreen modules. Ask for that kind of review in plain language and mention the page or code you want checked.
Be specific about the page and the goal. Naming the sections or the files helps the agent focus on the offscreen code that matters.
- Review this long landing page for code that loads before the user scrolls to it.
- Check our dashboard for offscreen charts we could defer until they are near the viewport.
- Look at the reviews and recommendations components and suggest visibility-based loading with placeholders.
- Explain how import-on-visibility differs from import-on-interaction for our product page.
What the skill covers in a review
The skill's guidance follows a simple sequence: check which modules load on first render but appear later, flag the ones that can switch to visibility-based loading, fix them with a placeholder that keeps the layout stable, and verify that the deferred version still loads before the user reaches it.
For full implementation details, the skill includes a reference page with framework-specific guidance and code examples. The example code in that reference uses an Intersection Observer on a mount point such as #reviews and loads the module once when it intersects.
- Check: identify modules that load eagerly but show only after scrolling
- Fix: load the component when it nears the viewport, with a stable placeholder
- Explain: compare with import-on-interaction and describe the benefit for large pages
- Code review: confirm the deferred version loads before the user reaches it
Safety notes before you run it
The skill does not run scripts and does not use the network, according to its listing. It requires nothing beyond the skill itself. It consists of a SKILL.md file and a references/rule.md file.
Because the skill only shapes what the agent looks for and suggests, you still review any code changes it proposes before you ship them. Check that deferred sections still load in your target browsers and that placeholders match the final content size.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
- Files: SKILL.md and references/rule.md
Tips for getting useful results
Use the skill on pages where offscreen content is actually heavy. The skill is most useful for long landing pages, dashboards, and content feeds. Small pages where all code is needed immediately gain little from it.
Measure before and after. The skill's advice is about initial JavaScript size and load speed, so compare those numbers on your own page rather than assuming a gain.
- Start with the largest offscreen modules, such as charts and embeds
- Keep placeholders the same height as the real content to avoid layout shift
- Tune rootMargin so content loads early enough for smooth scrolling
- Do not defer code the user needs immediately on first render
What people use it for
- Reviewing a long landing page to find reviews, embeds, or recommendation widgets that load before anyone scrolls to them.
- Checking an analytics dashboard for offscreen charts that could load when their panel nears the screen.
- Deciding between import-on-visibility and import-on-interaction for a product page.
- Tuning the early-loading margin on a content feed so items load ahead of the scroll without slowing the first view.
Frequently asked questions
How do I install the import-on-visibility skill?
Download the skill's ZIP from the page where you found this guide. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload the ZIP under Settings, Capabilities, Skills.
What do I need to run import-on-visibility?
The listing says it requires nothing beyond the skill itself. It does not run scripts and does not use the network. It is guidance for an agent reviewing front-end code.
Is import-on-visibility free?
The skill is released under the MIT licence, as listed for the source repository. This guide does not state any price, so check the source page for current terms.
What is the difference between import-on-visibility and import-on-interaction?
Import-on-visibility starts loading code when a section approaches the viewport. Import-on-interaction waits for a user action, such as a click, before loading. The skill explains both so you can pick the right one for each section.
When should I not use this skill?
Skip it for small, simple pages where all code is needed immediately. Deferring code adds complexity for little gain there. It is also not suited to projects without web front-end code, since the guidance is about browser viewport loading.
Why doesn't the skill work or trigger for my request?
Make sure the skill is in the correct folder or uploaded under Settings, Capabilities, Skills. Ask about a long page, dashboard, or content feed with offscreen modules, since that is the situation its description targets.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer working on long landing pages, dashboards, or content feeds and want to cut initial JavaScript without making later sections feel unfinished. Pick something else for small, simple pages where everything is needed on first load, or for projects that do not involve browser front-end code.
Download the skill