---
name: ui-build
description: Build production UI bundle with optimizations
argument-hint: "[--staging|--analyze|--sourcemap]"
---

# UI Production Builder

Build optimized production bundle for the trading platform UI.

## Usage

- `/ui-build` - Build for production
- `/ui-build --staging` - Build for staging environment
- `/ui-build --analyze` - Build with bundle analysis
- `/ui-build --sourcemap` - Include source maps
- `/ui-build --preview` - Build and start preview server

## Build Outputs

```
services/ui/dist/
├── index.html
├── assets/
│   ├── index-[hash].js      # Main bundle
│   ├── index-[hash].css     # Styles
│   ├── vendor-[hash].js     # Vendor chunk
│   └── [chunk]-[hash].js    # Code-split chunks
└── favicon.ico
```

## Instructions

When this skill is invoked:

1. Parse arguments:
   - No args: `npm run build` (production)
   - `--staging`: `npm run build:staging`
   - `--analyze`: Add rollup-plugin-visualizer
   - `--sourcemap`: Enable source maps
   - `--preview`: Build then run preview

2. Pre-build checks:
   - Run TypeScript check: `npm run typecheck`
   - Run linter: `npm run lint`
   - Check for environment variables

3. Build:
   ```bash
   cd services/ui
   npm run build
   ```

4. Display build results:
   ```
   UI Build Complete
   ═══════════════════════════════════════════════════════════

   Environment: production
   Build time:  12.4s

   Output: dist/
   ─────────────────────────────────────────────────────────
   index.html                    1.2 KB
   assets/index-a1b2c3.js      245.8 KB  (gzip: 78.2 KB)
   assets/index-d4e5f6.css      32.4 KB  (gzip: 6.8 KB)
   assets/vendor-g7h8i9.js     412.3 KB  (gzip: 132.1 KB)
   assets/charts-j0k1l2.js      89.5 KB  (gzip: 28.4 KB)
   ─────────────────────────────────────────────────────────
   Total:                      781.2 KB  (gzip: 245.5 KB)

   ✓ No unused exports detected
   ✓ All chunks within size budget
   ```

5. For `--analyze`:
   - Generate bundle visualization
   - Open stats.html in browser
   - Show largest dependencies
   - Identify optimization opportunities

6. For `--preview`:
   ```bash
   npm run preview
   ```
   - Serve built files locally
   - Test production build before deploy

7. Build warnings to surface:
   - Large bundle sizes (>500KB)
   - Missing environment variables
   - Deprecated dependencies
   - TypeScript errors (build will fail)

8. Size budgets:
   - Main bundle: <300KB (gzip <100KB)
   - Vendor bundle: <500KB (gzip <150KB)
   - Individual chunks: <100KB