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.
Works with
--- 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 --- # 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](rules/vite-spa-rewrites.md) - **Mandatory** for client-side routing. - [Caching Strategy](rules/vite-caching-strategy.md) - Immutable assets, no-cache index.html. - [Build Validation](rules/vite-build-validation.md) - Preview before push. - [Environment Variables](rules/vite-env-vars.md) - `VITE_` prefix and security. ### 2. React Core Performance - [Route Splitting](rules/react-route-splitting.md) - Lazy load pages. - [Server State](rules/react-server-state.md) - Use React Query/SWR. - [Memoization](rules/react-memoization.md) - When to use useMemo/useCallback. - [Image Optimization](rules/react-image-optimization.md) - CLS prevention. ### 3. Architecture & Cleanup - [Colocation](rules/react-colocation.md) - Feature-based structure. - [Anti-Patterns: Import from Dist](rules/anti-import-dist.md) - Avoid bundling twice. - [Troubleshooting](rules/vite-troubleshooting.md) - Common Vite fixes. ## Full Compiled Document For the complete guide with all rules expanded: `AGENTS.md`
More Refactoring skills
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.
analyze-project
lllllllama/rigorpilot-skills
Rigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrypoints, review configs and insertion points, or flag suspicious implementation patterns without modifying code or running heavy jobs. Do not use for active command execution, broad refactoring, speculative code adaptation, or automatic bug fixing.
request-refactor-plan
mattpocock/skills
Create a detailed refactor plan with tiny commits via user interview, then file it as a GitHub issue. Use when user wants to plan a refactor, create a refactoring RFC, or break a refactor into safe incremental steps.
