react-vite-best-practices
23 performance optimization rules for React and Vite across build, code splitting, development, assets, environment, and bundle analysis.
- Covers six rule categories prioritized by impact: build optimization and code splitting (critical), development and asset handling (high), environment config and bundle analysis (medium)
- Includes route-based lazy loading with React.lazy() and Suspense, manual vendor chunk separation, and strategic prefetching patterns
- Provides recommended vite.config.ts setup with modern browser targeting, sourcemap configuration, and dependency prebundling
- Addresses asset optimization for images, SVGs as React components, web fonts, and environment variable management with VITE_ prefix convention
React + Vite Best Practices
Comprehensive performance optimization guide for React applications built with Vite. Contains 23 rules across 6 categories for build optimization, code splitting, development performance, asset handling, environment configuration, and bundle analysis.
Metadata
- Version: 2.0.0
- Framework: React + Vite
- Rule Count: 23 rules across 6 categories
- License: MIT
When to Apply
More from asyrafhussin/agent-skills
php-best-practices
PHP 8.x modern patterns, PSR standards, and SOLID principles. Use when reviewing PHP code, checking type safety, auditing code quality, or ensuring PHP best practices. Triggers on "review PHP", "check PHP code", "audit PHP", or "PHP best practices".
1.6Klaravel-best-practices
Laravel 13 conventions and best practices. Use when creating controllers, models, migrations, validation, services, or structuring Laravel applications. Triggers on tasks involving Laravel architecture, Eloquent, database, API development, or PHP patterns.
902laravel-inertia-react
Laravel + Inertia.js + React integration patterns. Use when building Inertia page components, handling forms with useForm, managing shared data, or implementing persistent layouts. Triggers on tasks involving Inertia.js, page props, form handling, or Laravel React integration.
628clean-code-principles
SOLID principles, design patterns, DRY, KISS, and clean code fundamentals. Use when reviewing architecture, checking code quality, refactoring, or discussing design decisions. Triggers on "review architecture", "check code quality", "SOLID principles", "design patterns", or "clean code".
560typescript-react-patterns
TypeScript best practices for React development. Use when writing typed React components, hooks, events, refs, or generic components. Triggers on tasks involving TypeScript errors, type definitions, props typing, or type-safe React patterns.
255tailwind-best-practices
Tailwind CSS patterns and conventions. Use when writing responsive designs, implementing dark mode, creating reusable component styles, configuring Tailwind, or migrating from v3 to v4. Triggers on tasks involving Tailwind classes, responsive design, dark mode, CSS styling, or "migrate to Tailwind v4".
188