Skills Guide

Serveur de développement UI

VérifiéSûr

Lance le serveur de développement Vite/React avec remplacement à chaud des modules. Supporte plusieurs environnements (développement, staging, production, e2e) et des ports personnalisés. Utile pour le développement rapide du frontend et les tests avec des mises à jour en temps réel.

Spar Skills Guide Bot
DeveloppementDébutant
15002/06/2026
Claude Code
#ui-development#vite#react#hot-reload#dev-server

Recommandé pour

Développeur backendClaude CodeRevue de codeDéveloppeur frontendDéveloppeur fullstackRefactoring

Notre avis

Démarre un serveur de développement React/Vite avec rechargement à chaud (HMR) et support de différents modes (développement, staging, production, E2E).

Points forts

  • Démarrage rapide avec HMR pour un développement réactif
  • Prise en charge de plusieurs environnements via des drapeaux (--staging, --prod, --e2e)
  • Possibilité d'exposer le serveur sur le réseau avec --host
  • Vérifications préalables (node_modules, port disponible, fichiers d'environnement)

Limites

  • Nécessite une structure de projet spécifique (services/ui/)
  • Dépend de Node.js et npm pour fonctionner
  • Les problèmes de port ou de connexion API peuvent nécessiter une intervention manuelle
Quand l'utiliser

Lorsque vous développez des fonctionnalités d'interface utilisateur et avez besoin d'un serveur de développement local avec rechargement automatique.

Quand l'éviter

Lorsque vous souhaitez construire une version de production ou déployer l'application, car ce skill est destiné au développement uniquement.

Analyse de sécurité

Sûr
Score qualité90/100

The 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.

Aucun point d'attention détecté

Exemples

Start default dev server
/ui-dev
Start with staging API
/ui-dev --staging
Start on custom port and expose to network
/ui-dev --port 3001 --host

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:

    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
Skills similaires

Expert Next.js App Router

Developpement

Un skill qui transforme Claude en expert Next.js App Router.

Claude CodeCursoradvanced
890
234
2,846
Admin

Générateur de README

Developpement

Crée des README.md professionnels et complets pour vos projets.

claudeCursorWindsurfbeginner
259
72
821
Admin

Rédacteur de Documentation API

Developpement

Génère de la documentation API complète au format OpenAPI/Swagger.

claudeCursorWindsurfintermediate
156
44
682
Admin