/compose-component-design
Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.
$ npx -y skills add chrisbanes/skills --skill compose-component-design --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/compose-component-design
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.
SKILL.md
compose-component-design.SKILL.mdname: compose-component-design
description: Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.
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
1. State the component's invariant visual structure and identify every varying region, placement concern, and policy choice. 2. Accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct. 3. 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. 4. Keep simple conditional structure inline; extract only a coherent reusable contract. 5. Read the relevant focused reference below before editing public signatures. 6. 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](references/modifier-layout.md) | | Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flags | [Slot APIs](references/slot-apis.md) | | Animation belongs to the public component contract | [Compose animations](../compose-animations/SKILL.md) | | State ownership changes while designing the component | [Compose state and effects](../compose-state-and-effects/SKILL.md) | | Semantics or screenshot coverage is needed | [Compose UI testing patterns](../compose-ui-testing-patterns/SKILL.md) |
RED/GREEN agent scenarios
1. 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. 2. 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. 3. Counterexample: a private screen helper has one fixed child and no callers. GREEN keeps it simple instead of inventing slots for hypothetical reuse.
Read more
name: compose-component-design description: Use when designing or reviewing reusable Jetpack Compose component APIs with modifier parameters, root layout placement, caller-provided variable content, primitive content parameters, optional content, or boolean shape flags.
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
1. State the component's invariant visual structure and identify every varying region, placement concern, and policy choice. 2. Accept and apply a caller modifier at the component root unless a concrete API boundary makes another placement correct. 3. 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. 4. Keep simple conditional structure inline; extract only a coherent reusable contract. 5. Read the relevant focused reference below before editing public signatures. 6. 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](references/modifier-layout.md) | | Caller-controlled variable visual regions, optional content, primitive content parameters, or Boolean shape flags | [Slot APIs](references/slot-apis.md) | | Animation belongs to the public component contract | [Compose animations](../compose-animations/SKILL.md) | | State ownership changes while designing the component | [Compose state and effects](../compose-state-and-effects/SKILL.md) | | Semantics or screenshot coverage is needed | [Compose UI testing patterns](../compose-ui-testing-patterns/SKILL.md) |
RED/GREEN agent scenarios
1. 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. 2. 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. 3. Counterexample: a private screen helper has one fixed child and no callers. GREEN keeps it simple instead of inventing slots for hypothetical reuse.
A set of skills for Kotlin, Jetpack Compose, and Android development.
Repo: chrisbanes/skills
Other skills on chrisbanes-skills.
- /compose-animations
Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one state, switching composable content, or choosing between AnimatedVisibility, animate*AsState,
Open skill - /compose-focus-navigation
Use when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop, accessibility focus, D-pad navigation, FocusRequester, focusProperties, key events, or initial focus behavior.
Open skill - /compose-performance
Use when investigating Jetpack Compose recomposition cost, compiler stability reports, skippability, unstable parameters, frame-rate State reads, cross-phase snapshot back-writing, or @ReadOnlyComposable contracts.
Open skill - /compose-state-and-effects
Use when writing or reviewing Jetpack Compose state ownership, remember state, state hoisting, screen state holders, LaunchedEffect, DisposableEffect, SideEffect, Flow collection, navigation, snackbar, analytics, or focus requests.
Open skill - /compose-ui-testing-patterns
Use when writing or reviewing Jetpack Compose UI tests, screenshot tests, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.
Open skill - /kotlin-api-design
Use when designing or reviewing Kotlin function ownership, member or extension functions, factories, single-field domain types, value classes, data classes, Kotlin Multiplatform expect/actual declarations, or platform service boundaries.
Open skill