/bundle-dynamic-imports
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.
$ npx -y skills add theorcdev/8bitcn-ui --skill bundle-dynamic-imports --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/bundle-dynamic-imports
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
bundle-dynamic-imports.SKILL.mdname: bundle-dynamic-imports description: 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.
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} />
}Accessible retro components that you can copy and paste into your apps.Free. Open Source. Built on shadcn/ui. Documentation · Components · Blocks · Themes · Discord
Repo: theorcdev/8bitcn-ui
Other skills on 8bitcn-ui.
- /8-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Open skill - /8bit-docs-patterns
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
Open skill - /animation-performance-retro
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Open skill - /bundle-barrel-imports
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.
Open skill - /component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
Open skill - /fumadocs-component-docs
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
Open skill