react-patterns

Review React component architecture and recommend modern hooks, composition, and TypeScript patterns.

1|1|Updated Feb 9, 2026

Search Tags:#typescript #performance #react #hooks #composition #state-management #component-design

Ready to run

npx skills add https://github.com/przbadu/skills-factory --skill react-patterns-przbadu

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/przbadu/skills-factory/tree/main/skills/react-patterns
Command: npx skills add https://github.com/przbadu/skills-factory --skill react-patterns-przbadu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers turn messy React code into clean, maintainable, production-ready components by choosing the right patterns for state, hooks, composition, performance, and TypeScript.

Core Features & Use Cases

Component Design Guidance: Decide when to use server, client, presentational, and container components.
Hook and State Patterns: Select the right hook extraction, state placement, and state management approach for common app scenarios.
Performance and Reliability: Apply targeted optimization, error boundaries, testing priorities, and React 19 patterns with fewer anti-patterns.
Use Case: Use this Skill when reviewing a feature component tree, refactoring overgrown UI logic, or standardizing patterns across a React codebase.

Quick Start

Ask the React Patterns skill to review your component structure and recommend the best hooks, composition, performance, and TypeScript patterns for your current feature.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I refactor messy React components into maintainable code?▼

Refactoring messy React components requires selecting the right patterns for state, hooks, and composition to build clean, production-ready architecture. This involves deciding clear component boundaries and extracting hooks for overgrown UI logic.

What is the best way to structure React hooks and state management?▼

Structuring React hooks and state involves selecting the right hook extraction and state placement patterns for specific application scenarios. Proper component design separates container and presentational logic to optimize state management decisions.

When do I need React 19 patterns for performance optimization?▼

React 19 patterns are needed when reviewing feature component trees for performance and reliability. They provide targeted optimization and error boundary implementation while avoiding common anti-patterns in production applications.

Does TypeScript work with React composition patterns for client and server components?▼

TypeScript works with React composition patterns by guiding the design of server, client, presentational, and container components. It ensures type-safe component boundaries and hook usage across production applications.

Why should I avoid anti-patterns when standardizing React codebases?▼

Avoiding anti-patterns is necessary to maintain performance and reliability across a React codebase. Standardizing patterns for hooks, composition, and error boundaries prevents overgrown UI logic and ensures maintainable component architecture.

Can I use component composition to reduce overgrown React UI logic?▼

Component composition reduces overgrown React UI logic by establishing clear component boundaries and extracting reusable hooks. This approach separates presentational and container components to streamline state placement decisions.