React

**Quick judgement** A strong, production-focused React skill well-suited to intermediate and advanced engineers building modern React/Next.js apps. It offers clear rules for architecture, state management, and performance, grounded in React 19-era patterns. **What it does well** - Embraces **React 19 + Server Components** and explains server vs client component responsibilities. - Provides **decisive guidance** on state: server state in TanStack Query, UI state in useState/Zustand/Context, with concrete examples. - Enforces **maintainability rules** (named exports only, JSX/file line limits, hooks-first ordering) that help large teams. - Covers **common React pitfalls** (useEffect misuse, unstable keys, derived state, async effects, race conditions) with correct patterns. - Includes **performance priorities** (code splitting, image optimization, virtualization, debouncing) and acknowledges the impact of the React Compiler on memoization patterns. **Risks / limitations** - **Highly opinionated stack**: assumes Next.js App Router, TanStack Query, Zustand, Tailwind, React Hook Form + Zod. Teams using different stacks (e.g., CRA/Vite-only, Redux Toolkit, SWR, plain CSS) will find some guidance mismatched or overly prescriptive. - **React 19 focus** means parts of the guidance (Server Components defaults, use(), server actions, React Compiler) may be less applicable or require adaptation in older React or non-Next environments. - Some rules (e.g., “TanStack Query NOT Redux,” max 50 lines of JSX) are **strong stylistic constraints** rather than universally accepted best practices; they might conflict with existing team conventions. - Security concerns (XSS, auth flows, API hardening) are **not a primary focus**, so this skill should be complemented with security-specific guidance. **Recommended scenarios** Use this skill when: - Starting or restructuring a **modern React/Next.js app** and you want a cohesive set of architectural and state-management conventions. - Adopting or exploring **React 19 features** (Server Components, use(), Actions, useActionState) and need concrete, idiomatic patterns. - Cleaning up a codebase with **performance or rendering issues** (infinite loops, stale closures, excessive rerenders, giant components). - Establishing **team-wide standards** for React component structure, state management boundaries, and file layout in a TypeScript-first codebase. Avoid relying on it as your sole guide if you must stick to a non-Next.js setup, a different state management ecosystem (e.g., Redux-centric), or if you need in-depth security and backend architecture guidance alongside React.