react-expert

Design scalable React 19+ apps with Server Components and typed state management.

1|Updated Dec 11, 2025
One-click install
npx skills add https://github.com/evanfang0054/cc-system-creator-scripts --skill react-expert-evanfang0054
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-expert
Source: https://github.com/evanfang0054/cc-system-creator-scripts/tree/main/skills/react-expert
Command: npx skills add https://github.com/evanfang0054/cc-system-creator-scripts --skill react-expert-evanfang0054

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

这个技能提供对 React 19+ 应用的体系化方法,帮助开发者在服务器端组件、hooks 模式和状态管理之间构建可扩展且高性能的应用,降低架构和实现难度。

Core Features & Use Cases

  • 架构与模式:提供 Server Components 与客户端组件的分层策略、数据获取与缓存模式,以及性能优化技巧。
  • 状态与数据管理:覆盖 Context、Zustand、Redux Toolkit、TanStack Query 的集成方式,确保可测试性和可维护性。
  • 协同开发与测试:包括无障碍、测试策略、组件设计规范,以及从小型组件到大型系统的逐步迁移路径。

使用场景示例:为大型企业级前端应用设计模块化组件库、实现服务端数据渲染与客户端交互的混合架构。

Quick Start

使用此技能来评估现有 React 应用的分层架构,或者开始一个新的组件库项目。

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 19 Server Components with client-side state management?

To structure React 19 Server Components with state management, implement a layered strategy that separates server-side data fetching from client-side interactions using Context, Zustand, or Redux Toolkit to ensure maintainability and strict TypeScript typing.

What is the best way to optimize performance and enforce memoization in React 19?

The best way to optimize performance in React 19 is to enforce strict memoization practices and leverage modern hooks like the use() pattern for data fetching, ensuring minimal re-renders across server and client component boundaries.

Does this approach support integrating TanStack Query for data fetching in enterprise applications?

Yes, this approach supports integrating TanStack Query for data fetching in enterprise applications by guiding seamless integration with modern state management libraries to handle caching and data synchronization across component boundaries.

How do I migrate an existing React application to a scalable Server Components architecture?

To migrate an existing React application to Server Components architecture, follow a step-by-step migration path that progressively adopts use() patterns, modern state management, and strict TypeScript typing for scalable enterprise projects.

When should I not use React Server Components for data fetching?

You should not use React Server Components for data fetching when your component requires heavy client-side interactivity or direct browser API access; instead, apply client component patterns with Zustand or Redux Toolkit to manage state.

Can I use TypeScript strict typing with Zustand and Redux Toolkit in React 19?

Yes, you can use TypeScript strict typing with Zustand and Redux Toolkit in React 19 by applying enforced TypeScript best practices and scalable architecture patterns across your server and client component boundaries.