Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Conditional Module Loading reduces initial JavaScript bundle sizes by deferring the importation of heavy dependencies until a specific interaction or state change requires them. This pattern targets non-critical code paths, ensuring browsers only download and execute modules when users trigger relevant features. By incorporating environmental checks, such as verifying the window object, the implementation safely isolates client-side dependencies from server-side rendering pipelines. This approach directly improves time-to-interactive metrics and decreases total payload weight. It transforms static imports into dynamic runtime events, preventing unnecessary execution of code segments that may never be accessed during a specific user session. The skill focuses on balancing feature richness with performance constraints, ensuring that high-memory assets like complex animation libraries or data-heavy visualizations do not penalize the initial page load time.
When to Use This Skill
- •Deferred loading of heavy data-visualization libraries
- •Initialization of secondary animation frame sets upon user interaction
- •Selective inclusion of client-side logic in SSR frameworks
- •On-demand attachment of markdown previewers or syntax highlighters
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Reduce the initial bundle size for this feature
- “Lazy load this module only when activated
- “Prevent server-side rendering for this library
- “Delay loading of this script to improve performance
- “Import this package dynamically to optimize startup
What this skill does
- •Dynamic imports via ES syntax
- •Environment-aware module exclusion
- •Automatic skeleton screen synchronization
- •Error handling for failed network module fetches
- •Conditional execution based on component state
When not to use it
- ✕Critical UI elements required for the initial paint
- ✕Small modules that result in high overhead for promise resolution
Example workflow
- Identify a heavy library not needed during initial render
- Replace static import statement with dynamic import syntax
- Wrap the loading logic in a state-managed useEffect hook
- Implement a fallback UI or skeleton state for the loading duration
- Add environmental guards to prevent SSR execution
- Verify the module chunk splits correctly in build output
Prerequisites
- –Knowledge of dynamic import syntax
- –Basic understanding of component lifecycle hooks
- –Familiarity with module bundler configuration
Pitfalls & limitations
- !Increased latency during the first interaction with the feature
- !Complex error states if the external module fails to load over the network
- !Potential layout shift when the deferred component finally renders
FAQ
How it compares
Unlike manual script injection or generic code-splitting, this method provides a standardized, reactive lifecycle-integrated pattern that handles state transitions and conditional environmental execution automatically.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Load large data or modules only when a feature is activated.
**Example (lazy-load animation frames):**
function AnimationPlayer({ enabled }: { enabled: boolean }) {
const [frames, setFrames] = useState<Frame[] | null>(null)
useEffect(() => {
if (enabled && !frames && typeof window !== 'undefined') {
import('./animation-frames.js')
.then(mod => setFrames(mod.frames))
.catch(() => setEnabled(false))
}
}, [enabled, frames])
if (!frames) return <Skeleton />
return <Canvas frames={frames} />
}The
typeof window !== 'undefined' check prevents bundling this module for SSR, optimizing server bundle size and build speed.How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/bundle-conditional/ - 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-conditional/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/bundle-conditional/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/bundle-conditional/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills