vite

Getting Started

1. Install the skill using the command above
2. Open your AI coding agent (Claude Code, Codex, Gemini CLI, or Cursor)
3. Reference the skill in your prompt
4. The AI will use the skill's capabilities automatically

Example Prompts

• "Review the open pull requests and summarize what needs attention"
• "Generate a changelog from the last 20 commits on the main branch"

Overview

Vite is a next-generation frontend build tool providing instant dev server startup via native ES modules and optimized Rollup-based production builds. It supports React, Vue, Svelte, and vanilla TypeScript projects with advanced bundling strategies, plugin extensibility, and library mode.

Instructions

• When setting up a project, create vite.config.ts with the appropriate framework plugin (@vitejs/plugin-react, @vitejs/plugin-vue), configure resolve.alias with @ mapping to src/, and set environment variables with VITE_ prefix.
• When configuring the dev server, set up API proxying with server.proxy, enable HTTPS with @vitejs/plugin-basic-ssl, and use server.watch polling for containers or VMs.
• When optimizing builds, configure manual chunks with build.rollupOptions.output.manualChunks for vendor splitting, enable CSS code splitting, and set build.target for browser compatibility.
• When creating plugins, use the Rollup-compatible plugin API with resolveId, load, and transform hooks, and leverage virtual modules with the virtual: prefix.
• When building libraries, configure build.lib with entry point and output formats (es, cjs, umd), externalize peer dependencies, and use vite-plugin-dts for TypeScript declaration generation.
• When migrating from Webpack, replace webpack.config.js with vite.config.ts, swap loaders for Vite plugins, and update REACT_APP_* env vars to VITE_*.
• When integrating testing, use Vitest which shares Vite config and provides instant HMR for tests.

Examples

Example 1: Migrate a Create React App project to Vite

User request: "Convert my CRA project to use Vite instead"

Actions:

1. Install Vite and @vitejs/plugin-react, remove react-scripts
2. Create vite.config.ts with React plugin and path aliases
3. Rename REACT_APP_* environment variables to VITE_*
4. Update index.html to reference the entry module directly

Output: A Vite-powered React project with faster dev startup and HMR.

Example 2: Configure optimized production build

User request: "Set up Vite build with vendor chunk splitting and source maps for Sentry"

Actions:

1. Configure build.rollupOptions.output.manualChunks to separate vendor libraries
2. Enable build.sourcemap for error monitoring integration
3. Set build.target appropriate to browser support requirements
4. Add build.assetsInlineLimit tuning for small asset optimization

Output: An optimized production build configuration with proper chunk splitting and debugging support.

Guidelines

• Always use import.meta.env.VITE_* for client-exposed env vars, never process.env.
• Configure resolve.alias with @ prefix mapping to src/ for clean imports.
• Split vendor chunks manually when default chunking produces too many small files.
• Use build.target: "esnext" for modern-only apps, @vitejs/plugin-legacy for legacy browser support.
• Enable build.sourcemap in production for error monitoring tools.
• Keep vite.config.ts clean by extracting complex plugin configs into separate files.
• Use optimizeDeps.include to pre-bundle problematic dependencies that break during dev.