About

Imported from terminalskills/skills (skills/vite/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill vite. Copyright stays with the author (Apache-2.0).

Vite

Name: vite
Author: terminalskills

Overview

Vite is a next-generation frontend build tool providing instant dev server startup via native ES modules and optimized Rollup-based production builds. It supports React, Vue, Svelte, and vanilla TypeScript projects with advanced bundling strategies, plugin extensibility, and library mode.

Instructions

When setting up a project, create vite.config.ts with the appropriate framework plugin (@vitejs/plugin-react, @vitejs/plugin-vue), configure resolve.alias with @ mapping to src/, and set environment variables with VITE_ prefix.
When configuring the dev server, set up API proxying with server.proxy, enable HTTPS with @vitejs/plugin-basic-ssl, and use server.watch polling for containers or VMs.
When optimizing builds, configure manual chunks with build.rollupOptions.output.manualChunks for vendor splitting, enable CSS code splitting, and set build.target for browser compatibility.
When creating plugins, use the Rollup-compatible plugin API with resolveId, load, and transform hooks, and leverage virtual modules with the virtual: prefix.
When building libraries, configure build.lib with entry point and output formats (es, cjs, umd), externalize peer dependencies, and use vite-plugin-dts for TypeScript declaration generation.
When migrating from Webpack, replace webpack.config.js with vite.config.ts, swap loaders for Vite plugins, and update REACT_APP_* env vars to VITE_*.
When integrating testing, use Vitest which shares Vite config and provides instant HMR for tests.

Examples

Example 1: Migrate a Create React App project to Vite

User request: "Convert my CRA project to use Vite instead"

Actions:

Install Vite and @vitejs/plugin-react, remove react-scripts
Create vite.config.ts with React plugin and path aliases
Rename REACT_APP_* environment variables to VITE_*
Update index.html to reference the entry module directly

Output: A Vite-powered React project with faster dev startup and HMR.

Example 2: Configure optimized production build

User request: "Set up Vite build with vendor chunk splitting and source maps for Sentry"

Actions:

Configure build.rollupOptions.output.manualChunks to separate vendor libraries
Enable build.sourcemap for error monitoring integration
Set build.target appropriate to browser support requirements
Add build.assetsInlineLimit tuning for small asset optimization

Output: An optimized production build configuration with proper chunk splitting and debugging support.

Guidelines

Always use import.meta.env.VITE_* for client-exposed env vars, never process.env.
Configure resolve.alias with @ prefix mapping to src/ for clean imports.
Split vendor chunks manually when default chunking produces too many small files.
Use build.target: "esnext" for modern-only apps, @vitejs/plugin-legacy for legacy browser support.
Enable build.sourcemap in production for error monitoring tools.
Keep vite.config.ts clean by extracting complex plugin configs into separate files.
Use optimizeDeps.include to pre-bundle problematic dependencies that break during dev.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-vite/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-vite.ocm.jsonjson

{
  "ocm": "1",
  "id": "terminalskills-skills-vite",
  "kind": "skill",
  "name": "vite",
  "description": "Assists with configuring and using Vite as a frontend build tool for modern web applications. Use when setting up dev servers, optimizing production builds, configuring plugins, migrating from Webpack or CRA, or building component libraries. Trigger words: vite, build tool, HMR, hot module replacement, vite config, rollup, bundling.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "vite",
      "build-tool",
      "bundler",
      "frontend",
      "hmr",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Assists with configuring and using Vite as a frontend build tool for modern web applications. Use when setting up dev servers, optimizing production builds, configuring plugins, migrating from Webpack or CRA, or building component libraries. Trigger words: vite, build tool, HMR, hot module replacement, vite config, rollup, bundling."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/vite/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/vite/SKILL.md",
      "key": "terminalskills/skills/skills/vite/SKILL.md"
    },
    "compatibility": "Requires Node.js 16+",
    "license": "Apache-2.0"
  },
  "instructions": "# Vite\n\n## Overview\n\nVite is a next-generation frontend build tool providing instant dev server startup via native ES modules and optimized Rollup-based production builds. It supports React, Vue, Svelte, and vanilla TypeScript projects with advanced bundling strategies, plugin extensibility, and library mode.\n\n## Instructions\n\n- When setting up a project, create `vite.config.ts` with the appropriate framework plugin (`@vitejs/plugin-react`, `@vitejs/plugin-vue`), configure `resolve.alias` with `@` mapping to `src/`, and set environment variables with `VITE_` prefix.\n- When configuring the dev ",
  "cost": {
    "context_tokens": 803
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-vite/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.