React Vite Expert

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

# 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

# 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:

# 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`