vite skill for Claude Code: install and configure Vite

Q: What configuration guidance does the skill provide?

It recommends a TypeScript `vite.config.ts` file and ESM instead of CommonJS. The examples cover `defineConfig`, aliases, proxies, and build settings.

What vite does

The skill covers Vite configuration with vite.config.ts, defineConfig, and loadEnv. It also explains import.meta.glob, ?raw and ?url asset queries, import.meta.env, and the HMR API. Plugin guidance includes Vite-specific hooks, virtual modules, and plugin ordering.

Its build material covers library mode, SSR middleware mode, ssrLoadModule, the JavaScript API, and the Environment API. A separate section describes Vite 8 with the Rolldown bundler, the Oxc transformer, and related config changes. The quick reference includes vite, vite build, vite preview, and vite build --ssr, plus Vue and React plugins.

The skill recommends vite.config.ts and ESM, so a project built around CommonJS configuration deserves a check before you apply these recommendations.

What it helps with

configure vite.config.ts for an application
add and order Vite plugins
build a library or SSR application
migrate a config to Rolldown
handle asset imports and environment variables

Example prompts for the agent

Configure `vite.config.ts` with the `@` alias and an `/api` proxy.
Show me how to build this application for SSR with `vite build --ssr`.
Explain how to migrate this Vite 8 configuration to Rolldown and Oxc.

How to install vite

1Skills CLI (Vercel)

npx skills add antfu/skills --skill vite -a claude-code

2Manually: put the files in place

~/.claude/skills/vite/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vite/

1Skills CLI (Vercel)

npx skills add antfu/skills --skill vite -a codex

2Manually: put the files in place

.agents/skills/vite/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add antfu/skills --skill vite -a cursor

2Manually: put the files in place

.cursor/skills/vite/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install antfu/skills vite

2Manually: put the files in place

.github/skills/vite/SKILL.md

1Skills CLI (Vercel)

npx skills add antfu/skills --skill vite -a gemini-cli

2Platform CLI

gemini skills install https://github.com/antfu/skills --path skills/vite

Manually: put the files in place

.devin/skills/vite/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add antfu/skills --skill vite -a opencode

From the same set8

The whole set →

vitest Anthony Fu This skill guides work with Vitest tests, mocks, coverage, filtering, and fixtures. Use it when setting up tests or checking how Vitest fits a Vite project. Claude Code CX Codex Cursor +1 43,600installs vue Anthony Fu This skill guides agents through Vue 3 Composition API, script setup, and reactivity. Use it when writing Vue SFCs or built-in component flows. Claude Code CX Codex Cursor +1 35,800installs nuxt Anthony Fu This skill equips your AI agent with Nuxt 5 knowledge: server-side rendering, file-based routing, auto-imports, and Nitro v3 deployment. Use it when building Nuxt apps, server routes, useFetch calls, middleware, or hybrid rendering. Claude Code CX Codex Cursor +1 24,100installs pnpm Anthony Fu Skill for working with pnpm, a Node.js package manager with strict dependency resolution. Use it when your project relies on workspaces, version catalogs, patches, or dependency overrides. Claude Code CX Codex Cursor +1 22,300installs pinia Anthony Fu Pinia skill adds reference documentation to Claude Code for the official Vue state management library. Use it when defining stores, managing state, getters, and actions in Vue apps. Claude Code CX Codex Cursor +1 19,700installs unocss Anthony Fu A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it. Claude Code CX Codex Cursor +1 16,000installs nitro Anthony Fu A skill with Nitro v3 references: file-based routing, route rules, caching, storage and deployment presets. Use it when the agent edits nitro.config or writes H3 handlers. Claude Code CX Codex Cursor +1 2,600installs

Questions about vite

What does the vite skill do?

It helps with Vite configuration, the plugin API, SSR, library builds, and asset imports. It also covers the Vite 8 migration to Rolldown and Oxc.

What configuration guidance does the skill provide?

It recommends a TypeScript vite.config.ts file and ESM instead of CommonJS. The examples cover defineConfig, aliases, proxies, and build settings.

Source text

SKILL.md · MIT

---
name: vite
description: 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.
metadata:
  author: Anthony Fu
  version: "2026.9.25"
  source: Generated from https://github.com/vitejs/vite, scripts at https://github.com/antfu/skills
---

# Vite

> Based on Vite v8.3.1 (Rolldown-powered), generated at 2026-09-25. 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](references/core-config.md) |
| Features | `import.meta.glob`, asset queries (`?raw`, `?url`), `import.meta.env`, HMR API | [core-features](references/core-features.md) |
| Plugin API | Vite-specific hooks, virtual modules, plugin ordering | [core-plugin-api](references/core-plugin-api.md) |

## Build & SSR

| Topic | Description | Reference |
|-------|-------------|-----------|
| Build & SSR | Library mode, SSR middleware mode, `ssrLoadModule`, JavaScript API | [build-and-ssr](references/build-and-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| Environment API | Vite 6+ multi-environment support, custom runtimes | [environment-api](references/environment-api.md) |
| Rolldown Migration | Vite 8 changes: Rolldown bundler, Oxc transformer, config migration | [rolldown-migration](references/rolldown-migration.md) |

## Quick Reference

### CLI Commands

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

### Common Config

```ts
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

vite — Claude Code skill: what it does, how to install

What vite does

What it helps with

Example prompts for the agent

How to install vite

From the same set8

Similar

Questions about vite

Source text

See also