# Send React Composition to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "react-composition",
    "name": "React Composition",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/wpank/react-composition",
    "canonicalUrl": "https://clawhub.ai/wpank/react-composition",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/react-composition",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-composition",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "README.md",
      "SKILL.md"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "react-composition",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T23:12:10.322Z",
      "expiresAt": "2026-05-14T23:12:10.322Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-composition",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=react-composition",
        "contentDisposition": "attachment; filename=\"react-composition-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "react-composition"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/react-composition"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/react-composition",
    "downloadUrl": "https://openagent3.xyz/downloads/react-composition",
    "agentUrl": "https://openagent3.xyz/skills/react-composition/agent",
    "manifestUrl": "https://openagent3.xyz/skills/react-composition/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/react-composition/agent.md"
  }
}
```
## Documentation

### 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 to work with as they
scale.

### When to Apply

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

### Pattern Overview

#PatternImpact1Avoid Boolean PropsCRITICAL2Compound ComponentsHIGH3Context Interface (DI)HIGH4State LiftingHIGH5Explicit VariantsMEDIUM6Children Over Render PropsMEDIUM

### OpenClaw / Moltbot / Clawbot

npx clawhub@latest install react-composition

### 1. Avoid Boolean Prop Proliferation

Don't add boolean props like isThread, isEditing, isDMThread to customize
behavior. Each boolean doubles possible states and creates unmaintainable
conditional logic. Use composition instead.

// BAD — boolean props create exponential complexity
function Composer({ isThread, isDMThread, isEditing, isForwarding }: Props) {
  return (
    <form>
      <Input />
      {isDMThread ? <AlsoSendToDMField /> : isThread ? <AlsoSendToChannelField /> : null}
      {isEditing ? <EditActions /> : isForwarding ? <ForwardActions /> : <DefaultActions />}
    </form>
  )
}

// GOOD — composition eliminates conditionals
function ChannelComposer() {
  return (
    <Composer.Frame>
      <Composer.Input />
      <Composer.Footer><Composer.Attachments /><Composer.Submit /></Composer.Footer>
    </Composer.Frame>
  )
}

function ThreadComposer({ channelId }: { channelId: string }) {
  return (
    <Composer.Frame>
      <Composer.Input />
      <AlsoSendToChannelField id={channelId} />
      <Composer.Footer><Composer.Submit /></Composer.Footer>
    </Composer.Frame>
  )
}

Each variant is explicit about what it renders. Shared internals without a
monolithic parent.

### 2. Compound Components

Structure complex components with shared context. Each subcomponent accesses
state via context, not props. Export as a namespace object.

const ComposerContext = createContext<ComposerContextValue | null>(null)

function ComposerProvider({ children, state, actions, meta }: ProviderProps) {
  return <ComposerContext value={{ state, actions, meta }}>{children}</ComposerContext>
}
function ComposerInput() {
  const { state, actions: { update }, meta: { inputRef } } = use(ComposerContext)
  return <TextInput ref={inputRef} value={state.input}
    onChangeText={(t) => update((s) => ({ ...s, input: t }))} />
}

const Composer = {
  Provider: ComposerProvider, Frame: ComposerFrame,
  Input: ComposerInput, Submit: ComposerSubmit, Footer: ComposerFooter,
}

// Consumers compose exactly what they need
<Composer.Provider state={state} actions={actions} meta={meta}>
  <Composer.Frame>
    <Composer.Input />
    <Composer.Footer><Composer.Formatting /><Composer.Submit /></Composer.Footer>
  </Composer.Frame>
</Composer.Provider>

### 3. Generic Context Interface (Dependency Injection)

Define a generic interface with state, actions, and meta. Any provider
implements this contract — enabling the same UI to work with different state
implementations. The provider is the only place that knows how state is managed.

interface ComposerContextValue {
  state: { input: string; attachments: Attachment[]; isSubmitting: boolean }
  actions: { update: (fn: (s: ComposerState) => ComposerState) => void; submit: () => void }
  meta: { inputRef: React.RefObject<TextInput> }
}

// Provider A: Local state for ephemeral forms
function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState(initialState)
  return (
    <ComposerContext value={{ state, actions: { update: setState, submit: useForwardMessage() },
      meta: { inputRef: useRef(null) } }}>{children}</ComposerContext>
  )
}

// Provider B: Global synced state for channels
function ChannelProvider({ channelId, children }: Props) {
  const { state, update, submit } = useGlobalChannel(channelId)
  return (
    <ComposerContext value={{ state, actions: { update, submit },
      meta: { inputRef: useRef(null) } }}>{children}</ComposerContext>
  )
}

Swap the provider, keep the UI. Same Composer.Input works with both.

### 4. Lift State into Providers

Move state into dedicated provider components so sibling components outside the
main UI can access and modify state without prop drilling or refs.

// BAD — state trapped inside component; siblings can't access it
function ForwardMessageComposer() {
  const [state, setState] = useState(initialState)
  return <Composer.Frame><Composer.Input /><Composer.Footer /></Composer.Frame>
}
function ForwardMessageDialog() {
  return (
    <Dialog>
      <ForwardMessageComposer />
      <MessagePreview />        {/* Can't access composer state */}
      <ForwardButton />         {/* Can't call submit */}
    </Dialog>
  )
}

// GOOD — state lifted to provider; any descendant can access it
function ForwardMessageProvider({ children }: { children: React.ReactNode }) {
  const [state, setState] = useState(initialState)
  const submit = useForwardMessage()
  return (
    <Composer.Provider state={state} actions={{ update: setState, submit }}
      meta={{ inputRef: useRef(null) }}>{children}</Composer.Provider>
  )
}
function ForwardMessageDialog() {
  return (
    <ForwardMessageProvider>
      <Dialog>
        <ForwardMessageComposer />
        <MessagePreview />       {/* Reads state from context */}
        <ForwardButton />        {/* Calls submit from context */}
      </Dialog>
    </ForwardMessageProvider>
  )
}
function ForwardButton() {
  const { actions } = use(Composer.Context)
  return <Button onPress={actions.submit}>Forward</Button>
}

Key insight: Components that need shared state don't have to be visually
nested — they just need to be within the same provider.

### 5. Explicit Variant Components

Instead of one component with many boolean props, create explicit variants.
Each composes the pieces it needs — self-documenting, no impossible states.

// BAD — what does this render?
<Composer isThread isEditing={false} channelId="abc" showAttachments showFormatting={false} />

// GOOD — immediately clear
<ThreadComposer channelId="abc" />
<EditMessageComposer messageId="xyz" />
<ForwardMessageComposer messageId="123" />

Each variant is explicit about its provider/state, UI elements, and actions.

### 6. Children Over Render Props

Use children for composition instead of renderX props. Children are more
readable and compose naturally.

// BAD — render props
<Composer
  renderHeader={() => <CustomHeader />}
  renderFooter={() => <><Formatting /><Emojis /></>}
/>

// GOOD — children composition
<Composer.Frame>
  <CustomHeader />
  <Composer.Input />
  <Composer.Footer><Composer.Formatting /><SubmitButton /></Composer.Footer>
</Composer.Frame>

When render props are appropriate: When the parent needs to pass data back
(e.g., renderItem={({ item, index }) => ...}).

### Decision Guide

Component has 3+ boolean props? → Extract explicit variants (1, 5)
Component has render props? → Convert to compound components (2, 6)
Siblings need shared state? → Lift state to provider (4)
Same UI, different data sources? → Generic context interface (3)
Building a component library? → Apply all patterns together
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: wpank
- Version: 1.0.0
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-05-07T23:12:10.322Z
- Expires at: 2026-05-14T23:12:10.322Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/react-composition)
- [Send to Agent page](https://openagent3.xyz/skills/react-composition/agent)
- [JSON manifest](https://openagent3.xyz/skills/react-composition/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/react-composition/agent.md)
- [Download page](https://openagent3.xyz/downloads/react-composition)