Skip to content
Get packs

Import on Interaction

Reviews and fixes slow page loads by deferring non-essential JavaScript until users interact with it.

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 code for heavy features (chat widgets, editors, maps, export tools, third-party scripts) that load on the first page view even though users only need them after clicking or focusing something. It then suggests or makes changes so that code loads on demand using dynamic import(), with immediate loading feedback, while keeping the first screen working. The skill is a written checklist and guidance; it does not itself run code.

Great for

  • Front-end developers whose web pages load slowly because of large JavaScript bundles
  • Teams auditing performance before a release
  • Developers who want a checklist-driven review of lazy-loading opportunities

Skip it if

  • Simple static sites or pages with little JavaScript, where the benefit is negligible
  • Code that is needed immediately for first paint or core tasks, since deferring it can break the initial experience
  • Non-developers looking for a finished performance tool; it gives guidance rather than measurements

Try asking

  • “Review this React route and tell me which components could be loaded on click instead of at startup.”
  • “Find heavy third-party widgets on this page that load before the user needs them and suggest dynamic imports.”
  • “Refactor the export modal in this app so its code only loads when the user clicks Export, and show a spinner while it loads.”
Step-by-step guide: how to use Import on InteractionInstall, 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-interaction.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip import-on-interaction.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

  • Name the specific page or component you want reviewed so the agent can focus on real bundle contributors.
  • Measure before and after with browser dev tools or Lighthouse to confirm the change actually helped.
  • Check that the deferred feature still works offline or on slow connections and that errors during loading are handled.

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.