Vite Development

Vite Development

Optimized for Vite 8+, React 19+, TypeScript 5.5+, Vitest 2+, and modern ESM-first frontend builds.

Expert guidance for using Vite 8.0.10 as the build tool for React and other web applications with modern frontend development patterns. Documentation grounded in the official Vite docs at https://vite.dev/.

• Leverage native parallel subagent dispatch and 200k+ context windows where available.

Component Review Rubric Reference

Apply the shared Component Review Rubric before approving Vite components, then run the Vite-specific checks below.

Anti-Patterns

• Hard-coding environment-specific URLs: Builds become fragile as soon as the app moves between local, staging, and production.
• Treating plugin order as incidental: Vite plugins often transform the same files, so ordering bugs are easy to create.
• Assuming fast HMR guarantees good production output: Bundle quality and runtime behavior still need explicit review.

Verification Protocol

Before claiming "skill applied successfully":

1. Pass/fail: The Vite Development guidance is tied to a concrete route, component, screen, or design artifact. 2. Pass/fail: Component states cover loading, empty, error, success, and responsive breakpoints where applicable. 3. Pass/fail: Accessibility, visual hierarchy, and interaction behavior are reviewed against the shared component rubric. 4. Pressure-test scenario: Review the component on a narrow mobile viewport, keyboard-only path, and slow-loading state. 5. Success metric: Zero generic UI approval; every approval cites rendered behavior or source evidence.

Before and After Example

// Before
export default {
  server: { proxy: { '/api': 'http://localhost:3000' } },
};

// After
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
        },
      },
    },
  };
});

Makes the proxy configuration mode-aware and driven by typed environment input instead of hard-coded URLs.

Activation Conditions

Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

Project Setup & Configuration:

• Initializing new Vite projects
• Configuring vite.config.js with plugins
• Setting up development server with custom options
• Configuring build optimization and bundling

Performance & Optimization:

• Optimizing bundle size and code splitting
• Configuring lazy loading and dynamic imports
• Setting up asset optimization (images, CSS)
• Enabling CSS code splitting and module resolution

Development Experience:

• Configuring Hot Module Replacement (HMR)
• Setting up proxy for API calls in dev
• Environment variable handling
• Source map configuration

Plugin Ecosystem:

• Using official Vite plugins (React, Vue)
• Community plugins for specific needs
• Writing custom Vite plugins
• Configuring plugin options and hooks

---

Part 1: Project Configuration

Basic Vite Config

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'api-client': ['./src/api/client'],
        },
      },
    },
  },
});

Environment-Specific Config

// vite.config.js
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    base: mode === 'production' ? '/app-base-path/' : '/',
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  };
});

---

Part 2: Build Optimization

Code Splitting

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // React and ReactDOM
            if (id.includes('react') || id.includes('react-dom')) {
              return 'react-vendor';
            }
            // Other large libraries
            if (id.includes('axios')) {
              return 'api-lib';
            }
            return 'vendor';
          }
        },
      },
    },
  },
});

Lazy Loading Routes

// Lazy loading route components
const RecipeDetail = lazy(() => import('./pages/RecipeDetail'));
const RecipeList = lazy(() => import('./pages/RecipeList'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/recipes/:id" element={<RecipeDetail />} />
        <Route path="/recipes" element={<RecipeList />} />
      </Routes>
    </Suspense>
  );
}

---

Part 3: Development Server

Proxy Configuration

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/auth': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

HMR Configuration

// vite.config.js
export default defineConfig({
  server: {
    hmr: {
      overlay: true,
    },
    watch: {
      usePolling: true,
      interval: 100,
    },
  },
});

---

Part 4: Assets and Plugins

Image Optimization

// vite.config.js
import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 7 },
      optipng: { optimizationLevel: 7 },
      mozjpeg: { quality: 80 },
      pngquant: { quality: [0.65, 0.9], speed: 4 },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
            active: false,
          },
        ],
      },
    }),
  ],
});

---

Vite Development Best Practices

Configuration

• [ ] Use defineConfig for type-safe configuration
• [ ] Separate dev and production concerns
• [ ] Enable sourcemaps for debugging
• [ ] Configure proper base path for deployment
• [ ] Set up proxy for API during development

Build Optimization

• [ ] Implement code splitting for vendors
• [ ] Use lazy loading for heavy routes/components
• [ ] Configure manual chunks for better caching
• [ ] Optimize assets (images, fonts)
• [ ] Enable minification for production builds

Performance

• [ ] Monitor bundle size with Vite bundle analyzer
• [ ] Use tree-shaking to remove unused code
• [ ] Configure dynamic imports for better time-to-interactive
• [ ] Enable CSS code splitting for faster page loads
• [ ] Use compression middleware for production

