vite

Vite configuration, plugins, optimization, HMR, and build customization.

509 stars

bya5c-ai

View on GitHub Installation ↓

Best use case

vite is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Vite configuration, plugins, optimization, HMR, and build customization.

Teams using vite should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/vite/SKILL.md --create-dirs "https://raw.githubusercontent.com/a5c-ai/babysitter/main/library/specializations/web-development/skills/vite/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/vite/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How vite Compares

Feature / Agent	vite	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Vite configuration, plugins, optimization, HMR, and build customization.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Vite Skill

Expert assistance for configuring and optimizing Vite builds.

## Capabilities

- Configure Vite for various frameworks
- Create and use plugins
- Optimize builds
- Configure dev server
- Handle environment variables

## Configuration

```typescript
// vite.config.ts
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,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
});
```

## Target Processes

- frontend-build-setup
- development-environment
- build-optimization

Related Skills

vitest

509

from a5c-ai/babysitter

Vitest configuration, mocking, coverage, snapshot testing, and performance.

process-builder

509

from a5c-ai/babysitter

Scaffold new babysitter process definitions following SDK patterns, proper structure, and best practices. Guides the 3-phase workflow from research to implementation.

Workflow & Productivity

babysitter

509

from a5c-ai/babysitter

Orchestrate via @babysitter. Use this skill when asked to babysit a run, orchestrate a process or whenever it is called explicitly. (babysit, babysitter, orchestrate, orchestrate a run, workflow, etc.)