How does it handle performance optimization?

The skill follows a 'profile first' approach, guiding Claude to identify bottlenecks before applying fixes like virtualization, useMemo, or useCallback.

Can it help me choose between different state management libraries?

Yes, it includes a decision framework to help you select the right tool—from useState and Context to external libraries like Zustand or React Query—based on your application's complexity.

How does this skill help with React 19?

It provides specific implementation patterns for new React 19 hooks like useActionState and useOptimistic, while helping you leverage the new React Compiler benefits.

Does it include TypeScript best practices?

Absolutely. It provides standardized ways to type component props, event handlers, and refs to ensure type safety across your React project.

React Production Patterns

Name: React Production Patterns
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Implements modern React architecture, hooks, and performance best practices for production-ready web applications.

This skill equips Claude with a comprehensive framework for building high-quality React applications by enforcing industry-standard design principles and modern development patterns. It provides expert guidance on component composition, state management selection, and the latest React 19 features like useActionState and useOptimistic. Whether you are refactoring legacy code or architecting a new frontend, this skill ensures your React codebase remains maintainable, performant, and correctly typed with TypeScript.

Key Features

01Performance optimization workflows using profiling and targeted memoization

02Standardized patterns for component composition and design principles

03Strategic state management selection including Context, React Query, and Zustand

04Comprehensive guidance for React 19 hooks and compiler optimizations

05Best practices for TypeScript integration and error boundary implementation

060 GitHub stars

Use Cases

01Architecting scalable state management for data-heavy enterprise applications

02Refactoring complex legacy components into modular, hook-based functional patterns

03Implementing robust error handling and recovery strategies across application subtrees

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter react-patterns

For use in Claude.ai and ChatGPT

Key Features

01Performance optimization workflows using profiling and targeted memoization

02Standardized patterns for component composition and design principles

03Strategic state management selection including Context, React Query, and Zustand

04Comprehensive guidance for React 19 hooks and compiler optimizations

05Best practices for TypeScript integration and error boundary implementation

060 GitHub stars

Use Cases

01Architecting scalable state management for data-heavy enterprise applications

02Refactoring complex legacy components into modular, hook-based functional patterns

03Implementing robust error handling and recovery strategies across application subtrees

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter react-patterns

For use in Claude.ai and ChatGPT