Development

• [ ] Configure HMR for faster iteration
• [ ] Set up environment variables for different environments
• [ ] Use proxy for local API development
• [ ] Enable source maps for better debugging
• [ ] Configure clear port and open options

Common Pitfalls

• Hard-coding environment-specific URLs: Builds become fragile as soon as the app moves between local, staging, and production.
• Treating plugin order as incidental: Vite plugins can transform the same files, so ordering bugs are easy to create.
• Ignoring bundle inspection: Fast local HMR does not guarantee the production output is well-shaped.

Modern Component and Testing Examples

Server Components

export async function OrdersPanel() {
  const orders = await getOrders();
  return <OrdersTable orders={orders} />;
}

Error Boundaries

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary fallbackRender={() => <p>Could not load dashboard.</p>}>
  <Dashboard />
</ErrorBoundary>

Accessibility Testing Tools

import { axe } from 'jest-axe';

test('dialog passes axe checks', async () => {
  const { container } = render(<AccountDialog open />);
  expect(await axe(container)).toHaveNoViolations();
});

References & Resources

Documentation

• Vite 2026 Config Reference — Comprehensive Vite configuration guide
• Vite Official Excerpts - HMR Config — Hot Module Replacement configuration

Examples

• Vite Config Examples — Example Vite configurations for different use cases

Scripts

• Vite Plugin Template — Template for creating custom Vite plugins

Official Documentation

• Vite Documentation
• Vite Plugins
• Rollup Options

---

<!-- PORTABILITY:START -->

Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, Codex, and Gemini CLI.

• GitHub Copilot: keep the folder in a Copilot-visible skill or plugin path, or wrap the workflow as project instructions if the host does not support portable skill folders directly.
• Claude Code: keep the folder in a local skills directory or a compatible plugin or marketplace source.
• Codex: install or sync the folder into $CODEX_HOME/skills/<skill-name> and restart Codex after major changes.
• Gemini CLI: this repository generates a project command named /skills:vite-development from this skill. Rebuild commands with python scripts/export-gemini-skill.py vite-development and then run /commands reload inside Gemini CLI.

<!-- PORTABILITY:END -->

<!-- MCP:START -->

MCP Availability And Fallback

Preferred MCP Server: None required

• Fallback prompt: "Use the Vite Development skill without MCP. Rely on the local SKILL.md, bundled references or scripts, and manual verification. Show the exact commands, evidence, and final checks you used before concluding."
• If the current host does not expose a matching server, use the bundled references, scripts, native toolchain, and manual workflow already described in this skill.
• Treat direct local verification, rendered output, logs, tests, or screenshots as the fallback evidence path before completion.

<!-- MCP:END -->

Related Skills

• javascript-development: Use it when the workflow also needs modern JavaScript and TypeScript application code.
• react-development: Use it when the workflow also needs React component architecture and client or server boundaries.
• web-testing: Use it when the workflow also needs browser and end-to-end testing evidence.
• frontend-design: Use it when the workflow also needs UI composition and front-end design direction.

Changelog

[2026-04-25] - Version 1.2 Verification Protocol Refresh

Added

• Added a Verification Protocol section with skill-specific pass/fail checks, one pressure-test scenario, and a measurable success metric.
• Added guidance to leverage native parallel subagent dispatch and 200k+ context windows where available.
• Added or referenced the shared Component Review Rubric for frontend component review.

Changed

• Updated SKILL.md frontmatter to version: "1.2" and last_updated: 2026-04-25.
• Reframed activation guidance toward symptom -> action triggers and standardized two-stage review wording where applicable.

[2026-04-24] - Version 1.1 Refresh

Changed

• Updated the SKILL frontmatter version to 1.1 for the 2026-04-24 catalog refresh.

All notable changes to this skill will be documented in this file.

[2026-04-24] - Verification Follow-Up

Fixed

• Added the missing modern examples for Server Components, Error Boundaries, and accessibility testing tools so the framework-specific requirements are fully covered.

[2026-04-24] - Skill Refresh

Changed

• Standardized the SKILL frontmatter with version metadata, last-updated date, tags, and a concise catalog description.
• Reformatted the portability and MCP guidance with a preferred server line, a copy-paste fallback prompt, and consistent bullet lists.
• Added a catalog-standard Anti-Patterns section and refreshed the Related Skills links at the end of the skill.
• Added current-version targeting, a before-and-after example, and a Common Pitfalls section for modern Vite workflows.

[2026-04-24] - Current Version Refresh

Changed

• Updated the active Vite guidance from Vite 6+ to Vite 8.0.10 after checking the current npm package version.

Tested

