Guide · Agent skill
How to use the Import on Interaction agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Import on Interaction is an agent skill that tells an AI coding agent to look for heavy front-end code that loads on the first page view but is only needed after a user clicks, focuses, or opens something. It is written for front-end developers whose pages load slowly because of large JavaScript bundles. After reading this guide you will know what the skill does, how to install it, how to ask for a review, and where its limits are.
Import on Interactionthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the import-on-interaction ZIP from the directory page.
- 2Unzip it into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Describe the slow load. Ask the agent to review a page or component for slow initial loads caused by optional features.
- 5Review the suggested changes. Check each proposed dynamic import() change, confirm the first screen still works, and test the triggered flow.
What the import-on-interaction skill makes the agent do
Agent skills are instruction packages that an AI agent loads when a request matches the skill's description. This one is a checklist and guidance for reviewing slow initial loads caused by optional features. Its description says to prioritize code that is expensive to download or execute and is not required for the first viewport, first input, or core task completion.
When it applies, the agent looks for things like chat widgets, editors, maps, export tools, and third-party scripts that load on first render. It then suggests or makes changes so that this code loads on demand with dynamic import(), shows immediate loading feedback while the deferred code loads, and keeps the first screen working without it.
The skill does not run code or measure performance. It gives guidance rather than measurements, so you still need your own tools to confirm that the change helped.
- Finds optional features that load on first render
- Moves them behind a click, focus, hover, or explicit user action
- Adds loading feedback while the deferred chunk loads
- Checks that the initial render still works without the feature
How to install the import-on-interaction skill
Download the ZIP for the skill from the directory page. Then choose one of the two installation routes 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 instead.
If you use the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills
How to trigger the skill with a natural request
You do not need a special command. The skill is meant to be picked up when your request matches its description, which is about reviewing slow initial loads caused by optional features. Describe the problem in plain language and name the page or component you care about.
Good requests mention the slow load and the page. You can also ask for a review of a specific kind of feature, such as a chat widget or a map. Reading the rule page at frontendchecklist.io helps you judge whether the agent's suggestions match the guidance.
- Review this checkout page for slow first loads caused by optional features.
- Check whether our chat widget should load after the user clicks the chat button.
- Audit the editor and export tools on this route for code that loads too early.
Example: deferring code until a click
The skill's reference material shows the basic pattern. Heavy code is imported only inside the event handler that needs it, and a placeholder is shown while the chunk loads. The first version below loads the module for every visitor. The second loads it only when the user clicks.
Your own code will differ, but the shape of the change is the same: keep the trigger in the initial bundle and move the heavy dependency behind the dynamic import.
// Before: heavy code is loaded for every visitor
document.querySelector('#configure').addEventListener('click', () => {
openProductConfigurator()
})
// After: load only when the user asks for it
document.querySelector('#configure').addEventListener('click', async () => {
showConfiguratorSkeleton()
const { openProductConfigurator } = await import('./product-configurator.js')
openProductConfigurator()
})What the skill needs and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. It is a set of written instructions in SKILL.md with a reference file at references/rule.md.
Because the skill itself runs nothing, the risk comes from the code changes the agent proposes or makes. Review every change before you ship it, especially changes that affect initial rendering, forms, or core task flows. The skill notes that deferring code needed for first paint or core tasks can break the initial experience.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Always review proposed code changes before merging
Tips for getting useful results
Point the agent at a specific route or component rather than the whole project. The skill works best when it can see which modules load on first render and which are only used after an interaction.
Confirm the result with your own performance measurements. The skill does not produce numbers, so compare load behaviour before and after the change.
Skip pages with little JavaScript. The skill's own guidance says the benefit is negligible there.
- Name one route or component per request
- Check the triggered flow still works after the change
- Measure load behaviour before and after with your own tools
What people use it for
- Reviewing a product page where a configurator loads before the user opens it
- Deferring a chat widget until the user clicks the chat button
- Checking an editor or export tool that loads on first render but is used later
- Auditing a route before a release for optional third-party scripts
Frequently asked questions
Is the import-on-interaction skill free?
The skill is listed under the MIT licence on the directory page. The page does not list a price, and the skill itself runs no code.
What do I need to use import-on-interaction?
The listing shows no requirements. You need an agent setup that can load skills, and a front-end project to review.
Where do I put the skill files?
Unzip the downloaded ZIP 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 it under Settings → Capabilities → Skills.
Does the skill measure my page speed?
No. It gives guidance rather than measurements and does not run code, so use your own performance tools to check results.
Is this skill useful for a simple static site?
Probably not. The skill's guidance says the benefit is negligible on static sites or pages with little JavaScript.
Can deferring code break my page?
It can if the code is needed for first paint or core tasks. The skill keeps the first screen working without the deferred feature, but you should test the page after each change.
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 with slow pages caused by large JavaScript bundles and you want a checklist-driven review of lazy-loading opportunities. Pick something else if your site is simple, if you need measurements, or if you are not a developer, since the skill gives guidance rather than a finished performance tool.
Download the skill