Skip to main content
affpapa.org
RU EN
skill CX Codex

vite · uni-helper — Claude Code skill: config, plugins, builds

A Vite 6.x skill that walks your agent through config files, plugin setup, the dev server and production builds.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add uni-helper/skills --skill vite -a claude-code
Open on GitHub

What vite does

The skill is split into reference files, and the agent pulls the one that matches your question. Core covers defineConfig, conditional and async configs, CLI commands, TypeScript, JSX, CSS and HTML handling, plus adding and ordering plugins.

Feature references go into CSS modules and pre-processors, static assets, import.meta.glob, .env files and modes, the HMR client API, web workers and dependency pre-bundling. Build and advanced sections handle production builds, library mode, SSR, the JavaScript API, the Plugin API, performance and backend integration.

It is generated against Vite 6.x. If your project sits on an older major, some guidance will not match what you see in the terminal — check the version in package.json before you follow it. Everything installs through npx skills add.

What it helps with

  • write a Vite config with per-mode branches
  • add a plugin and get the ordering right
  • set up CSS modules and pre-processors
  • wire up env variables and build modes
  • build a library with proper package exports

Example prompts for the agent

  • Set up vite.config.ts for dev and production modes
  • Add this plugin to Vite and explain why it must run before the others
  • Build the project as a library with ESM and CJS exports

How to install vite

1Skills CLI (Vercel)

npx skills add uni-helper/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/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vite

How do I install the vite skill in Claude?

Run npx skills add uni-helper/skills --skill vite -a claude-code. The skill lands at ~/.claude/skills/vite/SKILL.md.

What does the vite skill do?

It gives the agent reference docs on Vite config, CLI, plugins, CSS, assets, HMR, production builds, SSR and the Plugin API, so answers come from the docs rather than from memory.

Which Vite version is the skill based on?

Vite 6.x. On older majors some of the advice will not match how your project behaves.

Source text

SKILL.md · MIT 
---
name: vite
description: Vite next-generation frontend build tool with fast HMR and optimized builds. Use when configuring Vite, adding plugins, working with dev server, or building for production.
metadata:
  author: Anthony Fu
  version: "2026.1.28"
  source: Generated from https://github.com/vitejs/vite, scripts located at https://github.com/antfu/skills
---

Vite is a modern build tool for frontend development featuring instant server start with native ES modules, lightning-fast HMR, and optimized production builds using Rolldown/Rollup. It supports TypeScript, JSX, CSS pre-processors out of the box and has a rich plugin ecosystem.

> The skill is based on Vite 6.x, generated at 2026-01-28.

## Core

| Topic | Description | Reference |
|-------|-------------|-----------|
| Configuration | Config file setup, defineConfig, conditional and async configs | [core-config](references/core-config.md) |
| CLI Commands | Dev server, build, preview commands and options | [core-cli](references/core-cli.md) |
| Core Features | TypeScript, JSX, CSS, HTML processing, JSON handling | [core-features](references/core-features.md) |
| Using Plugins | Adding, configuring, and ordering plugins | [core-plugins](references/core-plugins.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| CSS Handling | CSS modules, pre-processors, PostCSS, Lightning CSS | [features-css](references/features-css.md) |
| Static Assets | Asset imports, public directory, URL handling | [features-assets](references/features-assets.md) |
| Glob Import | import.meta.glob, dynamic imports, batch loading | [features-glob-import](references/features-glob-import.md) |
| Environment Variables | .env files, modes, import.meta.env constants | [features-env](references/features-env.md) |
| HMR API | Hot Module Replacement client API | [features-hmr](references/features-hmr.md) |
| Web Workers | Worker imports and configuration | [features-workers](references/features-workers.md) |
| Dependency Pre-Bundling | optimizeDeps, caching, monorepo setup | [features-dep-bundling](references/features-dep-bundling.md) |

## Build

| Topic | Description | Reference |
|-------|-------------|-----------|
| Production Build | Build options, browser targets, multi-page apps | [build-production](references/build-production.md) |
| Library Mode | Building libraries with proper package exports | [build-library](references/build-library.md) |
| SSR | Server-side rendering setup and configuration | [build-ssr](references/build-ssr.md) |

## Advanced

| Topic | Description | Reference |
|-------|-------------|-----------|
| JavaScript API | createServer, build, preview programmatic APIs | [advanced-api](references/advanced-api.md) |
| Plugin API | Creating Vite plugins, hooks, virtual modules | [advanced-plugin-api](references/advanced-plugin-api.md) |
| Performance | Optimization tips for dev server and builds | [advanced-performance](references/advanced-performance.md) |
| Backend Integration | Integrating Vite with traditional backends | [advanced-backend](references/advanced-backend.md) |

© Anthony Fu · MIT · uni-helper/skills

Similar skills

Everything for Frontend and UI →

vite by other authors comes first.

vite Anthony Fu This skill covers Vite configuration, plugin development, SSR builds, and the Vite 8 move to Rolldown. Use it with vite.config.ts work. CX Codex +1 39,900installs vite-patterns affaan-m This skill guides Vite configuration, plugins, HMR, environment variables, and builds. Use it when working with vite.config.ts or a Vite project. CX Codex +1 4,800installs react-vite-best-practices agent-skills A skill with 23 rules for optimizing React apps built with Vite: build config, code splitting, HMR, assets, env variables and bundle analysis. Useful when an agent writes or reviews components. CX Codex +1 2,900installs react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. CX Codex +1 5,500installs vite-bundle-optimization patterns.dev A skill with bundle and build optimization patterns for Vite + React. Useful when builds drag or chunks come out larger than expected. CX Codex +1 667installs typescript-vite-tailwind-cursorrules-prompt-file PatrickJS A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind. Useful when you want the agent's output to stay predictable. ★ 41,011repo stars feature-sliced-design feature-sliced This skill helps organize frontend code with Feature-Sliced Design and check import boundaries. Use it when creating or migrating a project. CX Codex +1 23,600installs

From the same set4

uni-app A skill that feeds your agent a structured uni-app reference: components, APIs and build rules for iOS, Android, HarmonyOS, web and mini-programs. CX Codex +1 2,000installs uni-helper A skill reference for the uni-helper ecosystem: Vite plugins, libraries and utilities for uni-app. Useful when your agent writes uni-app code. CX Codex +1 794installs vue Guides agent code generation for Vue components and reactivity patterns. Helpful when writing composables or using script setup. CX Codex +1 706installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor