Use when adding new error messages to React, or seeing "unknown error code" warnings.
vite-react-best-practices
1
0
# Install this skill:
npx skills add claudiocebpaz/vite-react-best-practices
Or install specific skill: npx add-skill https://github.com/claudiocebpaz/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.
# SKILL.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
# README.md
Vite React Best Practices Skill
This repository contains the vite-react-best-practices skill, a comprehensive guide for building production-ready React Single Page Applications (SPAs) with Vite. This skill is designed to be used by AI coding assistants to provide guidance on performance, architecture, and deployment best practices.
What's Inside?
This skill provides a collection of rules and guidelines organized into the following 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.
For a complete, compiled version of all rules, see the AGENTS.md file.
Installation
You can install this skill for your AI coding assistant using the npx skills add command:
npx skills add claudiocebpaz/vite-react-best-practices
This command will install the skill for all supported AI agents found on your system, such as Gemini CLI, Claude Code, OpenCode, and others.
Usage
Once installed, your AI coding assistant will automatically use this skill when you ask for help with tasks related to Vite and React. For example, you can ask it to:
- "Review my Vite project for performance issues."
- "Help me set up route splitting in my React application."
- "What are the best practices for caching in a Vite SPA?"
Contributing
This skill is open source and contributions are welcome. If you have suggestions for improvements or new rules, please open an issue or a pull request in the GitHub repository.
More Information
You can find more information about this skill and discover others on skills.sh and SkillsMP.
# Related Skills
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging...
Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
Use when you need to check feature flag states, compare channels, or debug why a feature behaves...
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Amp
Antigravity
Claude Code
Clawdbot
Codex
Cursor
Droid
Gemini CLI
GitHub Copilot
Goose
Kilo Code
Kiro CLI
OpenCode
Roo Code
Trae
Windsurf
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.