Vite

From the author

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

— the description by Anthony Fu

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides comprehensive reference material for Vite 8, a frontend build tool that utilizes the Rolldown bundler and Oxc transformer. It covers core configuration patterns, the plugin API, library mode, and SSR primitives. It also includes specific guidance for migrating to Vite 8, managing multi-environment setups, and utilizing the JavaScript API for programmatic control over build and development processes.

What it does

Provides patterns for vite.config.ts including conditional and asynchronous configurations.
Explains the Rolldown migration process for Vite 8 projects.
Details the Vite plugin API for creating custom hooks and virtual modules.
Offers guidance on library mode, SSR middleware, and multi-page application setups.
Documents the JavaScript API for programmatic server creation and build execution.
Lists official plugins for framework support including Vue and React.

When to use it

When configuring a new or existing Vite 8 project.
When migrating a project from previous Vite versions to Vite 8.
When building libraries or SSR applications using Vite primitives.
When developing custom Vite plugins or integrating multi-environment support.
When needing to programmatically control the Vite build or dev server via the JavaScript API.

Advantages

Centralized reference for Vite 8 specific changes like Rolldown and Oxc.
Clear examples for complex configurations like proxying and environment variables.
Provides structured guidance for library distribution and multi-page entry points.
Includes TypeScript intellisense patterns for configuration files.

Usage examples

“How do I configure a proxy in my vite.config.ts?”: The skill provides a code snippet showing the server.proxy configuration object with target, changeOrigin, and path rewrite options.
“Show me how to set up a library build in Vite 8.”: The skill provides a configuration example using the build.lib option, including entry points and rolldownOptions for external dependencies.
“How do I access environment variables inside my Vite config?”: The skill demonstrates using the loadEnv function within a defineConfig function to access variables from .env files during configuration resolution.
“What is the new way to define entry points in Vite 8?”: The skill explains the top-level input option which replaces previous entry point configurations for build, SSR, and dependency optimization.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/antfu/vite/download
Unzip it into the cross-client skills folder of your project:
```
mkdir -p .agents/skills && unzip vite.zip -d .agents/skills
```

Documentation by Anthony Fu

Based on Vite v8.3.5 (Rolldown-powered), generated at 2026-11-05. Vite 8 uses the Rolldown bundler and the Oxc transformer instead of esbuild + Rollup.

Vite is a next-generation frontend build tool with fast dev server (native ESM + HMR) and optimized production builds.

Preferences

Use TypeScript: prefer vite.config.ts
Always use ESM, avoid CommonJS

Core

