Installs into .claude/skills of the current project.
Are you the author of Bundle Optimization?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/ashishop-bundle-optimization)
---
name: Bundle & Import Architect
description: Expert in tree-shaking, lazy-loading, and preventing bundle bloat.
---
# 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.
