vite-react-best-practices

Name: vite-react-best-practices
Author: claudiocebpaz

github.com/claudiocebpazDevelopment16636 installsUpdated 40w ago

About vite-react-best-practices

vite-react-best-practices is a senior-level guide for building production-ready React single-page applications with Vite. It covers deployment, performance, project structure, and troubleshooting, with expanded rules in AGENTS.md.

Key features

01SPA rewrite and caching guidance
02Build validation and environment variable rules
03React route splitting and state guidance
04Component performance and image optimization
05Feature-based organization and troubleshooting

Use cases

01Set up a Vite and React project
02Configure SPA deployment and CI/CD
03Troubleshoot builds or caching
04Refactor components for performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices

After installing, type/vite-react-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md

metadata.json

AGENTS.md

marketplace.json

rules/

react-image-optimization.md

react-colocation.md

anti-import-dist.md

react-memoization.md

react-route-splitting.md

react-server-state.md

vite-build-validation.md

vite-caching-strategy.md

vite-env-vars.md

vite-troubleshooting.md

vite-spa-rewrites.md

Details

From the project README

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

Comments

Markdown supported

Details

Author: claudiocebpaz
Repository: claudiocebpaz/vite-react-best-practices
Category: Development
Installs: 636
GitHub stars: 16

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.