vite-config-generator_skill

Overview

This skill generates production-ready Vite configuration files for React, Vue, or vanilla JavaScript projects. It produces a complete vite.config.ts or vite.config.js tailored to the chosen framework, including plugins, path aliases, dev server settings, and build optimizations. The output targets Vite 5.x standards and is ready to drop into a project.

How this skill works

When invoked, the skill selects the appropriate plugin set (React, Vue, or none) and composes a valid Vite configuration file with resolve aliases, server options, and build settings. It adds TypeScript-friendly output when requested and includes recommended optimizations like code splitting, sourcemaps, and production flags. The generated file is syntactically correct and follows Vite 5.x API patterns.

When to use it

• Starting a new frontend project with React, Vue, or vanilla JS and you need a Vite config.
• Converting an existing project to Vite and you want sensible defaults and optimizations.
• Generating TypeScript-compatible vite.config.ts with path aliases.
• Creating a reproducible dev server setup across the team.
• Needing a quick, production-ready config for CI or deployment builds.

Best practices

• Choose vite.config.ts for TypeScript projects to get type checking and editor tooling.
• Define path aliases (e.g., '@' -> ./src) to simplify imports and refactors.
• Enable sourcemaps in development; enable only what you need in production to reduce output size.
• Configure server.port and server.open for consistent local development behavior.
• Add only necessary plugins to keep cold-start fast and avoid plugin conflicts.

Example use cases

• Create vite config for React TypeScript with path aliases and react plugin.
• Generate a Vue 3 vite.config.ts with Vue plugin, alias, and HMR-ready server settings.
• Produce a minimal vite.config.js for a vanilla JS app with optimized build settings.
• Generate a config that enables sourcemaps and sets outDir to 'dist' for CI builds.