1 files changed, 220 insertions, 0 deletions
diff --git a/ui/shadcn/.claude/commands/optimize-bundle.md b/ui/shadcn/.claude/commands/optimize-bundle.md
new file mode 100644
index 0000000..3a820f3
--- /dev/null
+++ b/ui/shadcn/.claude/commands/optimize-bundle.md
@@ -0,0 +1,220 @@
+---
+description: Analyze and optimize bundle size
+argument-hint: 
+allowed-tools: Bash, Read, Edit, MultiEdit
+---
+
+Analyze bundle size and optimize for production.
+
+## Instructions
+
+1. Run bundle analysis
+2. Identify large dependencies
+3. Find unused code
+4. Implement optimization strategies
+5. Generate optimization report
+
+## Analysis Tools
+
+### Next.js
+```bash
+# Install bundle analyzer
+npm install -D @next/bundle-analyzer
+
+# Configure next.config.js
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withBundleAnalyzer({
+  // your config
+})
+
+# Run analysis
+ANALYZE=true npm run build
+```
+
+### Vite
+```bash
+# Install rollup plugin
+npm install -D rollup-plugin-visualizer
+
+# Add to vite.config.ts
+import { visualizer } from 'rollup-plugin-visualizer'
+
+plugins: [
+  visualizer({
+    open: true,
+    gzipSize: true,
+    brotliSize: true,
+  })
+]
+
+# Run build
+npm run build
+```
+
+### General
+```bash
+# webpack-bundle-analyzer
+npm install -D webpack-bundle-analyzer
+
+# source-map-explorer
+npm install -D source-map-explorer
+npm run build
+npx source-map-explorer 'build/static/js/*.js'
+```
+
+## Optimization Strategies
+
+### 1. Code Splitting
+```tsx
+// Dynamic imports
+const HeavyComponent = lazy(() => import('./HeavyComponent'))
+
+// Route-based splitting (Next.js)
+export default function Page() {
+  return <div>Auto code-split by route</div>
+}
+
+// Conditional loading
+if (userNeedsFeature) {
+  const module = await import('./feature')
+  module.initialize()
+}
+```
+
+### 2. Tree Shaking
+```tsx
+// ❌ Bad - imports entire library
+import _ from 'lodash'
+
+// ✅ Good - imports only what's needed
+import debounce from 'lodash/debounce'
+
+// For shadcn/ui - already optimized!
+// Components are copied, not imported from package
+```
+
+### 3. Component Optimization
+```tsx
+// Memoize expensive components
+const MemoizedComponent = memo(ExpensiveComponent)
+
+// Lazy load heavy components
+const Chart = lazy(() => import('./Chart'))
+
+<Suspense fallback={<Skeleton />}>
+  <Chart />
+</Suspense>
+```
+
+### 4. Asset Optimization
+```tsx
+// Next.js Image optimization
+import Image from 'next/image'
+
+<Image
+  src="/hero.jpg"
+  width={1200}
+  height={600}
+  priority
+  alt="Hero"
+/>
+
+// Font optimization
+import { Inter } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+})
+```
+
+### 5. Dependency Optimization
+```json
+// Use lighter alternatives
+{
+  "dependencies": {
+    // "moment": "^2.29.0", // 67kb
+    "date-fns": "^2.29.0", // 13kb (tree-shakeable)
+    
+    // "lodash": "^4.17.0", // 71kb
+    "lodash-es": "^4.17.0", // Tree-shakeable
+  }
+}
+```
+
+### 6. Tailwind CSS Optimization
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    // Be specific to avoid scanning unnecessary files
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  // Remove unused styles in production
+  purge: process.env.NODE_ENV === 'production' ? [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ] : [],
+}
+```
+
+## Optimization Checklist
+
+- [ ] Enable production mode
+- [ ] Remove console.logs and debug code
+- [ ] Minify JavaScript and CSS
+- [ ] Enable gzip/brotli compression
+- [ ] Optimize images (WebP, AVIF)
+- [ ] Lazy load non-critical resources
+- [ ] Use CDN for static assets
+- [ ] Implement caching strategies
+- [ ] Remove unused dependencies
+- [ ] Tree shake imports
+
+## Report Format
+
+```markdown
+# Bundle Optimization Report
+
+## Current Stats
+- Total bundle size: XXXkb
+- Gzipped size: XXXkb
+- Largest chunks: [...]
+
+## Issues Found
+1. Large dependency: [package] (XXXkb)
+2. Duplicate code in: [files]
+3. Unused exports in: [modules]
+
+## Optimizations Applied
+1. ✅ Code split [component]
+2. ✅ Lazy loaded [routes]
+3. ✅ Replaced [heavy-lib] with [light-lib]
+
+## Results
+- Bundle size reduced by: XX%
+- Initial load improved by: XXms
+- Lighthouse score: XX → XX
+
+## Recommendations
+1. Consider replacing...
+2. Lazy load...
+3. Split chunk for...
+```
+
+## Example
+
+If the user says: `/optimize-bundle`
+
+1. Analyze current bundle size
+2. Identify optimization opportunities:
+   - Large dependencies to replace
+   - Components to lazy load
+   - Unused code to remove
+3. Implement optimizations
+4. Re-analyze and compare results
+5. Generate detailed report
+\ No newline at end of file