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

...