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.
SKILL.md
Full skill instructions
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