react-expert

Build React 18+ applications with component architecture and state management.

Updated Mar 10, 2026
One-click install
npx skills add https://github.com/darblex/price-compare-israel --skill react-expert-darblex
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-expert
Source: https://github.com/darblex/price-compare-israel/tree/main/workspace/skills/react-expert
Command: npx skills add https://github.com/darblex/price-compare-israel --skill react-expert-darblex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert guidance and implementation for building robust, performant, and scalable React 18+ applications, covering component architecture, state management, and modern patterns.

Core Features & Use Cases

  • Component Architecture: Design and implement efficient React component structures.
  • State Management: Integrate and manage state using hooks, Context, Redux, or Zustand.
  • React 19 Features: Leverage new features like Server Components, use(), and form actions.
  • Performance Optimization: Apply techniques like memoization, code splitting, and virtualization.
  • Use Case: You need to build a new feature in a Next.js 13+ application using Server Components, requiring complex state management and optimized data fetching.

Quick Start

Use the react-expert skill to create a new React component for displaying a list of users with TanStack Query for data fetching.

Frequently Asked Questions about react-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure React Server Components in a Next.js application?

React Server Components in Next.js are structured by leveraging component architecture patterns and Suspense for optimized data fetching. This approach enables efficient state management and scalable frontend performance for React 18+ applications.

What's the best way to manage state in React 18+ using Zustand or Redux?

State management in React 18+ using Zustand or Redux involves integrating modern hooks patterns and Context. This ensures robust component architecture and optimized state synchronization across complex frontend applications.

How do I optimize React performance with code splitting and memoization?

React performance optimization uses code splitting, memoization, and virtualization techniques. These methods reduce render cycles and bundle sizes, resulting in highly performant and scalable React 18+ component architectures.

Can I use TanStack Query with React 19 features like the use() hook?

TanStack Query integrates with React 19 features by utilizing the use() hook and Suspense for data fetching. This combination allows efficient handling of complex asynchronous state within modern React component structures.

When do I need React Suspense for data fetching?

React Suspense is needed for data fetching when building scalable applications with Server Components or TanStack Query. It manages loading states declaratively, ensuring robust frontend performance and smooth user experiences.

Does this approach support building complex forms with React 19 form actions?

Building complex forms is supported through React 19 form actions and modern hooks patterns. This enables seamless state management and performance optimization for interactive frontend components.