Preload Based on User Intent

Name: Preload Based on User Intent
Author: Vercel Engineering

bundlepreloaduser-intenthover

⭐ 28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

Preload Based on User Intent is a proactive optimization strategy that fetches heavy JavaScript chunks before a user interacts with them. By detecting high-probability triggers like mouse hovering, element focusing, or specific application states, the agent injects the module into the browser's cache early. This technique minimizes wait times during the actual interaction, creating a snappier interface. The strategy emphasizes conditional loading—specifically bypassing server-side execution—to keep build footprints lean and improve initial page load performance. It bridges the gap between static code-splitting and dynamic execution by acting on behavior cues rather than purely on navigation events. This approach effectively hides latency for resource-intensive features like rich text editors, charts, or modal content, ensuring high-value components arrive in the browser precisely when needed.

When to Use This Skill

•Loading complex WYSIWYG editors only when a user engages with the trigger button
•Preparing heavy data visualization libraries when a dashboard tab is hovered
•Injecting administrative tools into the browser memory only if the user has specific permission flags
•Pre-fetching modal content while the user moves the mouse toward an open action

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

“Preload the editor bundle on hover
“Improve load time for the chart component using intent
“Add code splitting based on user interaction
“Fetch module chunks early to reduce latency
“Optimize secondary bundle loading for feature flags

What this skill does

•Attaches preload triggers to mouseenter and focus events
•Conditional module importation based on runtime state or feature flags
•Server-side rendering safety via window object existence checks
•Reduces Time to Interactive (TTI) for heavy feature modules
•Decouples bundle fetching from the final click or activation event

When not to use it

✕For small, critical components required immediately upon page load
✕In environments with extremely restrictive data caps where background fetching is undesirable
✕When the secondary module is too large, potentially causing main-thread jank during the pre-fetch process

Example workflow

Identify a high-latency component causing delay during user interaction
Implement an event handler that triggers a dynamic import promise
Attach the handler to specific DOM interactions like hover or focus
Add a guard to prevent server-side execution during build time
Verify the network tab shows the chunk fetching upon interaction
Monitor real-world load times to ensure the delay is eliminated

Prerequisites

–Bundler with support for dynamic imports
–Webpack or Vite code-splitting configuration

Pitfalls & limitations

!Excessive preloading can saturate network bandwidth if too many assets are requested at once
!Failing to check for window existence can crash server-side rendering pipelines
!Triggering on mobile devices where 'hover' events do not behave the same as on desktop

FAQ

Why do I need a window check?

The window check ensures the code only runs in the browser environment, preventing errors during server-side rendering and keeping the server bundle light.

Will this impact my initial page load score?

No, because the modules are loaded asynchronously after the initial page rendering, it actually helps offload the critical path.

Can I preload multiple modules at once?

Yes, but be mindful of network priority and bandwidth to avoid competing with other essential assets.

How it compares

Unlike standard lazy loading which happens during route navigation, this method anticipates user behavior to fetch code while the user is still deciding to interact.

Source & trust

⭐ 28k stars🕒 Updated 2026-06-10

View original skill on GitHub →

📄 Full skill instructions — original source: vercel-labs/agent-skills

## Preload Based on User Intent

Preload heavy bundles before they're needed to reduce perceived latency.

**Example (preload on hover/focus):**

function EditorButton({ onClick }: { onClick: () => void }) {
  const preload = () => {
    if (typeof window !== 'undefined') {
      void import('./monaco-editor')
    }
  }

  return (
    <button
      onMouseEnter={preload}
      onFocus={preload}
      onClick={onClick}
    >
      Open Editor
    </button>
  )
}

**Example (preload when feature flag is enabled):**

function FlagsProvider({ children, flags }: Props) {
  useEffect(() => {
    if (flags.editorEnabled && typeof window !== 'undefined') {
      void import('./monaco-editor').then(mod => mod.init())
    }
  }, [flags.editorEnabled])

  return <FlagsContext.Provider value={flags}>
    {children}
  </FlagsContext.Provider>
}

The typeof window !== 'undefined' check prevents bundling preloaded modules for SSR, optimizing server bundle size and build speed.

By Vercel Engineering

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

Click "Download" above
In your project, create the directory: .agent/skills/bundle-preload/
Save the file as SKILL.md
The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

Claude Code: ~/.claude/skills/vercel-labs/agent-skills/bundle-preload/SKILL.md
Cursor: ~/.cursor/skills/vercel-labs/agent-skills/bundle-preload/SKILL.md
Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/bundle-preload/SKILL.md