vite_skill

Overview

This skill configures and optimizes Vite 7 for React projects, covering dev server, build tooling, plugins, HMR, chunk splitting, the Environment API, and rolldown integration. It distills rules, example configs, and practical fixes to get a fast, reliable dev experience and production builds ready for Cloudflare Workers or static hosts. Use it to set up Vite, tune builds, manage plugins, or troubleshoot HMR and proxy issues.

How this skill works

The skill inspects Vite configuration patterns and plugin ordering, enforces ESM-style config, and recommends Vite 7-specific defaults (browser target, env prefix). It outlines plugin behaviors (@vitejs/plugin-react, @tailwindcss/vite, TanStack plugins, @cloudflare/vite-plugin), manual chunking via Rollup options, and rolldown-vite replacement steps. It also explains the Environment API and buildApp hook for multi-target builds.

When to use it

• Starting a new React project with Vite 7 and modern build targets
• Migrating to or adopting rolldown-vite for faster builds
• Configuring HMR, proxying, or server.warmup for development
• Optimizing bundle splitting and cacheable vendor chunks
• Deploying to Cloudflare Workers or producing multi-environment builds

Best practices

• Always use ESM import/export in vite.config.ts; use import.meta.url for path aliases
• Place TanStack Start or Router plugin before @vitejs/plugin-react; react() must be last among framework plugins
• Keep client-facing vars prefixed with VITE_; put secrets on the server
• Use build.rollupOptions.output.manualChunks for chunking (splitVendorChunkPlugin removed)
• Adopt rolldown-vite as a drop-in for large projects to speed builds
• Analyze bundles regularly with rollup-plugin-visualizer and set hidden sourcemaps for production

Example use cases

• Full-stack SSR app using tanstackStart(), cloudflare(), tailwindcss(), and react() in that order
• SPA with file-based routing via tanstackRouter({ autoCodeSplitting: true }) placed before react()
• Dev server behind a reverse proxy: configure server.hmr.clientPort and protocol settings
• Manual chunking to isolate react and TanStack libraries for long-term caching
• Switching to rolldown-vite by aliasing vite in devDependencies for dramatic build improvements