react-patterns

Design reusable React 18+ component patterns with TypeScript typings.

1|Updated Feb 2, 2026

Search Tags:#context #react #hooks #composition #component-patterns #frontend-architecture #react-patterns

Ready to run

npx skills add https://github.com/roberflo/claude-csharp --skill react-patterns-roberflo

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing reusable React components and scalable architecture can become inconsistent across teams, leading to duplicated work and fragile UI. This Skill provides proven patterns for composing components, managing state, and building robust interfaces with hooks, context, and composition techniques.

Core Features & Use Cases

Compound components: share implicit state across related components for cohesive UI.
Render props and container/presentation: separate logic from rendering for flexibility.
Custom hooks and patterns: reusable logic for state, effects, and side effects.
Context and state management: scalable approaches to theme, authentication, and data sharing.
Use Case: Build a tabbed interface or dashboard with predictable state and composable components.

Quick Start

Start by implementing a Tabs pattern with a compound component approach to manage shared state.

Frequently Asked Questions about react-patterns

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

FAQPage Schema

What is the best way to share implicit state across related React components?▼

Using compound React patterns is the best way to share implicit state across related components for cohesive UI. This approach allows you to build composable interfaces without prop drilling, ensuring predictable state management.

How do I separate business logic from rendering in React applications?▼

To separate logic from rendering in React, apply render props and container/presentation component patterns. These techniques provide flexibility by isolating your data-fetching and side-effect logic from the presentational UI components.

How do I build scalable state management for theme and authentication in React 18+?▼

Build scalable state management for theme and authentication in React 18+ using context and custom hooks. This approach provides a robust architecture for data sharing across your application while enforcing TypeScript typings for maintainable code.

Can I use these React component patterns with TypeScript for maintainable code?▼

Yes, these React component patterns enforce TypeScript typings and documented usage to ensure consistent, maintainable code. This guarantees type safety across your custom hooks, context, and component composition implementations.

When should I use custom hooks versus context for React state and side effects?▼

Use custom hooks for reusable localized state and side effects, and context for scalable global data sharing like themes or authentication. Combining both React patterns ensures robust interfaces without duplicating logic across your UI.

How do I implement a React tabbed interface with predictable state using component composition?▼

Implement a React tabbed interface with predictable state by applying a compound component pattern to manage shared state. This technique allows related components to share implicit state cohesively without excessive prop drilling.