home / skills / ehtbanton / claudeskillsrepo / vite-config-generator

vite-config-generator skill

safe

This skill generates complete Vite configuration files for React, Vue, or vanilla projects with plugins, aliases, and dev/build optimizations.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill vite-config-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.2 KB

---
name: vite-config-generator
description: Generate Vite configuration files for fast frontend development with React, Vue, or vanilla JavaScript projects. Triggers on "create vite config", "generate vite configuration", "vite setup for", "vite.config".
---

# Vite Config Generator

Generate production-ready Vite configuration files with plugins, build optimization, and development server settings.

## Output Requirements

**File Output:** `vite.config.ts` or `vite.config.js`
**Format:** Valid Vite configuration
**Standards:** Vite 5.x

## When Invoked

Immediately generate a complete Vite configuration with appropriate plugins, alias paths, build settings, and dev server configuration.

## Configuration Template

```typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});
```

## Example Invocations

**Prompt:** "Create vite config for React TypeScript with path aliases"
**Output:** Complete `vite.config.ts` with React plugin, aliases, and optimizations.

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.

FAQ

Can this produce TypeScript or JavaScript config files?

Yes. It can generate either vite.config.ts for TypeScript projects or vite.config.js for plain JavaScript projects.

Which Vite version does the config target?

The generated configuration follows Vite 5.x APIs and patterns to ensure compatibility with that major version.