Does it help with performance optimization?

Yes, it provides a dedicated workflow for identifying bottlenecks using Profiler tools and applying fixes like useMemo, useCallback, or virtualization.

Can I use this for TypeScript projects?

Absolutely. The skill includes specific patterns for typing component props, event handlers, and refs using TypeScript interfaces and generics.

Does this skill include support for React 19?

Yes, it covers modern React 19 patterns including the use of useActionState, useOptimistic, and the React Compiler's automatic memoization benefits.

How does this skill handle state management?

It provides a clear hierarchy for state placement, ranging from simple useState for local components to Zustand or Redux Toolkit for complex global state.

React Patterns & Best Practices

Name: React Patterns & Best Practices
Author: claudiodearaujo

byclaudiodearaujo

0•

開発者ツール

Enforces modern React architectural principles and implementation patterns for building scalable, production-ready frontend applications.

The React Patterns skill provides a comprehensive framework for developing high-quality React applications. It guides Claude through component design architecture, hook extraction strategies, and state management selection, ensuring code follows the principle of composition over inheritance. By incorporating React 19 features, performance optimization workflows, and robust TypeScript typing, this skill helps developers avoid common anti-patterns like prop-drilling or giant components, resulting in maintainable and performant codebases.

主な機能

01State management selection matrix for local, server, and global states

020 GitHub stars

03Structured hook patterns for state, side effects, and custom logic

04Architectural guidance for Server and Client component separation

05Implementation patterns for React 19 hooks like useOptimistic and useActionState

06Performance optimization workflows including profiling and virtualization

ユースケース

01Implementing complex form logic or data fetching using custom hook patterns

02Refactoring monolithic components into smaller, focused, and reusable units

03Integrating TypeScript best practices into existing React component libraries

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