Topic	Description	Reference
Configuration	`vite.config.ts`, `defineConfig`, conditional configs, `loadEnv`	core-config
Features	`import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API	core-features
Plugin API	Vite-specific hooks, virtual modules, plugin ordering	core-plugin-api

Build & SSR

Topic	Description	Reference
Build & SSR	Library mode, SSR middleware mode, `ssrLoadModule`, JavaScript API	build-and-ssr

Advanced

Topic	Description	Reference
Environment API	Vite 6+ multi-environment support, custom runtimes	environment-api
Rolldown Migration	Vite 8 changes: Rolldown bundler, Oxc transformer, config migration	rolldown-migration

Quick Reference

CLI Commands

vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build

Common Config

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

Official Plugins

@vitejs/plugin-vue - Vue 3 SFC support
@vitejs/plugin-vue-jsx - Vue 3 JSX
@vitejs/plugin-react - React with Oxc/Babel
@vitejs/plugin-react-swc - React with SWC
@vitejs/plugin-legacy - Legacy browser support

Files

ATTRIBUTION.mdAdded by AutoGineer889 B
GENERATION.md134 B
LICENSELicence file added by AutoGineer1.1 KiB
SKILL.md2.5 KiB
references/build-and-ssr.md3.7 KiB
references/core-config.md4.0 KiB
references/core-features.md5.1 KiB
references/core-plugin-api.md6.0 KiB
references/environment-api.md4.4 KiB
references/rolldown-migration.md5.3 KiB

references/core-features.md

name: vite-features description: Vite-specific import patterns and runtime features

Vite Features

Vite 8: TS/JSX transforms run on Oxc (oxc option, not esbuild), dep pre-bundling on Rolldown, and CSS minification on Lightning CSS by default. esbuild/rollupOptions still work as deprecated aliases.

Glob Import

Import multiple modules matching a pattern:

const modules = import.meta.glob('./dir/*.ts')
// { './dir/foo.ts': () => import('./dir/foo.ts'), ... }

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

Eager Loading

const modules = import.meta.glob('./dir/*.ts', { eager: true })
// Modules loaded immediately, no dynamic import

Named Imports

const modules = import.meta.glob('./dir/*.ts', { import: 'setup' })
// Only imports the 'setup' export from each module

const defaults = import.meta.glob('./dir/*.ts', { import: 'default', eager: true })

Multiple Patterns

const modules = import.meta.glob(['./dir/*.ts', './another/*.ts'])

Negative Patterns

const modules = import.meta.glob(['./dir/*.ts', '!**/ignored.ts'])

Custom Queries

const svgRaw = import.meta.glob('./icons/*.svg', { query: '?raw', import: 'default' })
const svgUrls = import.meta.glob('./icons/*.svg', { query: '?url', import: 'default' })

Case-Insensitive Matching (Vite 8)

// matches Module.js, module.js, MODULE.js
const modules = import.meta.glob('./dir/module*.js', { caseSensitive: false })

Asset Import Queries

URL Import

import imgUrl from './img.png'
// Returns resolved URL: '/src/img.png' (dev) or '/assets/img.2d8efhg.png' (build)

Explicit URL

import workletUrl from './worklet.js?url'

Raw String

import shaderCode from './shader.glsl?raw'

Inline/No-Inline

import inlined from './small.png?inline'    // Force base64 inline
import notInlined from './large.png?no-inline'  // Force separate file

Web Workers

import Worker from './worker.ts?worker'
const worker = new Worker()

// Or inline:
import InlineWorker from './worker.ts?worker&inline'

Preferred pattern using constructor:

const worker = new Worker(new URL('./worker.ts', import.meta.url), {
  type: 'module',
})

Environment Variables

Built-in Constants

import.meta.env.MODE      // 'development' | 'production' | custom
import.meta.env.BASE_URL  // Base URL from config
import.meta.env.PROD      // true in production
import.meta.env.DEV       // true in development
import.meta.env.SSR       // true when running in server

Custom Variables

Only VITE_ prefixed vars exposed to client:

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=secret  # NOT exposed to client

console.log(import.meta.env.VITE_API_URL) // works
console.log(import.meta.env.DB_PASSWORD)  // undefined

Mode-specific Files

.env                # always loaded
.env.local          # always loaded, gitignored
.env.[mode]         # only in specified mode
.env.[mode].local   # only in specified mode, gitignored

TypeScript Support

// vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

HTML Replacement

<p>Running in %MODE%</p>
<script>window.API = "%VITE_API_URL%"</script>

CSS Modules

Any .module.css file treated as CSS module:

import styles from './component.module.css'
element.className = styles.button

With camelCase conversion:

// .my-class -> myClass (if css.modules.localsConvention configured)
import { myClass } from './component.module.css'

JSON Import

import pkg from './package.json'
import { version } from './package.json'  // Named import with tree-shaking

HMR API

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Handle update
  })
  
  import.meta.hot.dispose((data) => {
    // Cleanup before module is replaced
  })
  
  import.meta.hot.invalidate()  // Force full reload
}

WebAssembly

ESM Integration (Vite 8)

Import a .wasm file directly — Vite instantiates it and re-exposes its exports as named ESM exports. Behaves as an async module (needs top-level await):

import { add } from './add.wasm'
console.log(add(1, 2)) // 3

For TS support, enable allowArbitraryExtensions and add add.d.wasm.ts. SSR builds rely on node:fs, so this only works in Node-compatible runtimes.

Manual Initialization

import init from './example.wasm?init'
const instance = await init({ imports: { /* ... */ } })
instance.exports.test()

Chunk Import Map Optimization (Vite 8, experimental)

Set build.chunkImportMap: true to reference chunks by stable ID via an import map instead of hashed URLs. Prevents cascading cache invalidation (updating a leaf chunk no longer invalidates its importers). Requires import.meta.resolve support (use @vitejs/plugin-legacy for older browsers).

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Implement
Matt Pocock· Community
A structured workflow for implementing software tasks from specifications or tickets.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository317.5k
Source Driven Development
Addy Osmani· Community
A rigorous process for grounding code implementation in official, version-specific documentation to ensure accuracy and avoid outdated patterns.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository113.9k
Write Swift
Emil Kowalski· Community
A comprehensive guide to writing modern, safe, and performant Swift code following the language's latest idioms and concurrency models.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k
Cardputer Buddy
AnthropicOfficial
Iterate on the Cardputer-Adv MicroPython app bundle (Claude Buddy, Snake, Hello) after the device is already provisioned via m5-onboard. Use when the user wants to add a new app, push a single changed .py without re-flashing, watch device serial logs, or run a one-shot REPL command. Trigger on "add an app", "push to the cardputer", "tail the device", "run on the device", or follow-up work after /maker-setup.
Software developmentClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository46.3k
Typescript Pro
Seth Hobson· Community
An expert TypeScript persona focused on advanced typing, enterprise architecture, and strict type safety.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k
Scala Pro
Seth Hobson· Community
An expert Scala engineer persona specializing in functional programming, distributed systems, and enterprise-grade architecture.
Software developmentClaude Code
MITGitHub stars of the source repository42.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vite.zip