• Verified current published package versions with npm view vite version and npm view @vitejs/plugin-react version.

[2026-04-04] - Cross-Client Portability Refresh

Changed

• Added a standard portability note covering GitHub Copilot, Claude Code, Codex, and Gemini CLI.
• Clarified that the core workflow does not require a dedicated MCP server and can run with local tools alone.

Tested

• Validated SKILL.md frontmatter, portability sections, and Gemini export readiness with python scripts/validate-skills.py.

[2026-03-09] - Workspace Modernization

Added

• Added a 2026-03-09 maintenance entry after reviewing the skill; the existing structure and guidance remained suitable.

[2026-02-28] — Description Rewrite & Cross-References

Changed

• Rewrote skill description to ~200 characters with clear, specific activation keywords
• Improved keyword specificity to reduce overlap with related skills

Added

• ## Related Skills cross-reference table with 2-4 related skills and "Use When" guidance

Vite Configuration Examples

Standard Vite 8 configurations for React apps with build optimization and development tooling.

React + JSX

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    open: false,
  },
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

Code Splitting and Bundling

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'api-utils': ['./src/api', './src/utils'],
        },
      },
    },
  },
});

Development Proxy (for PHP API)

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});

Environment Variables

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_URL,
          changeOrigin: true,
        },
      },
    },
    define: {
      __APP_ENV__: JSON.stringify(mode),
    },
  };
});

Vite Configuration Reference (2026)

Vite 8.0.10 configuration options and patterns relevant to React + API apps. For details see https://vite.dev/config/.

Core Configuration

server

Development server options:

• port — Server port (default 5173)
• open — Open browser on start
• proxy — Proxy backend requests during dev
• hmr — Hot Module Replacement settings

server: {
  port: 5173,
  open: true,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
    },
  },
}

build

Production build options:

• outDir — Output directory (default dist)
• sourcemap — Enable source maps (boolean/inline/hidden)
• rollupOptions — Rollup options for bundling
• minify — Minification (esbuild for JSX)

build: {
  outDir: 'dist',
  sourcemap: true,
  rollupOptions: {
    output: {
      manualChunks: {
        'react-vendor': ['react', 'react-dom'],
      },
    },
  },
}

plugins

Vite plugins array.

• Official plugins: @vitejs/plugin-react, @vitejs/plugin-vue
• Community: image optimization, compression, PWA, etc.

plugins: [
  react(),
  viteImagemin(),
],

resolve

Path resolution and aliases:

• alias — Import aliases
• extensions — File extensions to resolve

resolve: {
  alias: {
    '@': '/src',
  },
}

define

Global constants replaced at build time.

define: {
  __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
}

Environment Variables

VITE_ prefix for client-side, standard names for server-side (if using SSR). Access via import.meta.env.VITE_MY_VAR.

Best Practices

• Use defineConfig for TypeScript support (via vite/config/types).
• Proxy API calls in dev; configure base path after build.
• Enable source maps for debugging in dev; generate production maps only if needed.
• Split vendor chunks for better caching.
• Use plugins sparingly; each adds build overhead.

References

• Vite Config Docs: https://vite.dev/config/
• Vite Plugins: https://vite.dev/plugins/
• React Plugin: https://github.com/vitejs/vite-plugin-react

Vite Excerpts from Official Docs

Excerpted from official Vite 8 documentation at https://vite.dev/.

server.hmr Configuration

Configure Hot Module Replacement (HMR) connection settings.

export default defineConfig({
  server: {
    hmr: {
      protocol: 'wss',
      host: 'example.com',
      port: 443,
      overlay: false,
    },
  },
});

Client-side HMR event handling

Register a handler for custom HMR events in the client.

if (import.meta.hot) {
  import.meta.hot.on('special-update', (data) => {
    // perform custom update
  })
}

Server-side custom HMR event

Send custom HMR events from a plugin to the client.

handleHotUpdate({ server }) {
  server.ws.send({
    type: 'custom',
    event: 'special-update',
    data: {}
  })
  return []
}

Guard HMR API usage for tree-shaking

Ensure HMR-specific code is excluded from production builds.

if (import.meta.hot) {
  // HMR code
}

Filter HMR modules

Filter modules affected by an HMR update.

hotUpdate({ modules }) {
  return modules.filter(condition)
}

Plugin communication via HMR

Bilateral communication between plugin and application using environment.hot.

configureServer(server) {
  server.environments.ssr.hot.on('my:greetings', (data, client) => {
    client.send('my:foo:reply', `Hello from server! You said: ${data}`)
  })
}

Source

• Vite Docs: https://vite.dev/
• HMR API: https://vite.dev/guide/api-hmr.html
• Plugin API: https://vite.dev/guide/api-plugin.html