Does it provide guidance on state management?

Yes, it offers a selection matrix for choosing between useState, Context, React Query, and global stores like Zustand based on application complexity.

Can it help with TypeScript integration in React?

Absolutely. It provides standardized patterns for typing props, event handlers, and refs using Interfaces, Types, and Generics.

Does this skill support React 19 features?

Yes, it includes specific guidance on new React 19 hooks like useActionState, useOptimistic, and explains the benefits of the React Compiler.

When should I use this skill?

Use this skill when architecting new components, refactoring state logic, or optimizing the performance of existing React applications.

React Design Patterns & Principles

Name: React Design Patterns & Principles
Author: claudiodearaujo

byclaudiodearaujo

•

Learning & Documentation

Implements modern React architecture, performance optimizations, and TypeScript best practices for production-ready applications.

This skill equips Claude with a comprehensive framework for building high-quality React applications using modern industry standards. It covers essential design principles like component composition and state management selection, while also incorporating advanced React 19 features such as useActionState and useOptimistic. By following these standardized patterns, developers can ensure their codebases are scalable, maintainable, and optimized for performance, with clear guidance on error handling and robust TypeScript integration.

Key Features

011 GitHub stars

02Performance profiling and targeted optimization strategies

03Standardized component design (Server vs. Client components)

04React 19 feature implementation including useActionState and useOptimistic

05Advanced hook patterns and custom hook extraction logic

06Comprehensive TypeScript patterns for React props, events, and refs

Use Cases

01Architecting complex state management solutions using Context or Zustand

02Refactoring legacy React components into modern functional patterns

03Optimizing application performance through virtualization and memoization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro react-patterns

For use in Claude.ai and ChatGPT

Download Skill