Agent Skills
› AjayIrkal23/agentic-mercy-10x
› vite-react-best-practices
vite-react-best-practices
GitHub提供基于Vite构建React单页应用的最佳实践指南，涵盖部署配置、性能优化及架构规范。适用于新建项目、构建管道配置、生产环境故障排查及组件重构场景。
Trigger Scenarios
使用Vite搭建新的React项目
配置SPAs的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
