About compose-component-design
A component API design skill for Jetpack Compose developers. It guides reusable components that preserve invariant structure while letting callers control placement and variable content, with focused decision procedures for modifiers and slots.
Key features
- 01Inventory fixed structure and variable regions
- 02Guide root modifier placement
- 03Choose slots or semantic parameters
- 04Keep changes within the requested concern
- 05Route decisions to focused references
Use cases
- 01Review slots and content parameters
- 02Design a component root modifier API
- 03Decide which visual regions callers supply
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/compose-component-designin Claude Code to confirm it loaded.
Bundled filesreferences/modifier-layout.mdreferences/slot-apis.md
Details
From the project READMECompose 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 requested API concern and keep the edit within it. A focused slot review does not authorize unrelated modifier, naming, or cleanup changes.
- State the component's invariant visual structure and identify every varying region, placement concern, and policy choice. In a broad API review, inventory all rendered regions, including hard-coded text or icons, before deciding which are fixed semantic content and which vary by caller. When the request names more than one concern, report each one; do not stop after the first valid modifier or slot finding.
- When root placement is part of the requested work or a broad component API design, accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct. With conditional roots, apply it to every branch root rather than merging branches into one wrapper.
- 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.
- In a review, decide explicitly whether each requested variable visual region should remain a semantic primitive or become a caller slot; naming a content limitation alone does not make that API decision. Finish with no edit when the existing API already satisfies the requested concern. Otherwise finish when callers can position the component, supply variable content, and understand ownership without hidden 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 |
Comments
Markdown supported