Agent Skills
› AjayIrkal23/agentic-mercy-10x
› vite-react-best-practices
vite-react-best-practices
GitHub提供Vite+React SPA开发的高级指南，涵盖构建配置、部署策略（路由重写、缓存）、性能优化（路由分割、状态管理）及架构规范，助力生产级应用构建。
Trigger Scenarios
使用Vite搭建新的React项目
配置SPA的CI/CD构建流水线
排查生产环境构建或缓存问题
重构React组件以提升性能
Install
npx skills add AjayIrkal23/agentic-mercy-10x --skill vite-react-best-practices -g -y
SKILL.md
Frontmatter
{
"name": "vite-react-best-practices",
"license": "MIT",
"metadata": {
"author": "ant-gravity",
"version": "1.1.0"
},
"description": "ALWAYS invoke when building, reviewing, or refactoring React applications built with Vite (SPA). Comprehensive React and Vite SPA performance, architecture, and deployment guidelines — covers Vite-specific build configurations, static hosting requirements, and core React performance patterns."
}
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
Version History
- 581d130 Current 2026-07-19 09:15
