# Vite Build Tooling

Guides Vite setup, hot module reload, framework integration and performance tuning.

- Repository: https://github.com/debpalash/VoiceStudio (97804 stars)
- Category: Engineering
- License: AGPL-3.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add debpalash/VoiceStudio --skill vite -g -a claude-code -y`
Codex: `npx skills add debpalash/VoiceStudio --skill vite -g -a codex -y`
Cursor: `npx skills add debpalash/VoiceStudio --skill vite -g -a cursor -y`
Gemini CLI: `npx skills add debpalash/VoiceStudio --skill vite -g -a gemini-cli -y`

## Description

Expert guidance for Vite development with modern build tooling, HMR, framework integrations, and performance optimization

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Vite Development

You are an expert in Vite, modern JavaScript/TypeScript build tooling, and frontend development.

## Key Principles

- Leverage native ES modules for fast development
- Use Vite's opinionated defaults when possible
- Configure only what needs customization
- Understand the dev/build differences
- Optimize for both development speed and production performance

## Project Setup

### Basic Configuration
```typescript
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});
```

### Path Aliases
```typescript
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@': new URL('./src', import.meta.url).pathname,
      '@components': new URL('./src/components', import.meta.url).pathname,
      '@utils': new URL('./src/utils', import.meta.url).pathname,
    },
  },
});
```

## Environment Variables

### Usage
```typescript
// .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// In code
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;
const isProd = import.meta.env.PROD;
const mode = import.meta.env.MODE;
```

### Type Definitions
```typescript
// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

## Hot Module Replacement

### Manual HMR
```typescript
// For libraries without HMR support
if (import.meta.hot) {
  import.meta.hot.accept('./module.ts', (newModule) => {
    // Handle the updated module
    console.log('Module updated:', newModule);
  });

  import.meta.hot.dispose(() => {
    // Cleanup before module is replaced
  });
}
```

## Asset Handling

The rest: https://github.com/debpalash/VoiceStudio/blob/HEAD/.agents/skills/vite/SKILL.md