Does this skill support the latest React 19 features?

Yes, it includes specific patterns for React 19 hooks such as useActionState, useOptimistic, and the new 'use' API for reading resources.

Does it provide guidance on performance optimization?

It follows a strict optimization order: profiling first to identify bottlenecks before applying targeted fixes like virtualization or memoization.

How does this skill assist with TypeScript integration?

It provides standardized patterns for typing component props, event handlers, and complex generic components to ensure type safety across the application.

Can it help me choose between different state management libraries?

Yes, the skill provides a decision matrix for selecting the right tool based on complexity, ranging from basic useState to Zustand or React Query.

React Architecture Patterns

Name: React Architecture Patterns
Author: claudiodearaujo

byclaudiodearaujo

0•

デザインツール

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

The React Patterns skill equips Claude with a comprehensive framework for building scalable and maintainable React applications. It provides domain-specific guidance on component design, hook extraction, and state management placement, ensuring code follows the philosophy of 'props down, events up.' By incorporating the latest React 19 patterns—such as useOptimistic and useActionState—alongside rigorous TypeScript typing and performance profiling strategies, this skill helps developers avoid common anti-patterns and build high-performance user interfaces that are easy to test and extend.

主な機能

01Strategic state management selection from Context to React Query

02React 19 implementation patterns for actions and optimistic UI

03Performance optimization workflows using profiling and memoization

04Advanced component composition and compound component structures

05TypeScript-first approach for props, events, and generic components

060 GitHub stars

ユースケース

01Architecting a new enterprise-grade React application with modern best practices

02Integrating React 19 features to simplify form handling and server interactions

03Refactoring complex components into reusable custom hooks and modular units

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill