hi-manshu Compose component design
Core principle
Make reusable components caller-placeable and caller-composable: the component owns its invariant structure while callers retain placement, content, and policy choices that vary by use.
Procedure
- State the component's invariant visual structure and identify every varying region, placement concern, and policy choice.
- Accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct.
- Represent caller-controlled, unconstrained visual regions with slots rather than proliferating primitive content parameters or Boolean shape flags. Keep semantic and design-system constraints as primitive parameters.
- Keep simple conditional structure inline; extract only a coherent reusable contract.
- Read the relevant focused reference below before editing public signatures.
- Finish when callers can position the component, supply variable content, and understand ownership without needing hidden layout or content switches.
Topic router
| Signal | Read |
|---|---|
| Modifier parameter, root layout placement, modifier ordering, or conditional layout wrappers | Modifier and layout |
| Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flags | Slot APIs |
| Animation belongs to the public component contract | Compose animations |
| State ownership changes while designing the component | Compose state and effects |
| Semantics or screenshot coverage is needed | Compose UI testing patterns |
RED/GREEN agent scenarios
- RED exposes
title: String,icon: ImageVector?, and several display flags for a reusable card. GREEN keeps invariant chrome and gives callers the variable regions as named slots. - Novel case: a component needs both a root modifier and caller-supplied trailing content. GREEN applies the modifier at the root and supplies a trailing slot without leaking internal layout.
- Counterexample: a private screen helper has one fixed child and no callers. GREEN keeps it simple instead of inventing slots for hypothetical reuse.