react-vite-expert

What this skill does

# React + Vite Expert

## Overview

Transform into a React + Vite expert with deep knowledge of modern React development patterns, optimal project organization, performance optimization techniques, and production-ready configurations. This skill provides everything needed to build fast, maintainable, and scalable React applications using Vite as the build tool.

## Core Capabilities

### 1. Project Architecture & Organization

Guide users in structuring React applications for maximum maintainability and scalability.

**Reference: `references/project_architecture.md`**

This comprehensive guide covers:
- **Folder structure patterns**: Feature-based, atomic design, domain-driven
- **File organization**: Colocation strategies, naming conventions
- **Import strategies**: Path aliases, barrel exports, tree-shaking
- **State management organization**: Local vs global, where to put state
- **Scaling guidelines**: How to evolve structure as app grows

**When to consult:**
- User asks "how should I organize my React project?"
- Starting a new project
- Refactoring existing project structure
- App is becoming hard to navigate
- Need to establish team conventions

**Key Decision Trees:**
1. **Feature-based vs Component-based**: Read section "Optimal Folder Structure"
2. **State management strategy**: Read section "State Management Strategies"
3. **Import organization**: Read section "Import Strategies"

### 2. Code Generation & Scaffolding

Automate component, hook, and feature creation with production-ready templates.

**Scripts available:**

**`scripts/create_component.py`**
Generates complete component with all necessary files:
- Component file (.tsx)
- TypeScript types (.types.ts)
- CSS Module (.module.css)
- Tests (.test.tsx)
- Storybook story (.stories.tsx) [optional]
- Index file for clean imports

```bash
# Create a basic component
python scripts/create_component.py Button --type component

# Create a page component with lazy loading
python scripts/create_component.py Dashboard --type page

# Create component with children prop
python scripts/create_component.py Card --children

# Create component with Storybook story
python scripts/create_component.py Button --story

# Without tests
python scripts/create_component.py SimpleComponent --no-tests
```

**When to use:**
- Creating any new component
- Setting up new feature modules
- Need consistent component structure
- Want to speed up development

**`scripts/create_hook.py`**
Generates custom hooks with templates for common patterns:
- State management hooks
- Effect hooks
- Data fetching hooks
- LocalStorage hooks
- Debounce hooks
- Interval hooks

```bash
# Create custom hook
python scripts/create_hook.py useAuth --type custom

# Create data fetching hook
python scripts/create_hook.py useUserData --type fetch

# Create localStorage hook
python scripts/create_hook.py useSettings --type localStorage

# Create debounce hook
python scripts/create_hook.py useSearchDebounce --type debounce
```

**When to use:**
- Extracting reusable logic
- Creating custom state management
- Need common hook patterns
- Want hook with tests automatically

### 3. Performance Optimization

Optimize React applications for maximum performance and minimal bundle size.

**Reference: `references/performance_optimization.md`**

This guide covers:
- **React rendering optimization**: React.memo(), useMemo(), useCallback()
- **Code splitting**: React.lazy(), route-based splitting, component splitting
- **Virtualization**: Long list optimization with react-window
- **Debouncing & throttling**: Input optimization, scroll handling
- **Vite build optimization**: Chunk splitting, minification, compression
- **Image optimization**: WebP/AVIF, lazy loading, responsive images
- **Network optimization**: API request optimization, prefetching
- **CSS performance**: CSS Modules vs CSS-in-JS, critical CSS
- **Web Vitals tracking**: Measuring LCP, FID, CLS

**When to consult:**
- App feels slow or laggy
- Large bundle sizes
- Long initial load time
- User asks about optimization
- Preparing for production deployment
- Performance audit reveals issues

**Quick Performance Checklist:**
1. Run `python scripts/analyze_bundle.py` to identify large dependencies
2. Check `references/performance_optimization.md` for optimization strategies
3. Apply code splitting for routes: `React.lazy(() => import('./Page'))`
4. Memoize expensive components: `React.memo(Component)`
5. Use `useMemo()` for expensive calculations
6. Implement virtualization for long lists (react-window)
7. Optimize images (WebP, lazy loading)
8. Review Vite config in `assets/vite.config.optimized.ts`

**`scripts/analyze_bundle.py`**
Analyzes build output and provides optimization recommendations:

```bash
# Run bundle analysis
python scripts/analyze_bundle.py
```

**What it analyzes:**
- Package.json dependencies (identifies large libraries)
- Import patterns (suggests better imports for tree-shaking)
- Build output (bundle sizes, chunk distribution)
- Provides specific optimization recommendations

**When to run:**
- Before production deployment
- After adding new dependencies
- When bundle size increases unexpectedly
- Regular monthly audits
- Performance optimization sessions

### 4. Production-Ready Configuration

Deploy optimized Vite configurations and project setups.

**Assets available:**

**`assets/vite.config.optimized.ts`**
Fully optimized Vite configuration with:
- **Path aliases**: Clean imports (@/components, @/hooks, etc.)
- **Manual chunk splitting**: Vendor, feature-based chunks for better caching
- **Minification**: Terser with console.log removal in production
- **Bundle analyzer**: Visualize bundle composition
- **Asset optimization**: Image handling, font loading
- **Development proxy**: API proxy configuration
- **Source maps**: Conditional source map generation
- **CSS code splitting**: Automatic CSS chunking

**When to use:**
- Starting new project
- Optimizing existing build
- Setting up production pipeline
- Need better caching strategy
- Want to analyze bundle

**How to use:**
1. Copy `assets/vite.config.optimized.ts` to project root
2. Install dependencies: `npm install -D rollup-plugin-visualizer`
3. Customize manual chunks for your features
4. Run build with analyzer: `npm run build:analyze`

**`assets/tsconfig.optimized.json`**
TypeScript configuration with:
- **Strict mode enabled**: Catch more errors at compile time
- **Path aliases**: Matching Vite config
- **Optimal compiler options**: For Vite and modern React
- **Unused code detection**: noUnusedLocals, noUnusedParameters
- **Type safety**: noImplicitReturns, noUncheckedIndexedAccess

**When to use:**
- Starting new TypeScript project
- Want stricter type checking
- Need path aliases
- Improving type safety

**`assets/package.json.example`**
Complete package.json with:
- **All recommended scripts**: dev, build, test, lint, format
- **Essential dependencies**: React, React DOM, Router
- **Dev dependencies**: TypeScript, ESLint, Prettier, Vitest
- **Recommended optional dependencies**: Categorized by use case
- **Husky & lint-staged setup**: Pre-commit hooks
- **CI/CD scripts**: For automated pipelines

**When to use:**
- Starting new project
- Need script recommendations
- Setting up CI/CD
- Want git hooks
- Need package reference

**`assets/project-structure-example.md`**
Complete project structure with:
- **Full directory tree**: Feature-based architecture
- **Key file examples**: App.tsx, router, providers, API setup
- **Configuration examples**: vitest, eslint, prettier
- **Test setup**: Testing utilities and mocks
- **Scaling guidelines**: How to grow the structure

**When to use:**
- Starting new project from scratch
- Need structure reference
- Refactoring existing project
- Teaching team about organization
- Creating project templates

### 5. React Best Practices & Patterns

Implement modern React patterns and avoid common pitfalls.

**Reference: `references/best_practices.md`**

This guide cover