---
name: ui-dev
description: Start UI development server with hot reload
argument-hint: "[--staging|--prod|--e2e|--port]"
---

# UI Development Server

Start the React/Vite development server with hot module replacement.

## Usage

- `/ui-dev` - Start dev server (default: development mode)
- `/ui-dev --staging` - Start with staging API config
- `/ui-dev --prod` - Start with production API config
- `/ui-dev --e2e` - Start in E2E test mode
- `/ui-dev --port 3001` - Custom port
- `/ui-dev --host` - Expose to network

## Tech Stack

- **Vite** - Build tool and dev server
- **React 18** - UI framework
- **TypeScript** - Type safety
- **Tailwind CSS** - Styling
- **React Query** - Data fetching
- **Zustand** - State management

## Project Structure

```
services/ui/
├── src/
│   ├── components/      # Shared components
│   │   ├── ui/          # Base UI components (button, card, etc.)
│   │   ├── charts/      # Chart components
│   │   └── common/      # Common components
│   ├── features/        # Feature modules
│   │   ├── trading-terminal/
│   │   ├── command-center/
│   │   ├── research/
│   │   └── ...
│   ├── contexts/        # React contexts
│   ├── hooks/           # Custom hooks
│   ├── api/             # API client
│   └── pages/           # Page components
├── vite.config.ts
├── tailwind.config.js
└── package.json
```

## Instructions

When this skill is invoked:

1. Parse arguments:
   - No args: `npm run dev` (development mode)
   - `--staging`: `npm run dev:staging`
   - `--prod`: `npm run dev:prod`
   - `--e2e`: `npm run dev:e2e`
   - `--port N`: Add `-- --port N`
   - `--host`: Add `-- --host`

2. Pre-flight checks:
   - Verify node_modules exists (suggest `npm install` if missing)
   - Check if port 5173 is available
   - Verify environment files exist

3. Start dev server:
   ```bash
   cd services/ui
   npm run dev $MODE_FLAG
   ```

4. Display server info:
   ```
   UI Development Server
   ═══════════════════════════════════════════════════════════

   Mode:     development
   Local:    http://localhost:5173
   Network:  http://192.168.1.100:5173

   API:      http://localhost:8000
   WebSocket: ws://localhost:8000/ws

   Ready in 1.2s

   Press Ctrl+C to stop
   ```

5. Common issues:
   - **Port in use**: Kill existing process or use `--port`
   - **Module not found**: Run `npm install`
   - **API connection failed**: Ensure backend is running (`/deploy-dev`)
   - **TypeScript errors**: Run `/ui-lint --typecheck`