react-vite-best-practices
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.
- Installs
- 2.9K
- Last 24h
- +9
- Trending rank
- #9045
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/asyrafhussin/agent-skills --skill react-vite-best-practices- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads react-vite-best-practices automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
Reference these guidelines when:
- Configuring Vite for React projects
- Implementing code splitting and lazy loading
- Optimizing build output and bundle size
- Setting up development environment and HMR
- Handling images, fonts, SVGs, and static assets
- Managing environment variables across environments
- Analyzing bundle size and dependencies
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Build Optimization | CRITICAL | build- |
| 2 | Code Splitting | CRITICAL | split- |
| 3 | Development | HIGH | dev- |
| 4 | Asset Handling | HIGH | asset- |
| 5 | Environment Config | MEDIUM | env- |
| 6 | Bundle Analysis | MEDIUM | bundle- |
Quick Reference
1. Build Optimization (CRITICAL)
build-manual-chunks- Configure manual chunks for vendor separationbuild-minification- Minification with OXC (default) or Terserbuild-target-modern- Target modern browsers (baseline-widely-available)build-sourcemaps- Configure sourcemaps per environmentbuild-tree-shaking- Ensure proper tree shaking with ESMbuild-compression- Gzip and Brotli compressionbuild-asset-hashing- Content-based hashing for cache busting
2. Code Splitting (CRITICAL)
split-route-lazy- Route-based splitting with React.lazy()split-suspense-boundaries- Strategic Suspense boundary placementsplit-dynamic-imports- Dynamic import() for heavy componentssplit-component-lazy- Lazy load non-critical componentssplit-prefetch-hints- Prefetch chunks on hover/idle/viewport
3. Development (HIGH)
dev-dependency-prebundling- Configure optimizeDeps for faster startsdev-fast-refresh- React Fast Refresh patternsdev-hmr-config- HMR server configuration
4. Asset Handling (HIGH)
asset-image-optimization- Image optimization and lazy loadingasset-svg-components- SVGs as React components with SVGRasset-fonts- Web font loading strategyasset-public-dir- Public directory vs JavaScript imports
5. Environment Config (MEDIUM)
env-vite-prefix- VITE_ prefix for client variablesenv-modes- Mode-specific environment filesenv-sensitive-data- Never expose secrets in client code
6. Bundle Analysis (MEDIUM)
bundle-visualizer- Analyze bundles with rollup-plugin-visualizer
Essential Configurations
Recommended vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
build: {
target: 'baseline-widely-available',
sourcemap: false,
chunkSizeWarningLimit: 500,
rollupOptions: {
output: {
manualChunks: {
vendor: ['react', 'react-dom'],
},
},
},
},
optimizeDeps: {
include: ['react', 'react-dom'],
},
server: {
port: 3000,
hmr: {
overlay: true,
},
},
})
Route-Based Code Splitting
import { lazy, Suspense } from 'react'
const Home = lazy(() => import('./pages/Home'))
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Settings = lazy(() => import('./pages/Settings'))
function App() {
return (
<Suspense fallback={<LoadingSpinner />}>
{/* Routes here */}
</Suspense>
)
}
Environment Variables
// src/vite-env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_API_URL: string
readonly VITE_APP_TITLE: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
How to Use
Read individual rule files for detailed explanations and code examples:
rules/build-manual-chunks.md
rules/split-route-lazy.md
rules/env-vite-prefix.md
References
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
FAQ
What does the react-vite-best-practices skill do?
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.
How do I install react-vite-best-practices?
Run npx skills add https://github.com/asyrafhussin/agent-skills --skill react-vite-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-vite-best-practices/ (personal) or .claude/skills/react-vite-best-practices/ (project).
Which AI agents can use react-vite-best-practices?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is react-vite-best-practices safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains react-vite-best-practices?
It is published by asyrafhussin in asyrafhussin/agent-skills. It has 2,869 recorded installs.
More from asyrafhussin/agent-skills
php-best-practices
asyrafhussin/agent-skills
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".
laravel-best-practices
asyrafhussin/agent-skills
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.
laravel-inertia-react
asyrafhussin/agent-skills
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.
clean-code-principles
asyrafhussin/agent-skills
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".
typescript-react-patterns
asyrafhussin/agent-skills
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.
laravel-database-optimization
asyrafhussin/agent-skills
Laravel database optimization patterns. Use when writing Eloquent queries, creating migrations, configuring caching, debugging slow queries, or optimizing database performance. Triggers on tasks involving N+1 queries, indexing, Redis caching, pagination, or database transactions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.