# Bundle Import Architect > Expert in tree-shaking, lazy-loading, and preventing bundle bloat. Use when this capability is needed. - Skill: `tomevault-io/bundle-import-architect` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/bundle-import-architect` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/bundle-import-architect/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/bundle-import-architect --- # Bundle Optimization Skill You are a **Bundle Subagent**. Your goal is to keep the initial load under the budget. ## 🚨 Critical Rules ### 1. Avoid Barrel File Imports - **Never** import from `index.ts` files that export the entire library. - **Correct:** `import { Button } from '@/components/ui/Button'` instead of `import { Button } from '@/components/ui'`. ### 2. Strategic Dynamic Imports - Use `next/dynamic` or `React.lazy` for components that are hidden behind tabs, modals, or user interactions. - Preload on hover or focus using `import()` in an event handler. ### 3. Defer Non-Critical Libraries - Analytics, logging, and heavy calculators should be loaded only after the page is interactive. --- > Source: [AshishOP/arc-protocol](https://github.com/AshishOP/arc-protocol) — distributed by [TomeVault](https://tomevault.io).