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

0•

Herramientas de Diseño

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

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.

Características Principales

01React 19 specific implementation patterns including useActionState and useOptimistic

02Component design principles for Server, Client, and Presentational types

03Comprehensive state management selection from Context to Zustand

04Performance optimization workflows and TypeScript best practices for props and events

05Advanced Hook patterns and custom hook extraction strategies

060 GitHub stars

Casos de Uso

01Migrating existing applications to utilize React 19 features and compiler benefits

02Auditing codebases to eliminate anti-patterns like prop drilling and improper useEffect usage

03Refactoring 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

Características Principales

01React 19 specific implementation patterns including useActionState and useOptimistic

02Component design principles for Server, Client, and Presentational types

03Comprehensive state management selection from Context to Zustand

04Performance optimization workflows and TypeScript best practices for props and events

05Advanced Hook patterns and custom hook extraction strategies

060 GitHub stars

Casos de Uso

01Migrating existing applications to utilize React 19 features and compiler benefits

02Auditing codebases to eliminate anti-patterns like prop drilling and improper useEffect usage

03Refactoring 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