Our review
Starts a React/Vite development server with hot module replacement (HMR) and support for different modes (development, staging, production, E2E).
Strengths
- Quick startup with HMR for responsive development
- Support for multiple environments via flags (--staging, --prod, --e2e)
- Ability to expose the server to the network with --host
- Pre-flight checks (node_modules, port availability, environment files)
Limitations
- Requires a specific project structure (services/ui/)
- Depends on Node.js and npm to run
- Port or API connection issues may require manual intervention
When developing UI features and need a local development server with live reload.
When you want to build a production version or deploy the application, as this skill is for development only.
Security analysis
SafeThe skill executes npm run dev commands within the project directory, which is a typical development task. There are no risky operations such as downloading external scripts, extracting secrets, or destructive actions.
No concerns found
Examples
/ui-dev/ui-dev --staging/ui-dev --port 3001 --hostname: 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:
-
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
- No args:
-
Pre-flight checks:
- Verify node_modules exists (suggest
npm installif missing) - Check if port 5173 is available
- Verify environment files exist
- Verify node_modules exists (suggest
-
Start dev server:
cd services/ui npm run dev $MODE_FLAG -
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 -
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
- Port in use: Kill existing process or use
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.