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

デザインツール

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.

主な機能

Performance optimization workflows using profiling and targeted memoization
Standardized patterns for component composition and design principles
Strategic state management selection including Context, React Query, and Zustand
Comprehensive guidance for React 19 hooks and compiler optimizations
Best practices for TypeScript integration and error boundary implementation
0 GitHub stars

ユースケース

Architecting scalable state management for data-heavy enterprise applications
Refactoring complex legacy components into modular, hook-based functional patterns
Implementing 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

Download Skill

GitHub

概要