How do I install the Import On Interaction skill?

Run npx skillmds@latest add thedaviddias/import-on-interaction in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Import On Interaction safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Import On Interaction?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Import On Interaction free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Import On Interaction?

thedaviddias (@thedaviddias) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Import On Interaction by thedaviddias

Name: Import On Interaction
Author: thedaviddias

Import On Interaction

Use when reviewing slow initial loads caused by optional features. Prioritize code that is expensive to download or execute and not required for the first viewport, first input, or core task completion.

thedaviddias c5348bd 2 files · 5.3 KB Updated Sep 17, 2026

File contents

Load non-critical code on user interaction

Users should not pay the download, parse, and execution cost for features they may never use. Import-on-interaction shrinks initial JavaScript, reduces main-thread work during page load, and keeps the first view focused on content that matters immediately.

Quick Reference

Move non-essential code behind clicks, focus, hovers, or explicit user actions
Use dynamic import() so the code is absent from the initial route bundle
Show immediate UI feedback while the deferred chunk loads
Use this for chat widgets, editors, maps, filters, and export flows that are not needed on first paint

Check

Inspect this route or component for heavy modules, widgets, or third-party scripts that load on first render but are only needed after a user clicks, focuses, hovers, or opens a panel.

Fix

Move the non-critical dependency behind a user-triggered dynamic import(), add immediate loading feedback, and ensure the initial render still works without the deferred feature.

Explain

Explain import-on-interaction, why it improves initial performance, and which features are safe to defer until the user shows intent.

Code Review

Inspect event handlers, modal triggers, drawers, editors, maps, export actions, and third-party widgets. Flag code that is included in the initial bundle even though it is only needed after a user interaction, and verify the fix keeps the initial path lighter without degrading the triggered flow.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/performance/import-on-interaction

Frequently asked questions