Load non-critical code on user interaction
SkillProductivityImport-on-interaction is a skill for AI agents that applies the import-on-interaction performance rule when reviewing slow initial page loads caused by optional features. It guides the agent to find code that is expensive to download or execute but not needed for the first viewport, first input, or core task completion, and to defer it behind user actions. The skill covers checking, fixing, explaining, and code review for this rule.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load skills.
Then ask your AI: use the Load non-critical code on user interaction skill
What your AI can do with it
- Inspect routes and components for heavy modules or third-party scripts loaded on first ren
- Move non-critical dependencies behind user-triggered dynamic import()
- Add immediate UI feedback while a deferred chunk loads
- Explain which features are safe to defer until the user shows intent
- Flag code in the initial bundle that is only needed after an interaction
- Apply the rule to chat widgets, editors, maps, filters, and export flows
Getting started
- Have an AI agent that can load skills.
- Add the import-on-interaction skill to the agent's available skills.
- Ask the agent to review a route or component with slow initial loads or optional features.
- Consult references/rule.md for full implementation details, code examples, and framework-specific guidance.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/import-on-interaction/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What kinds of features should be deferred with this skill?
- Features not needed on first paint, such as chat widgets, editors, maps, filters, and export flows, especially code that is expensive to download or execute.
- How does the skill suggest loading deferred code?
- Use dynamic import() so the code is absent from the initial route bundle, triggered by clicks, focus, hovers, or explicit user actions, with immediate loading feedback.
- How long does it take to use?
- The skill lists an estimated time of 20 (units as given in its metadata).
Advanced
- Item type
- skill
- Key
import-on-interaction- Source
- github.com/thedaviddias/front-end-checklist