react-vite

# React Vite Skill

Provides comprehensive React 18+ development with Vite bundler, TypeScript integration, and modern frontend patterns.

## When to Use This Skill

Activate this skill when working with:
- React 18+ applications with Vite
- TypeScript component development
- React hooks and custom hooks
- State management (Context, Zustand, React Query)
- Component composition and patterns
- Vite configuration and optimization
- Build optimization and deployment

## Quick Reference

### Project Setup
```bash
# Create new Vite + React + TypeScript project
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# Install common dependencies
npm install @tanstack/react-query zustand react-hook-form zod
npm install -D @types/node

# Development
npm run dev

# Build
npm run build
npm run preview

# Lint
npm run lint
```

## Project Structure

```
src/
├── main.tsx              # Application entry point
├── App.tsx              # Root component
├── vite-env.d.ts        # Vite TypeScript definitions
├── components/          # Reusable components
│   ├── ui/             # Base UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Input.tsx
│   └── features/       # Feature-specific components
│       ├── UserList.tsx
│       └── Dashboard.tsx
├── hooks/              # Custom hooks
│   ├── useAuth.ts
│   ├── useApi.ts
│   └── useLocalStorage.ts
├── stores/            # State management
│   ├── authStore.ts
│   └── userStore.ts
├── services/          # API and external services
│   ├── api.ts
│   └── auth.ts
├── types/            # TypeScript types
│   ├── index.ts
│   └── api.ts
├── utils/           # Utility functions
│   └── helpers.ts
└── styles/         # Global styles
    └── index.css
```

## Vite Configuration

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],

  // Path aliases
  resolve: {
    al