React Component Patterns

About

This skill empowers Claude to architect production-grade React applications using industry-standard design patterns. It provides structured guidance and ready-to-use implementations for complex logic sharing and component composition, covering everything from Compound Components and Render Props to Higher-Order Components and State Reducers. Whether you are building a robust design system from scratch or refactoring legacy code for better state control, this skill ensures your React architecture remains scalable, accessible, and clean.

Key Features

• Reusable custom hook patterns for efficient stateful logic sharing
• Standardized implementations of Compound Components using React Context
• Flexible component APIs with Prop Getters and Controlled/Uncontrolled logic
• Advanced state management using State Reducer and Provider patterns
• Dynamic rendering logic via Render Props and Higher-Order Components (HOCs)
• 7 GitHub stars

Use Cases

• Creating highly customizable component libraries and enterprise design systems
• Refactoring monolithic components into modular, composable architectural patterns
• Building complex, accessible UI components like Tabs, Accordions, and Modals