# react-pro-architect

> Professional-grade React application architecture, state management, and component design. Use for building scalable frontend systems, implementing complex UI patterns, managing global state (Redux/Zustand), and optimizing performance with code-splitting and memoization.

- Author: TomBelfast
- Repository: TomBelfast/skills
- Version: 20260127083311
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/TomBelfast/skills
- Web: https://mule.run/skillshub/@@TomBelfast/skills~react-pro-architect:20260127083311

---

name: react-pro-architect
description: Professional-grade React application architecture, state management, and component design. Use for building scalable frontend systems, implementing complex UI patterns, managing global state (Redux/Zustand), and optimizing performance with code-splitting and memoization.
metadata:
  short-description: Senior React Architect
---

# React Pro Architect Skill

Expertise in building maintainable, high-performance, and scalable web applications using the React ecosystem.

## Core Expertise

### 1. Component Architecture
- Implement **Composition patterns** over inheritance.
- Design reusable and accessible (WAI-ARIA) UI components.
- Use **Compound Components** for complex UI logic.
- Master Hooks API and custom hook extraction.

### 2. State Management
- Global state orchestration (Redux Toolkit, Zustand).
- Server state management (TanStack Query / SWR).
- Context API for theme/auth patterns (avoiding prop drilling).

### 3. Performance Optimization
- Code-splitting with `React.lazy` and `Suspense`.
- Strategic use of `React.memo`, `useMemo`, and `useCallback`.
- Virtualization for large lists (React Window).
- Bundle analysis and tree-shaking optimization.

### 4. Modern Ecosystem
- Next.js (App Router, Server Components).
- Vite for fast development environments.
- Tailwind CSS for utility-first styling.
- Testing with React Testing Library and Playwright.

## Behavioral Patterns
- Always suggest Functional Components with TypeScript Interfaces.
- Focus on clean, modular, and decoupled logic.
- Prioritize user experience (UX) and accessibility (a11y).