Does this skill support the latest React 19 features?

Yes, it includes specialized patterns for React 19 hooks like useActionState and useOptimistic, as well as guidance on leveraging the React Compiler.

Can this skill help optimize application performance?

Yes, it provides structured principles for identifying bottlenecks, profiling renders, and correctly implementing virtualization and memoization.

How does it help with state management selection?

The skill provides a complexity-based matrix to help you choose between local state, Context, server state (React Query), or global stores like Zustand.

Does it provide TypeScript support?

Absolutely. It includes patterns for interface-based props typing, complex union types, and React-specific event handler typing.

React Architecture & Design Patterns

Name: React Architecture & Design Patterns
Author: JantonioFC

byJantonioFC

•

디자인 도구

Implements production-ready React applications using modern architectural patterns, performance optimizations, and React 19 features.

This skill serves as a comprehensive guide and implementation assistant for building scalable, high-performance React applications. It provides expert-level guidance on component design principles (Server vs. Client), state management strategies (Zustand, React Query, Context), and modern React 19 hook patterns. It is designed to help developers refactor legacy codebases, ensure TypeScript type safety, and apply advanced composition patterns like Compound Components to create flexible and maintainable frontend architectures.

주요 기능

012 GitHub stars

02Component architecture guidance for Server and Client components

03Comprehensive state management decision trees and placement rules

04Advanced performance optimization and memoization strategies

05Modern React 19 hook implementation (useActionState, useOptimistic)

06TypeScript best practices for props, events, and generics

사용 사례

01Migrating legacy form logic to React 19 action-based state management

02Refactoring monolithic components into composable, single-responsibility units

03Architecting type-safe global state solutions for complex enterprise apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank react-patterns

For use in Claude.ai and ChatGPT

주요 기능

012 GitHub stars

02Component architecture guidance for Server and Client components

03Comprehensive state management decision trees and placement rules

04Advanced performance optimization and memoization strategies

05Modern React 19 hook implementation (useActionState, useOptimistic)

06TypeScript best practices for props, events, and generics

사용 사례

01Migrating legacy form logic to React 19 action-based state management

02Refactoring monolithic components into composable, single-responsibility units

03Architecting type-safe global state solutions for complex enterprise apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jantoniofc/skillsbank react-patterns

For use in Claude.ai and ChatGPT