import-on-interaction
OfficialLoad non-critical code on interaction.
Software Engineering#react#javascript#vue#web-performance#lazy-loading#dynamic-import#import-on-interaction
AuthorPatternsDev
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill helps optimize web performance by deferring non-critical code until user interaction, reducing initial load times and improving Time to Interactive (TTI) and First Input Delay (FID).
Core Features & Use Cases
- Lazy-load heavy UI components on first user interaction (clicks, hovers, or form inputs).
- Use dynamic import() to fetch modules on demand.
- Provide facades or lightweight placeholders to preserve UX while loading heavyweight dependencies.
Quick Start
Trigger a user interaction (click or hover) to load a heavy module on demand using dynamic import.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: import-on-interaction Download link: https://github.com/PatternsDev/skills/archive/main.zip#import-on-interaction Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.