Develop and optimize React 18+ components with Server Components and Suspense.
npx skills add https://github.com/alsmadi99/dotfiles --skill react-expert-alsmadi99
Please help me install this Agent Skill. Skill: react-expert Source: https://github.com/alsmadi99/dotfiles/tree/main/claude/skills/react-expert Command: npx skills add https://github.com/alsmadi99/dotfiles --skill react-expert-alsmadi99
Senior React engineers struggle with modern patterns, server components, and performance optimization in React 19+. This skill provides a structured, production-ready approach to building resilient React UIs with Server Components, hooks, context, and state management tools.
Write a sample Next.js app that demonstrates a server-driven data fetch with a client component and a suspense boundary.
High-intent search queries and answers about installing and using this skill.
Optimize React 19 server components by architecting scalable apps with App Router, implementing advanced patterns like useTransition and React.memo, and using Suspense boundaries for efficient server-driven data fetching.
Structure Next.js App Router projects by strategically separating Server Components for data fetching from Client Components for interactivity, wrapping asynchronous renders in Suspense boundaries to deliver high-performance UI.
TypeScript strict mode is required to build modern React applications, ensuring type-safe server actions and robust component architecture when applying advanced hooks like useEffect, useMemo, and useCallback.
Suspense in React 18+ works by rendering fallback UI while asynchronous server-driven data fetching resolves, allowing you to architect scalable React apps that improve performance and maintainability across complex interfaces.
You can use Zustand and TanStack Query together for React state management, combining TanStack Query for server state and Zustand for client state to maintain type-safe, high-performance UI components.
Use useTransition for non-blocking state updates to keep UI responsive during heavy tasks, and useMemo to memoize expensive calculations, applying both React 19 patterns to improve performance and accessibility.
imMamdouhaboammarProvide TypeScript patterns for type-safe React 18-19 applications.
sarimofficialDesigns, implements and optimizes Next.js 16+ apps with TypeScript, Tailwind CSS and App Router.
AI-Foundry-CoreManage React state across local, global, and server contexts.
alexander-danilenkoImplement production-grade React 18+ and 19 components with TypeScript strict mode.
