vite-react-best-practices
💡 Summary
This project provides comprehensive guidelines for building and optimizing React SPAs using Vite.
🎯 Target Audience
🤖 AI Roast: “A solid guide, but don’t expect it to do your coding for you.”
The README does not indicate any direct security risks, but improper handling of environment variables could expose sensitive data. Ensure to validate and sanitize all inputs and manage environment variables securely.
name: vite-react-best-practices description: 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. license: MIT metadata: author: ant-gravity version: "1.1.0"
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
Pros
- Comprehensive guidelines for Vite and React.
- Focus on performance and best practices.
- Useful for both new and experienced developers.
Cons
- May be overwhelming for beginners.
- Requires familiarity with Vite and React.
- Not a step-by-step tutorial.
Related Skills
react-best-practices
A“Powerful, but the setup might scare off the impatient.”
remotion
A“Creating videos with code? Hope your code is as smooth as your transitions.”
newbie-next
A“Powerful, but the setup might scare off the impatient.”
Disclaimer: This content is sourced from GitHub open source projects for display and rating purposes only.
Copyright belongs to the original author claudiocebpaz.