Builds web applications with Vite including dev server, production builds, plugins, and configuration. Use when scaffolding projects, configuring build tools, optimizing bundles, or setting up development environments.
Builds web applications with Vite including dev server, production builds, plugins, and configuration. Use when scaffolding projects, configuring build tools, optimizing bundles, or setting up development environments.
/plugin marketplace add mgd34msu/goodvibes-plugin/plugin install goodvibes@goodvibes-marketThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Next-generation frontend build tool with instant dev server and optimized production builds.
Create project:
npm create vite@latest my-app
cd my-app
npm install
npm run dev
Templates:
npm create vite@latest my-app -- --template react
npm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template vue-ts
npm create vite@latest my-app -- --template svelte
npm create vite@latest my-app -- --template svelte-ts
// 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,
},
});
// vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig(({ command, mode }) => {
// Load env file based on mode
const env = loadEnv(mode, process.cwd(), '');
return {
plugins: [react()],
// Path aliases
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
'@lib': path.resolve(__dirname, './src/lib'),
},
},
// Dev server
server: {
port: 3000,
host: true, // Listen on all addresses
open: true,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
// Build options
build: {
outDir: 'dist',
sourcemap: mode === 'development',
minify: 'terser',
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
utils: ['lodash', 'date-fns'],
},
},
},
},
// Preview server (for built app)
preview: {
port: 4173,
},
// Define global constants
define: {
__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
},
// CSS options
css: {
modules: {
localsConvention: 'camelCaseOnly',
},
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`,
},
},
},
};
});
.env # Loaded in all cases
.env.local # Loaded in all cases, ignored by git
.env.[mode] # Only loaded in specified mode
.env.[mode].local # Only loaded in specified mode, ignored by git
# .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App
# Not exposed to client (no VITE_ prefix)
DATABASE_URL=postgres://...
// In client code
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_TITLE);
// Built-in variables
console.log(import.meta.env.MODE); // 'development' | 'production'
console.log(import.meta.env.BASE_URL); // Base URL
console.log(import.meta.env.PROD); // boolean
console.log(import.meta.env.DEV); // boolean
// env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string;
readonly VITE_APP_TITLE: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
// Enable React Refresh
fastRefresh: true,
// Use automatic JSX runtime
jsxRuntime: 'automatic',
}),
],
});
npm install -D @vitejs/plugin-react-swc
import react from '@vitejs/plugin-react-swc';
export default defineConfig({
plugins: [react()],
});
npm install -D vite-plugin-svgr
import svgr from 'vite-plugin-svgr';
export default defineConfig({
plugins: [react(), svgr()],
});
import Logo from './logo.svg?react';
function App() {
return <Logo className="logo" />;
}
npm install -D vite-plugin-pwa
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
manifest: {
name: 'My App',
short_name: 'App',
theme_color: '#ffffff',
icons: [
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
}),
],
});
npm install -D vite-plugin-compression
import viteCompression from 'vite-plugin-compression';
export default defineConfig({
plugins: [
react(),
viteCompression({
algorithm: 'gzip',
ext: '.gz',
}),
viteCompression({
algorithm: 'brotliCompress',
ext: '.br',
}),
],
});
/* Button.module.css */
.button {
background: blue;
color: white;
}
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click</button>;
}
// postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
npm install -D sass
// vite.config.ts
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`,
},
},
},
});
// Import as URL
import imgUrl from './img.png';
// Import as string (inline)
import imgData from './img.png?inline';
// Import as raw string
import shaderCode from './shader.glsl?raw';
Files in public/ are served at root and copied as-is to build output.
<!-- Access public/favicon.ico -->
<link rel="icon" href="/favicon.ico" />
// Lazy load routes
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
// Split vendor code
react: ['react', 'react-dom'],
router: ['react-router-dom'],
ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
},
},
},
},
});
export default defineConfig({
build: {
chunkSizeWarningLimit: 500, // KB
},
});
npm install -D rollup-plugin-visualizer
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
visualizer({
open: true,
gzipSize: true,
}),
],
});
// vite.config.ts (for building a library)
import { defineConfig } from 'vite';
import { resolve } from 'path';
import dts from 'vite-plugin-dts';
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'MyLib',
fileName: 'my-lib',
formats: ['es', 'cjs', 'umd'],
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
plugins: [dts()],
});
npm install -D vitest
// vite.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
},
});
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx"
}
}
vite build --mode staging
vite build --mode production
| Mistake | Fix |
|---|---|
| Missing VITE_ prefix | Prefix env vars with VITE_ |
| Wrong import.meta usage | Use import.meta.env |
| Large chunks | Add manualChunks |
| Slow builds | Use @vitejs/plugin-react-swc |
| Missing types | Add env.d.ts |
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.