vite-react-best-practices

内容来源：SKILL.md（标准 Skill 格式） · 原始地址 · 查看安装指南

原始内容

---
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](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/vite-spa-rewrites.md) - **Mandatory** for client-side routing.
- [Caching Strategy](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/vite-caching-strategy.md) - Immutable assets, no-cache index.html.
- [Build Validation](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/vite-build-validation.md) - Preview before push.
- [Environment Variables](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/vite-env-vars.md) - `VITE_` prefix and security.

### 2. React Core Performance

- [Route Splitting](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/react-route-splitting.md) - Lazy load pages.
- [Server State](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/react-server-state.md) - Use React Query/SWR.
- [Memoization](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/react-memoization.md) - When to use useMemo/useCallback.
- [Image Optimization](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/react-image-optimization.md) - CLS prevention.

### 3. Architecture & Cleanup

- [Colocation](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/react-colocation.md) - Feature-based structure.
- [Anti-Patterns: Import from Dist](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/anti-import-dist.md) - Avoid bundling twice.
- [Troubleshooting](https://github.com/claudiocebpaz/vite-react-best-practices/blob/HEAD/rules/vite-troubleshooting.md) - Common Vite fixes.

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

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