Developer pack
Claude Skill
React Composition Refactorer
Refactors React components drowning in boolean props into compound components, lifted state, and clean composition.
What it does
Takes a component with prop sprawl — isOpen, hasIcon, showHeader, variant, isLoading — and restructures it into compound components, context providers, and explicit variant components: APIs that stay readable as they scale, for humans and agents alike. Covers the React 19 changes (drop forwardRef, use the use() hook).
When to use
- ✓A component keeps growing boolean flags and every new case adds another
- ✓Designing a reusable component-library API meant to be extended
- ✓A component is hard to compose or its props contradict each other
When not to use
- ✗A one-off component used in a single place — don't over-engineer it
- ✗The problem is speed, not API shape (use the performance reviewer)
Install
Download the .zip, then unzip into your Claude skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/react-composition-refactorer.zip -d ~/.claude/skills/
# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.SKILL.md
SKILL.md
---
name: react-composition-refactorer
description: Use when a React component has too many boolean props, or when designing a reusable component API. Triggers on "boolean prop explosion", "compound components", "composable API", "refactor this component", "component library design".
---
# React Composition Refactorer
Boolean props multiply until the component is unreadable and half the combinations are invalid. `<Modal isOpen hasHeader hasFooter isFullscreen showClose isLoading />` can express states that should never exist. Composition fixes this: let the caller assemble the pieces instead of toggling flags.
## The moves, in order
1. **Compound components.** Replace one mega-component + flags with a parent that shares context and child parts the caller arranges: `<Modal><Modal.Header/><Modal.Body/><Modal.Footer/></Modal>`. The invalid combinations stop being expressible.
2. **Lift state into a provider.** Make the provider the only place that knows how state is managed; siblings read it through a generic interface (state, actions, meta). This decouples consumers from the implementation.
3. **Explicit variants over boolean modes.** A `primary` and a `danger` button as named variants beat `isPrimary` + `isDanger` that can both be true.
4. **Children over render props.** Prefer `children` for composition; reach for a `renderX` prop only when the caller genuinely needs injected internals.
## React 19 note
On React 19+, drop `forwardRef` (ref is a regular prop) and use the `use()` hook instead of `useContext()`. Skip this if the project is on React 18 or earlier.
## When NOT to refactor
Composition is for components that scale or get reused. A component rendered in exactly one place with three props doesn't need a compound API — leave it.
## Anti-patterns
- Adding "just one more" boolean instead of reaching for composition
- A provider that leaks how state is stored to every consumer
- Render props where plain `children` would do
- Compound-component machinery on a one-off component
Example prompts
Once installed, try these prompts in Claude:
- This Modal has 11 boolean props and every new case adds another. Refactor it to compound components.
- Design a composable Table API — sortable, selectable, expandable rows — without a boolean explosion.