React and Vite performance optimization guidelines. Use when writing, reviewing, or optimizing React components built with Vite. Triggers on tasks involving Vite configuration, build optimization, code splitting, lazy loading, HMR, bundle size, or React performance.
Detected risks:
A performance optimization guide for React applications built with Vite, organized as 23 rules across six prioritized categories. The categories, each with a naming prefix, are Build Optimization (build-, critical), Code Splitting (split-, critical), Development (dev-, high), Asset Handling (asset-, high), Environment Config (env-, medium), and Bundle Analysis (bundle-, medium). Build rules cover manual vendor chunking, minification with OXC (the default) or Terser, targeting modern browsers via baseline-widely-available, per-environment sourcemaps, ESM tree shaking, gzip and Brotli compression, and content-based asset hashing for cache busting. Code splitting rules cover route-based splitting with React.lazy(), strategic Suspense boundary placement, dynamic import() for heavy components, lazy loading non-critical components, and prefetch hints on hover, idle, or viewport. Development rules address optimizeDeps dependency pre-bundling for faster starts, React Fast Refresh, and HMR server configuration. Asset rules cover image optimization and lazy loading, importing SVGs as React components with SVGR, web font loading strategy, and choosing between the public directory and JavaScript imports. Environment rules cover the VITE_ prefix for client-exposed variables, mode-specific env files, and never exposing secrets in client code. Bundle analysis recommends rollup-plugin-visualizer. The guide ships concrete starting configurations, including a recommended vite.config.ts with a path alias, a modern build target, manual vendor chunks for react and react-dom, optimizeDeps includes, and HMR overlay settings, plus examples for route-based splitting and typed environment variables via an ImportMetaEnv interface. Each rule has a dedicated file under rules/ for detailed explanations and code, and a fully expanded reference is compiled in AGENTS.md. Apply it when configuring Vite, implementing code splitting, reducing bundle size, tuning dev-server performance, or handling assets and environment variables.
23 rules across six categories — Build Optimization, Code Splitting, Development, Asset Handling, Environment Config, and Bundle Analysis — each category tagged with a naming prefix like build- or split-.
Build Optimization and Code Splitting are both marked CRITICAL, followed by Development and Asset Handling (HIGH), then Environment Config and Bundle Analysis (MEDIUM).
Use React.lazy() to dynamically import page components such as Home, Dashboard, and Settings, then wrap them in a Suspense boundary with a fallback so each route becomes its own chunk.
Prefix client-exposed variables with VITE_, use mode-specific env files, and never place secrets in client code; the variables can be typed via an ImportMetaEnv interface.
The bundle-visualizer rule recommends rollup-plugin-visualizer, and the build config sets a chunkSizeWarningLimit and manual vendor chunks to help keep bundles in check.
Quick Setup:
.claude/skills/Repository
asyrafhussin/agent-skills