React Composition Patterns

Note: This skill is a work in progress and hasn't been heavily reviewed yet. It was put together quickly based on important patterns that I could think of for now. Patterns and guidance may evolve — contributions and feedback are welcome.

A skill that teaches coding agents to write React components using composition patterns instead of monolithic, prop-heavy components.

The Problem

Coding agents tend to generate "god components" — single components with dozens of props that control every rendering variation. These components are hard to maintain, extend, and test.

// What agents typically generate
<Card
  title="User Profile"
  subtitle="Account details"
  icon={<UserIcon />}
  headerAction={<DropdownMenu />}
  body={<UserDetails user={user} />}
  footer={<Button>Save</Button>}
  variant="elevated"
  padding="lg"
/>

The Solution

This skill guides agents toward composition patterns — children, compound components, render props, slots, and polymorphic components — that produce flexible, maintainable code.

// What agents generate with this skill
<Card>
  <CardHeader>
    <UserIcon />
    <div>
      <h3>User Profile</h3>
      <p>Account details</p>
    </div>
    <DropdownMenu />
  </CardHeader>
  <CardBody>
    <UserDetails user={user} />
  </CardBody>
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>

Installation

npx skills add shutallbridge/react-composition-skill

For a specific agent

# Claude Code
npx skills add shutallbridge/react-composition-skill -a claude-code

# Cursor
npx skills add shutallbridge/react-composition-skill -a cursor

# Codex
npx skills add shutallbridge/react-composition-skill -a codex

What's Included

Patterns

Pattern	When to use	File
Children Composition	Layout wrappers, containers	rules/children-composition.md
Compound Components	Related sub-components sharing state (Tabs, Select)	rules/compound-components.md
Render Props	Consumer needs rendering control with provided data	rules/render-props.md
Slots	Multiple named content areas	rules/slots-pattern.md
Polymorphic Components	Render as different elements/components	rules/polymorphic-components.md
Custom Hooks	Reusable logic without JSX	rules/custom-hooks.md

Key Decisions

• Context over React.Children: All compound component examples use createContext/useContext. Never React.Children.map, cloneElement, or child type inspection.
• Props-based slots: Named content areas use typed props (header, footer) — not "slots by type" child inspection.
• Polymorphic via library: Don't roll your own as prop. Use Radix UI's asChild + Slot or Base UI's render prop.

How It Works

The skill uses a two-tier loading strategy:

1. SKILL.md is always loaded — provides pattern overviews, a decision guide, and anti-pattern red flags
2. rules/*.md files are loaded on-demand when the agent needs deeper guidance on a specific pattern

This keeps the agent's context focused while providing depth when needed.

Credits

This skill was informed by the following resources:

• Advanced Guide on React Component Composition — Makers' Den
• Advanced React Component Composition Guide — Frontend Mastery
• React Composition Patterns talk — Vercel (YouTube)

License

MIT