Agent skill · software engineering · affaan-m
vite-patterns
Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.
Why this skill is useful
Provides specific configuration patterns and optimization techniques for Vite projects that the AI wouldn't reliably generate on its own.
What it needs
Requires vite installed locally. About 9k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
Vite Patterns Build tool and dev server patterns for Vite 8+ projects. Covers configuration, environment variables, proxy setup, library mode, dependency pre-bundling, and common production pitfalls. When to Use Configuring vite.config.ts or vite.config.js Setting up environment variables or .env files Configuring dev server proxy for API backends Optimizing build output (chunks, minification, assets) Publishing libraries with build.lib Troubleshooting dependency pre-bundling or CJS/ESM interop Debugging HMR, dev server, or build errors Choosing or ordering Vite plugins How It Works Dev mode serves source files as native ESM — no bundling. Transforms happen on-demand per module request, which is why cold starts are fast and HMR is precise. Build mode uses Rolldown (v7+) or Rollup (v5–v6) to bundle the app for production with tree-shaking, code-splitting, and Oxc-based minification. Dependency pre-bundling converts CJS/UMD deps to ESM once via esbuild and caches the result under nodemodules/.vite, so subsequent starts skip the work. Plugins share a unified interface across dev and build — the same plugin object works for both the dev server's on-demand transforms and the production pipeline. Environment variables are statically inlined at build time. VITE-prefixed vars become public constants in the bundle; everything unprefixed is invisible to client code. Examples Config Structure Basic Config Conditional Config Key Config Options Key Default Description ----- --------- ------------- root '.' Project root (where index.html lives) base '/' Public base path for deployed assets envPrefix 'VITE' Prefix for client-exposed env vars build.outDir 'dist' Output directory build.minify 'oxc' Minifier ('oxc', 'terser', or false) build.sourcemap false true, 'inline', or 'hidden' Plugins Essential Plugins Most plugin needs are covered by a handful of well-maintained packages. Reach for these before writing your own. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/vite-patterns--1cd212