Guides configuration, plugin development, and SSR setup for Vite, including Vite 8 Rolldown migration.
Install
mkdir -p .claude/skills/vite && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1093" && unzip -o skill.zip -d .claude/skills/vite && rm skill.zipInstalls to .claude/skills/vite
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Configure vite.config.ts with TypeScript
- →Implement custom Vite plugins
- →Set up SSR and library mode builds
- →Manage environment variables and aliases
- →Migrate projects to Vite 8 and Rolldown
How it works
It provides configuration patterns and API usage guidance based on Vite's native ESM architecture and the Rolldown bundler.
Inputs & outputs
When to use vite
- →Configure vite.config.ts for complex projects
- →Develop custom Vite plugins
- →Migrate to Vite 8/Rolldown
- →Setup library mode or SSR apps
About this skill
Vite
Based on Vite 8 beta (Rolldown-powered). Vite 8 uses Rolldown bundler and Oxc transformer.
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
When not to use it
- →When using CommonJS-only dependencies without ESM support
- →When the project requires legacy build tools like Webpack
Limitations
- →Migration to Vite 8 requires compatibility with Rolldown and Oxc
- →Complex plugin hooks require deep knowledge of the Vite lifecycle
How it compares
It focuses on modern Vite 8+ standards and ESM-first practices rather than legacy build configurations.
Compared to similar skills
vite side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vite (this skill) | 7 | 5mo | Review | Advanced |
| web-games | 11 | 6mo | No flags | Intermediate |
| pwa-development | 9 | 4mo | Caution | Intermediate |
| webf-infinite-scrolling | 2 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antfu
View all by antfu →You might also like
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
pwa-development
alinaqi
Progressive Web Apps - service workers, caching strategies, offline, Workbox
webf-infinite-scrolling
openwebf
Create high-performance infinite scrolling lists with pull-to-refresh and load-more capabilities using WebFListView. Use when building feed-style UIs, product catalogs, chat messages, or any scrollable list that needs optimal performance with large datasets.
js-hoist-regexp
TheOrcDev
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
javascript-async-dom
sraloff
Best practices for Fetch API, event delegation, and DOM manipulation.
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.