react-expert

Guide React 18+ app development with TypeScript and state management libraries.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/fulfon/lusena-dawn --skill react-expert-fulfon
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-expert
Source: https://github.com/fulfon/lusena-dawn/tree/main/.opencode/skills/react-expert
Command: npx skills add https://github.com/fulfon/lusena-dawn --skill react-expert-fulfon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides expert-level assistance for building complex, high-performance React applications, ensuring adherence to modern best practices and advanced patterns.

Core Features & Use Cases

  • Component Architecture: Design and implement robust, reusable React components.
  • State Management: Integrate and manage state effectively using hooks, Context, Zustand, or Redux.
  • Performance Optimization: Identify and resolve performance bottlenecks using memoization, lazy loading, and virtualization.
  • React 19 Features: Leverage new features like Server Components, use() hook, and form actions.
  • Use Case: Refactor a legacy class-based component into a modern functional component using hooks, or set up Suspense for efficient data fetching and streaming.

Quick Start

Use the react-expert skill to create a new React component that fetches data from the '/api/users' endpoint.

Frequently Asked Questions about react-expert

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

FAQPage Schema
How do I implement React Server Components and Suspense for data fetching?

React Server Components and Suspense enable efficient data fetching and streaming by allowing the UI to render progressively. You can refactor components to leverage these features for loading states and fetching data directly on the server.

What is the best way to manage state in React 18 using Zustand or Redux?

The best way to manage state in React 18 involves integrating hooks, Context, or dedicated libraries like Zustand and Redux. This approach ensures robust state management across complex component architectures.

How do I optimize React performance using memoization and lazy loading?

Optimize React performance by applying memoization, lazy loading, and virtualization to resolve bottlenecks. These techniques prevent unnecessary re-renders and defer loading components until they are needed.

Can I use the React 19 use() hook and form actions in my TypeScript project?

Yes, you can use the React 19 use() hook and form actions within a TypeScript project. This Skill facilitates implementing frontend applications using TypeScript while leveraging these advanced React APIs.

How do I refactor a legacy class-based React component to functional hooks?

Refactor legacy class-based components into modern functional components by replacing lifecycle methods with hooks. This transition modernizes the architecture and aligns with current React best practices.

Does this guidance cover integrating TanStack Query for data fetching?

Yes, the guidance covers integrating TanStack Query for data fetching. It facilitates frontend application implementation using TypeScript with specific integrations for TanStack Query, Zustand, and Redux.