react-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture.

1.43x

Quality

81%

Does it follow best practices?

Impact

99%

1.43x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

97%

52%

Refactor: Product Card Component

Avoid boolean props, create explicit variants

Criteria

Without context

With context

No boolean mode props

100%

Explicit variant components

100%

Compound component export

100%

Shared context created

100%

State/actions/meta interface

100%

Provider isolates state

100%

Children not render props

50%

100%

No conditional branching on mode

100%

70%

Sub-components use context

100%

32%

Build a Reusable Accordion Component

Generic context interface, state/actions/meta, decouple state from UI

Criteria

Without context

With context

Context interface has state

40%

100%

Context interface has actions

40%

100%

Context interface has meta

100%

Provider owns state logic

100%

Two distinct providers

100%

Same UI with both providers

100%

Sub-components use context hook

100%

No renderX props on sub-components

100%

Compound object export

100%

Build a Bulk Tag Editor Dialog

Lift state, provider boundary, children over render props

Criteria

Without context

With context

Provider wraps dialog

100%

Action button uses context

100%

No useEffect for state sync

100%

No ref-based state sharing

100%

State isolated in provider

100%

Children for layout

80%

100%

Preview/display uses context

100%

No boolean mode props

100%

Compound sub-components

40%

100%

Repository: secondsky/claude-skills
Commit: 90d6bd7

Evaluated: 29 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Refactor: Product Card Component Build a Reusable Accordion Component Build a Bulk Tag Editor Dialog

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.