vite-react-best-practices

Comprehensive React and Vite SPA performance, architecture, and deployment guidelines. Use this skill when building, reviewing, or refactoring React applications built with Vite (SPA). Covers Vite-specific build configurations, static hosting requirements, and core React performance patterns.

Vite React Best Practices

A senior-level guide for building production-ready React Single Page Applications (SPAs) with Vite.

When to Apply

Reference these guidelines when:

Setting up a new Vite + React project
Configuring build pipelines and CI/CD for SPAs
Troubleshooting production build or caching issues
Refactoring React components for performance

Rule Categories

1. Vite SPA Deployment (CRITICAL)

Static Rewrites - Mandatory for client-side routing.
Caching Strategy - Immutable assets, no-cache index.html.
Build Validation - Preview before push.
Environment Variables - VITE_ prefix and security.

2. React Core Performance

Route Splitting - Lazy load pages.
Server State - Use React Query/SWR.
Memoization - When to use useMemo/useCallback.
Image Optimization - CLS prevention.

3. Architecture & Cleanup

Colocation - Feature-based structure.
Anti-Patterns: Import from Dist - Avoid bundling twice.
Troubleshooting - Common Vite fixes.

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md