vite

name	vite
description	Use when setting up Vite projects - provides dev server, HMR, build configuration, library mode, and plugin authoring patterns
license	MIT

Vite

Next-gen frontend build tool with native ESM dev server and Rolldown-powered builds.

When to Use

• Setting up frontend project build tooling
• Configuring dev server, HMR, proxies
• Building for production (SPA, MPA, library, SSR)
• Writing Vite plugins
• Integrating with backend frameworks

Quick Start

npm create vite@latest my-app

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
  },
})

vite          # Dev server
vite build    # Production build
vite preview  # Preview build

Reference Files

Task	File
Config file, options, CLI, plugins	config.md
ESM, CSS, assets, env vars, glob import	features.md
Dev server, HMR, workers, performance	dev.md
Production, library mode, SSR, chunking	build.md
JS API, plugin authoring, module graph	advanced.md

Loading Files

Consider loading these reference files based on your task:

• references/config.md - if setting up vite.config.ts, configuring plugins, or using CLI
• references/features.md - if using ESM, CSS, assets, env vars, or glob imports
• references/dev.md - if configuring dev server, HMR, workers, or optimizing performance
• references/build.md - if building for production, library mode, SSR, or chunking
• references/advanced.md - if writing plugins, using JS API, or working with module graph

DO NOT load all files at once. Load only what's relevant to your current task.

Cross-Skill References

• Testing → Use vitest skill (Vite-native testing)
• Vue projects → Use vue skill for component patterns
• Library bundling → Use tsdown skill for TypeScript libs