{"id":"70bff109-b785-4a55-8495-f80b892b9376","shortId":"nzaVSU","kind":"skill","title":"react-vite-best-practices","tagline":"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.","description":"# React + Vite Best Practices\n\nComprehensive 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.\n\n## Metadata\n\n- **Version:** 2.0.0\n- **Framework:** React + Vite\n- **Rule Count:** 23 rules across 6 categories\n- **License:** MIT\n\n## When to Apply\n\nReference these guidelines when:\n- Configuring Vite for React projects\n- Implementing code splitting and lazy loading\n- Optimizing build output and bundle size\n- Setting up development environment and HMR\n- Handling images, fonts, SVGs, and static assets\n- Managing environment variables across environments\n- Analyzing bundle size and dependencies\n\n## Rule Categories by Priority\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | Build Optimization | CRITICAL | `build-` |\n| 2 | Code Splitting | CRITICAL | `split-` |\n| 3 | Development | HIGH | `dev-` |\n| 4 | Asset Handling | HIGH | `asset-` |\n| 5 | Environment Config | MEDIUM | `env-` |\n| 6 | Bundle Analysis | MEDIUM | `bundle-` |\n\n## Quick Reference\n\n### 1. Build Optimization (CRITICAL)\n\n- `build-manual-chunks` - Configure manual chunks for vendor separation\n- `build-minification` - Minification with OXC (default) or Terser\n- `build-target-modern` - Target modern browsers (baseline-widely-available)\n- `build-sourcemaps` - Configure sourcemaps per environment\n- `build-tree-shaking` - Ensure proper tree shaking with ESM\n- `build-compression` - Gzip and Brotli compression\n- `build-asset-hashing` - Content-based hashing for cache busting\n\n### 2. Code Splitting (CRITICAL)\n\n- `split-route-lazy` - Route-based splitting with React.lazy()\n- `split-suspense-boundaries` - Strategic Suspense boundary placement\n- `split-dynamic-imports` - Dynamic import() for heavy components\n- `split-component-lazy` - Lazy load non-critical components\n- `split-prefetch-hints` - Prefetch chunks on hover/idle/viewport\n\n### 3. Development (HIGH)\n\n- `dev-dependency-prebundling` - Configure optimizeDeps for faster starts\n- `dev-fast-refresh` - React Fast Refresh patterns\n- `dev-hmr-config` - HMR server configuration\n\n### 4. Asset Handling (HIGH)\n\n- `asset-image-optimization` - Image optimization and lazy loading\n- `asset-svg-components` - SVGs as React components with SVGR\n- `asset-fonts` - Web font loading strategy\n- `asset-public-dir` - Public directory vs JavaScript imports\n\n### 5. Environment Config (MEDIUM)\n\n- `env-vite-prefix` - VITE_ prefix for client variables\n- `env-modes` - Mode-specific environment files\n- `env-sensitive-data` - Never expose secrets in client code\n\n### 6. Bundle Analysis (MEDIUM)\n\n- `bundle-visualizer` - Analyze bundles with rollup-plugin-visualizer\n\n## Essential Configurations\n\n### Recommended vite.config.ts\n\n```typescript\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport path from 'path'\n\nexport default defineConfig({\n  plugins: [react()],\n\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, './src'),\n    },\n  },\n\n  build: {\n    target: 'baseline-widely-available',\n    sourcemap: false,\n    chunkSizeWarningLimit: 500,\n    rollupOptions: {\n      output: {\n        manualChunks: {\n          vendor: ['react', 'react-dom'],\n        },\n      },\n    },\n  },\n\n  optimizeDeps: {\n    include: ['react', 'react-dom'],\n  },\n\n  server: {\n    port: 3000,\n    hmr: {\n      overlay: true,\n    },\n  },\n})\n```\n\n### Route-Based Code Splitting\n\n```typescript\nimport { lazy, Suspense } from 'react'\n\nconst Home = lazy(() => import('./pages/Home'))\nconst Dashboard = lazy(() => import('./pages/Dashboard'))\nconst Settings = lazy(() => import('./pages/Settings'))\n\nfunction App() {\n  return (\n    <Suspense fallback={<LoadingSpinner />}>\n      {/* Routes here */}\n    </Suspense>\n  )\n}\n```\n\n### Environment Variables\n\n```typescript\n// src/vite-env.d.ts\n/// <reference types=\"vite/client\" />\n\ninterface ImportMetaEnv {\n  readonly VITE_API_URL: string\n  readonly VITE_APP_TITLE: string\n}\n\ninterface ImportMeta {\n  readonly env: ImportMetaEnv\n}\n```\n\n## How to Use\n\nRead individual rule files for detailed explanations and code examples:\n\n```\nrules/build-manual-chunks.md\nrules/split-route-lazy.md\nrules/env-vite-prefix.md\n```\n\n## References\n\n- [Vite Documentation](https://vite.dev)\n- [React Documentation](https://react.dev)\n- [Rollup Documentation](https://rollupjs.org)\n\n## Full Compiled Document\n\nFor the complete guide with all rules expanded: `AGENTS.md`","tags":["react","vite","best","practices","agent","skills","asyrafhussin","agent-rules","agent-skills","ai-agents","ai-slop","claude-code"],"capabilities":["skill","source-asyrafhussin","skill-react-vite-best-practices","topic-agent-rules","topic-agent-skills","topic-ai-agents","topic-ai-slop","topic-claude-code","topic-code-quality","topic-code-review","topic-codex","topic-cursor","topic-laravel","topic-nodejs","topic-react"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/AsyrafHussin/agent-skills/react-vite-best-practices","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add AsyrafHussin/agent-skills","source_repo":"https://github.com/AsyrafHussin/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.469","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 39 github stars · SKILL.md body (4,545 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:58:25.262Z","embedding":null,"createdAt":"2026-05-16T18:57:14.893Z","updatedAt":"2026-05-18T18:58:25.262Z","lastSeenAt":"2026-05-18T18:58:25.262Z","tsv":"'/pages/dashboard':482 '/pages/home':477 '/pages/settings':487 '/src':431 '1':145,176 '2':150,245 '2.0.0':77 '23':56,83 '3':155,294 '3000':458 '4':159,321 '5':164,360 '500':441 '6':59,86,169,391 'across':58,85,130 'agents.md':553 'alia':428 'analysi':74,171,393 'analyz':132,398 'api':503 'app':489,508 'appli':92 'applic':51 'asset':68,126,160,163,236,322,326,335,345,352 'asset-font':344 'asset-image-optim':325 'asset-public-dir':351 'asset-svg-compon':334 'avail':209,437 'base':240,255,464 'baselin':207,435 'baseline-widely-avail':206,434 'best':4,43 'boundari':262,265 'brot':232 'browser':205 'build':29,62,109,146,149,177,181,191,200,211,218,228,235,432 'build-asset-hash':234 'build-compress':227 'build-manual-chunk':180 'build-minif':190 'build-sourcemap':210 'build-target-modern':199 'build-tree-shak':217 'built':20,52 'bundl':36,73,112,133,170,173,392,396,399 'bundle-visu':395 'bust':244 'cach':243 'categori':60,87,138,142 'chunk':183,186,291 'chunksizewarninglimit':440 'client':371,389 'code':31,64,103,151,246,390,465,527 'compil':543 'complet':547 'compon':19,275,278,285,337,341 'comprehens':45 'compress':229,233 'config':166,317,362 'configur':28,71,97,184,213,301,320,406 'const':473,478,483 'contain':55 'content':239 'content-bas':238 'count':82 'critic':148,153,179,248,284 'dashboard':479 'data':384 'default':196,423 'defineconfig':411,424 'depend':136,299 'detail':524 'dev':158,298,307,315 'dev-dependency-prebundl':297 'dev-fast-refresh':306 'dev-hmr-config':314 'develop':66,116,156,295 'dir':354 'directori':356 'dirnam':430 'document':534,537,540,544 'dom':449,455 'dynam':269,271 'ensur':221 'env':168,365,374,382,514 'env-mod':373 'env-sensitive-data':381 'env-vite-prefix':364 'environ':70,117,128,131,165,216,361,379,495 'esm':226 'essenti':405 'exampl':528 'expand':552 'explan':525 'export':422 'expos':386 'fallback':492 'fals':439 'fast':308,311 'faster':304 'file':380,522 'font':122,346,348 'framework':78 'full':542 'function':488 'guid':48,548 'guidelin':11,95 'gzip':230 'handl':69,120,161,323 'hash':237,241 'heavi':274 'high':157,162,296,324 'hint':289 'hmr':35,119,316,318,459 'home':474 'hover/idle/viewport':293 'imag':121,327,329 'impact':143 'implement':102 'import':270,272,359,410,414,418,468,476,481,486 'importmeta':512 'importmetaenv':500,515 'includ':451 'individu':520 'interfac':499,511 'involv':26 'javascript':358 'lazi':33,106,252,279,280,332,469,475,480,485 'licens':88 'load':34,107,281,333,349 'manag':127 'manual':182,185 'manualchunk':444 'medium':167,172,363,394 'metadata':75 'minif':192,193 'mit':89 'mode':375,377 'mode-specif':376 'modern':202,204 'never':385 'non':283 'non-crit':282 'optim':10,17,30,47,63,108,147,178,328,330 'optimizedep':302,450 'output':110,443 'overlay':460 'oxc':195 'path':419,421 'path.resolve':429 'pattern':313 'per':215 'perform':9,40,46,67 'placement':266 'plugin':403,425 'port':457 'practic':5,44 'prebundl':300 'prefetch':288,290 'prefix':144,367,369 'prioriti':140,141 'project':101 'proper':222 'public':353,355 'quick':174 'react':2,6,18,39,41,50,79,100,310,340,415,426,446,448,452,454,472,536 'react-dom':447,453 'react-vite-best-practic':1 'react.dev':538 'react.lazy':258 'read':519 'readon':501,506,513 'recommend':407 'refer':93,175,532 'refresh':309,312 'resolv':427 'return':490 'review':15 'rollup':402,539 'rollup-plugin-visu':401 'rollupjs.org':541 'rollupopt':442 'rout':251,254,463,493 'route-bas':253,462 'rule':57,81,84,137,521,551 'rules/build-manual-chunks.md':529 'rules/env-vite-prefix.md':531 'rules/split-route-lazy.md':530 'secret':387 'sensit':383 'separ':189 'server':319,456 'set':114,484 'shake':220,224 'size':37,113,134 'skill' 'skill-react-vite-best-practices' 'source-asyrafhussin' 'sourcemap':212,214,438 'specif':378 'split':32,65,104,152,154,247,250,256,260,268,277,287,466 'split-component-lazi':276 'split-dynamic-import':267 'split-prefetch-hint':286 'split-route-lazi':249 'split-suspense-boundari':259 'src/vite-env.d.ts':498 'start':305 'static':125 'strateg':263 'strategi':350 'string':505,510 'suspens':261,264,470,491 'svg':336 'svgr':343 'svgs':123,338 'target':201,203,433 'task':25 'terser':198 'titl':509 'topic-agent-rules' 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-slop' 'topic-claude-code' 'topic-code-quality' 'topic-code-review' 'topic-codex' 'topic-cursor' 'topic-laravel' 'topic-nodejs' 'topic-react' 'tree':219,223 'trigger':23 'true':461 'typescript':409,467,497 'url':504 'use':12,518 'variabl':129,372,496 'vendor':188,445 'version':76 'visual':397,404 'vite':3,8,22,27,42,54,80,98,366,368,413,502,507,533 'vite.config.ts':408 'vite.dev':535 'vitejs/plugin-react':417 'vs':357 'web':347 'wide':208,436 'write':14","prices":[{"id":"8d5ee0d9-5502-44e9-b1a0-4c0c45de9316","listingId":"70bff109-b785-4a55-8495-f80b892b9376","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"AsyrafHussin","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-16T18:57:14.893Z"}],"sources":[{"listingId":"70bff109-b785-4a55-8495-f80b892b9376","source":"github","sourceId":"AsyrafHussin/agent-skills/react-vite-best-practices","sourceUrl":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/react-vite-best-practices","isPrimary":false,"firstSeenAt":"2026-05-16T18:57:14.893Z","lastSeenAt":"2026-05-18T18:58:25.262Z"}],"details":{"listingId":"70bff109-b785-4a55-8495-f80b892b9376","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"AsyrafHussin","slug":"react-vite-best-practices","github":{"repo":"AsyrafHussin/agent-skills","stars":39,"topics":["agent-rules","agent-skills","ai-agents","ai-slop","claude-code","code-quality","code-review","codex","cursor","laravel","nodejs","react","technical-debt","typescript","windsurf"],"license":"mit","html_url":"https://github.com/AsyrafHussin/agent-skills","pushed_at":"2026-05-16T19:24:02Z","description":"Agent skills for AI coding agents (Claude Code, Cursor, Codex, Windsurf) — Laravel, React, TypeScript, MySQL, code quality, technical debt, documentation, and security.","skill_md_sha":"389f2036e444ba5fae6eead8a5faa61f669df4db","skill_md_path":"skills/react-vite-best-practices/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/AsyrafHussin/agent-skills/tree/main/skills/react-vite-best-practices"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"react-vite-best-practices","license":"MIT","description":"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."},"skills_sh_url":"https://skills.sh/AsyrafHussin/agent-skills/react-vite-best-practices"},"updatedAt":"2026-05-18T18:58:25.262Z"}}