skills.rest
trudyan141
trudyan141COMMUNITY
Explore all skills by this author →
GitHub

vite-expert

Diagnose and optimize Vite configurations, HMR performance, and production builds.

3|Updated Jan 15, 2026
Search Tags:#code splitting#vite#bundling#build optimization#esbuild#hmr#frontend tooling
One-click install
npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill vite-expert-trudyan141
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite-expert
Source: https://github.com/trudyan141/my-antigravity-agents-kit/tree/main/templates/.agent/skills/vite-expert
Command: npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill vite-expert-trudyan141

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Vite projects often suffer from slow dev server startup, broken HMR, oversized bundles, and misconfigured SSR or plugin setups. This Skill provides expert-level diagnosis and fixes for these bundling issues using proven configuration patterns and troubleshooting playbooks. ## Core Features & Use Cases - Build Optimization: Configure manual chunking, minification, code splitting, and bundle analysis to reduce production bundle sizes. - Dev Server & HMR Tuning: Optimize dependency pre-bundling, file watching, warmup files, and proxy configuration for faster development feedback loops. - Problem Playbooks: Step-by-step diagnosis and fixes for common issues like pre-bundling slowdowns, HMR failures, module resolution errors, and SSR build problems. - Use Case: Your Vite dev server takes 30 seconds to start and hot reload triggers full page refreshes. Invoke this Skill to analyze your vite.config.js, identify problematic dependencies, and apply optimizeDeps and HMR fixes. ## Quick Start Use the vite-expert skill to analyze my vite.config.js and fix the slow dev server startup and broken hot module replacement.

Frequently Asked Questions about vite-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix slow Vite dev server startup?▼

Slow startup usually comes from dependency pre-bundling issues. Add problematic packages to optimizeDeps.include, exclude large libraries via optimizeDeps.exclude, and clear the cache with rm -rf node_modules/.vite before restarting.

How to reduce Vite production bundle size?▼

Configure manualChunks in build.rollupOptions.output to split vendor, framework, and feature code into separate chunks. Use dynamic imports for code splitting and run vite-bundle-analyzer to identify large dependencies.

Why is Vite HMR not working and triggering full page reloads?▼

HMR failures typically stem from circular dependencies or missing accept handlers. Add import.meta.hot.accept() in your modules, refactor circular imports, and configure server.warmup.clientFiles for frequently edited files.

Does Vite support environment variables like process.env?▼

Vite exposes client-side variables through import.meta.env, not process.env. Variables must be prefixed with VITE_ to be exposed, or you can map custom values through the define option in vite.config.

Can I migrate a Create React App project to Vite?▼

Yes, migration involves replacing CRA scripts with Vite, mapping REACT_APP_ variables to VITE_ prefixed ones, configuring the base public path, and setting up resolve aliases for absolute imports.

When should I not use this Vite skill?▼

Use a different expert for general build tool comparisons, runtime performance unrelated to bundling, framework-specific issues like React rendering, or CI/CD deployment pipelines. This Skill focuses strictly on Vite configuration and bundling.

Related Skills

Explore More Software Engineering Skills→
HouseGarofaloHouseGarofalo
3

vite

Build frontend applications with Vite for React, Vue, and Svelte.

Official
Intermediate
atemagueratemaguer

expo-deployment

Deploy Expo applications to iOS, Android, and web release targets.

Community
Intermediate
Pravin-surawasePravin-surawase
5

react-validation

Run build, lint, type-check, and test checks on React frontend changes.

Community
Intermediate
NagyViktNagyVikt
2

turbopack

Configure Turbopack settings and migrate Webpack loaders in Next.js 16 builds.

Community
Advanced