vite-react-best-practices — Claude Code skill: overview and setup
Curated guidelines for Vite React single-page apps covering static rewrites and asset caching rules.
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-codeWhat vite-react-best-practices does
This skill supplies structured guidelines for building React single-page applications with Vite. The rules focus on deployment and React performance patterns. Client-side routing mandates static rewrites on the hosting provider to function properly. The deployment rules also prescribe immutable caching for built assets alongside a no-cache policy for index.html.
For application code, the guide outlines route-level code splitting and layout shift prevention for images. Server state management belongs in React Query or SWR. It also details when memoization hooks like useMemo and useCallback are appropriate. An explicit rule prohibits importing from dist directories to prevent bundling code twice.
Client-accessible environment variables must use the VITE_ prefix for security reasons. Local build validation is required before pushing commits to a repository. All rules are also aggregated into a single AGENTS.md file.
What it helps with
- configure static rewrite rules for client-side routing
- set up immutable asset caching without caching
index.html - implement route-based code splitting with lazy loading
- prevent duplicate bundle size caused by importing from
dist
Example prompts for the agent
- Review our Vite build config and verify static rewrite settings for SPA routing.
- Refactor our React page components to use route splitting and lazy loading.
- Check our project for accidental imports from dist directories.
How to install vite-react-best-practices
1Skills CLI (Vercel)
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code2Manually: put the files in place
~/.claude/skills/vite-react-best-practices/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/vite-react-best-practices/
1Skills CLI (Vercel)
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a codex2Manually: put the files in place
.agents/skills/vite-react-best-practices/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a cursor2Manually: put the files in place
.cursor/skills/vite-react-best-practices/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install claudiocebpaz/vite-react-best-practices vite-react-best-practices2Manually: put the files in place
.github/skills/vite-react-best-practices/SKILL.md1Skills CLI (Vercel)
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a gemini-cli2Platform CLI
gemini skills install https://github.com/claudiocebpaz/vite-react-best-practicesManually: put the files in place
.devin/skills/vite-react-best-practices/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about vite-react-best-practices
How to install vite-react-best-practices in Claude Code?
Run npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code. This adds the file at ~/.claude/skills/vite-react-best-practices/SKILL.md.
What does vite-react-best-practices do?
It provides rules for React SPAs built with Vite, covering static hosting rewrites, asset caching, route lazy loading, and avoiding bundling anti-patterns.
Why are static rewrites mandatory in this guide?
Client-side single-page applications require the static host to route requests back to the entry point so direct page links load as intended.
Source text
SKILL.md · MIT
--- 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](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`
© ant-gravity · MIT · claudiocebpaz/vite-react-best-practices
