Does this skill support React 19 features?

Yes, it includes specific patterns for React 19 hooks such as useActionState and useOptimistic, as well as guidance on the React Compiler.

Does it provide guidance on component composition?

Yes, it covers compound components, slot-based composition, and the trade-offs between Render Props, Hooks, and HOCs.

How does it assist with state management selection?

The skill provides a complexity-based matrix to help you choose between useState, Context API, React Query, SWR, Zustand, or Redux Toolkit.

What performance optimizations are included?

It outlines a targeted optimization order: profiling first, identifying bottlenecks, and then applying virtualization or memoization hooks like useMemo and useCallback.

Can it help with TypeScript integration in React?

Absolutely. It provides standardized patterns for prop typing, generic components, and common React types like ReactNode and MouseEventHandler.

React Architecture & Design Patterns

Name: React Architecture & Design Patterns
Author: claudiodearaujo

byclaudiodearaujo

Design Tools

Guides the implementation of production-ready React applications using modern patterns, React 19 features, and TypeScript best practices.

About

This skill empowers Claude to act as a senior React architect, providing structural guidance on component design, state management, and performance optimization. It covers everything from basic hook usage and composition patterns to advanced React 19 features like useActionState and useOptimistic. Whether you are refactoring legacy code or starting a new project, this skill ensures your codebase adheres to industry-standard principles, minimizes anti-patterns, and maintains high performance through optimized rendering and efficient state placement.

Key Features

React 19 specific implementation patterns including useActionState and useOptimistic
Component design principles for Server, Client, and Presentational types
Comprehensive state management selection from Context to Zustand
Performance optimization workflows and TypeScript best practices for props and events
Advanced Hook patterns and custom hook extraction strategies
0 GitHub stars

Use Cases

Migrating existing applications to utilize React 19 features and compiler benefits
Auditing codebases to eliminate anti-patterns like prop drilling and improper useEffect usage
Refactoring monolithic components into composable, small, and focused 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

GitHub