Does this skill support React 19 specific features?

Yes, it includes specialized guidance for React 19 features such as the use() hook, useActionState for forms, and useOptimistic for UI updates.

Does it include anti-patterns to avoid?

Yes, it identifies common mistakes like using useEffect for state synchronization or data fetching and provides modern, performant alternatives.

Can it help with state management decisions?

Absolutely. It provides a structured decision tree to help you choose between useState, useReducer, Context API, or server-state libraries like React Query.

Is this skill useful for complex UI libraries?

Yes, it specializes in the Compound Component pattern, which is the industry standard for building flexible and maintainable UI design systems.

Modern React Patterns

Name: Modern React Patterns
Author: dding-g

bydding-g

0•

Design Tools

Implements high-performance React 19+ architecture using modern state management, Suspense, and the latest hook patterns.

Provides expert guidance for building robust React applications using the latest React 19 features. This skill ensures your codebase follows industry-standard patterns for state management, component composition, and data fetching while avoiding common anti-patterns like useEffect for synchronization. It covers everything from compound components to advanced React 19 hooks like useActionState and useOptimistic, making it ideal for developers looking to modernize their frontend stack or maintain clean, scalable UI logic.

Key Features

01Performance Optimization through Derived State and Code Splitting

02React 19 Hook Implementation (use, useActionState, useOptimistic)

030 GitHub stars

04Modern State Management Decision Architectures

05Advanced Component Composition and Compound Patterns

06Error Boundary and Suspense for Progressive Loading

Use Cases

01Migrating legacy React applications to React 19 standards

02Optimizing frontend data fetching and form handling logic

03Building complex, accessible UI components using Compound Component patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dding-g/ddingg-claude-marketplace react-patterns

For use in Claude.ai and ChatGPT

Download Skill