React Composition Patterns

This codifies the composition patterns that prevent your component APIs from turning into boolean prop soup. It guides you toward compound components, context providers, and explicit variants instead of cramming everything into a single component with fifteen true/false flags. The rules are prioritized by impact and organized around architecture, state management, and implementation patterns. Most valuable when you're building a component library or refactoring something that's already accumulated too many conditional branches. From Vercel, which makes sense given they deal with this at scale in their UI libraries.

skills.sh installs: 494
GitHub stars: 248
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add secondsky/claude-skills --skill react-composition-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

When to Apply

Reference these guidelines when:

Refactoring components with many boolean props
Building reusable component libraries
Designing flexible component APIs
Reviewing component architecture
Working with compound components or context providers

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Component Architecture	HIGH	`architecture-`
2	State Management	MEDIUM	`state-`
3	Implementation Patterns	MEDIUM	`patterns-`

Quick Reference

1. Component Architecture (HIGH)

architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
architecture-compound-components - Structure complex components with shared context

SKILL.md on GitHub