react-expert

Guide React component design, hooks, state management, and performance optimization.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill react-expert-duylinhdang1998
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-expert
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/react-expert
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill react-expert-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides expert guidance to design, optimize, and debug React components and architectures so teams can ship reliable, high-performance user interfaces faster and with fewer regressions.

Core Features & Use Cases

  • Component Architecture & Patterns: Recommendations for component composition, prop patterns, and scalable folder/file blueprints.
  • Hooks & State Management: Best practices for custom hooks, useEffect/useMemo/useCallback usage, and selecting/architecting state solutions like Redux, Zustand, or React Context.
  • Performance & Scaling: Strategies for memoization, virtualization, code-splitting, server components, and improving Core Web Vitals.
  • Ecosystem & Testing: Guidance for Next.js (App Router/Server Components), React Query/SWR, TypeScript typing, Jest/React Testing Library, and end-to-end testing with Playwright/Cypress.

Quick Start

Create a high-performance React component using hooks, memoization, and code-splitting for an infinite scrolling feed.

Frequently Asked Questions about react-expert

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

FAQPage Schema
How do I optimize React component performance and reduce unnecessary re-renders?

Optimize React component performance by applying memoization strategies, virtualization, and code-splitting to minimize unnecessary re-renders and improve Core Web Vitals.

What's the best way to structure React state management with Redux or Zustand?

Structure React state management by evaluating application scale to select and architect appropriate solutions like Redux, Zustand, or React Context for optimal data flow.

How do I implement Next.js Server Components in the App Router?

Implement Next.js Server Components within the App Router by architecting scalable UI boundaries and applying bundle optimization techniques for performant web applications.

How do I write testable React components using Jest and React Testing Library?

Write testable React components using Jest and React Testing Library by following component composition patterns and best practices for reliable, regression-free user interfaces.

When should I use custom hooks instead of React Context for logic reuse?

Use custom hooks instead of React Context for logic reuse when isolating specific side effects or stateful logic, reserving Context for global state distribution across components.

Does this React expertise apply to building an infinite scrolling feed?

This React expertise applies to building an infinite scrolling feed by utilizing hooks, memoization, and code-splitting techniques to create high-performance user interfaces.