vite

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

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