bundle-dynamic-imports
Helps developers identify and implement lazy-loading for large frontend components to reduce initial bundle size.
Install
mkdir -p .claude/skills/bundle-dynamic-imports && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3799" && unzip -o skill.zip -d .claude/skills/bundle-dynamic-imports && rm skill.zipInstalls to .claude/skills/bundle-dynamic-imports
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.Key capabilities
- →Lazy-load heavy components
- →Improve initial page render speed
- →Split code chunks for large libraries
How it works
Replaces static imports with next/dynamic to defer loading of heavy components until they are required by the application.
Inputs & outputs
When to use bundle-dynamic-imports
- →Lazy-load a heavy code editor component
- →Optimize page load for a dashboard with many charts
- →Prevent large libraries from blocking initial render
- →Split code chunks for heavy rich text editors
About this skill
Dynamic Imports for Heavy Components
Use next/dynamic to lazy-load large components not needed on initial render.
Incorrect (Monaco bundles with main chunk ~300KB):
import { MonacoEditor } from './monaco-editor'
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}
Correct (Monaco loads on demand):
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor').then(m => m.MonacoEditor),
{ ssr: false }
)
function CodePanel({ code }: { code: string }) {
return <MonacoEditor value={code} />
}
When not to use it
- →Small components needed on initial render
Prerequisites
Limitations
- →Requires client-side rendering for specific components
How it compares
Unlike static imports that bundle components into the main chunk, this approach loads them on demand to reduce initial payload size.
Compared to similar skills
bundle-dynamic-imports side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| bundle-dynamic-imports (this skill) | 1 | 6mo | No flags | Beginner |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| nextjs-app-router-patterns | 3 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by TheOrcDev
View all by TheOrcDev →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
bundle-barrel-imports
TheOrcDev
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
perf-web-optimization
tech-leads-club
Optimize web performance: Core Web Vitals (LCP, CLS, INP), bundle size, images, caching. Use when site is slow, optimizing for Lighthouse scores, reducing bundle size, fixing layout shifts, or improving Time to Interactive. Triggers on: web performance, Core Web Vitals, LCP, CLS, INP, FID, bundle size, page speed, slow site.