/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.
$ npx -y skills add chrisbanes/skills --skill compose-state-and-effects --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-state-and-effects
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
compose-state-and-effects.SKILL.mdname: compose-state-and-effects
description: 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.
Compose state and effects
Core principle
Give every piece of UI state one lowest responsible owner, then run imperative work through the effect whose lifecycle follows that owner. Composition renders; state and effects make rendering change safely.
Procedure
1. Inventory mutable UI state, app state, event streams, app dependencies, and imperative work in the affected screen or component. 2. Place each state value at its lowest necessary owner: local UI state, hoisted state, a plain UI state holder, or a screen state holder. 3. Keep app wiring and business state at the screen boundary; expose plain UI state and explicit callbacks to previewable rendering. 4. Choose an effect API whose lifecycle matches the work, and key it by the semantic input that should restart or dispose it. 5. Load the focused reference for every material concern below. Do not use a reference merely because its topic is adjacent. 6. Route frame-rate reads, cross-phase back-writing, and `@ReadOnlyComposable` contracts to [Compose performance](../compose-performance/SKILL.md). 7. Finish when every state value has one owner, every effect has a justified lifecycle and key, and the UI can be previewed and tested without app dependencies.
Topic router
| Signal | Read | |---|---| | Bare local `var`, `remember { mutableStateOf(...) }`, state lists/maps, or reset state | [Local state](references/local-state.md) | | State shared by siblings, UI state holders, ViewModel/component wiring, or previewable screen boundaries | [State hoisting](references/state-hoisting.md) | | `LaunchedEffect`, `DisposableEffect`, `SideEffect`, `snapshotFlow`, `rememberCoroutineScope`, `rememberUpdatedState`, `produceState`, imperative `requestFocus`, callbacks, event Flow collection, snackbar, navigation, or analytics | [Side effects](references/side-effects.md) | | Focus ownership and keyboard/TV/D-pad behavior | [Compose focus navigation](../compose-focus-navigation/SKILL.md) | | Tests or previews for the resulting UI contract | [Compose UI testing patterns](../compose-ui-testing-patterns/SKILL.md) |
RED/GREEN agent scenarios
1. RED keeps a component, collected `StateFlow`, navigation event, and screen layout in one composable. GREEN leaves wiring and effects at the screen boundary and gives plain rendering immutable state plus callbacks. 2. Novel case: a query drives repository suggestions while a list state and focus requester coordinate UI behavior. GREEN puts query and suggestions in the screen state holder, but keeps Compose runtime objects in plain UI state. 3. Counterexample: a one-off expandable badge has one private Boolean. GREEN keeps it local and does not introduce a state holder or an effect.
Read more
name: compose-state-and-effects description: 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.
Compose state and effects
Core principle
Give every piece of UI state one lowest responsible owner, then run imperative work through the effect whose lifecycle follows that owner. Composition renders; state and effects make rendering change safely.
Procedure
1. Inventory mutable UI state, app state, event streams, app dependencies, and imperative work in the affected screen or component. 2. Place each state value at its lowest necessary owner: local UI state, hoisted state, a plain UI state holder, or a screen state holder. 3. Keep app wiring and business state at the screen boundary; expose plain UI state and explicit callbacks to previewable rendering. 4. Choose an effect API whose lifecycle matches the work, and key it by the semantic input that should restart or dispose it. 5. Load the focused reference for every material concern below. Do not use a reference merely because its topic is adjacent. 6. Route frame-rate reads, cross-phase back-writing, and `@ReadOnlyComposable` contracts to [Compose performance](../compose-performance/SKILL.md). 7. Finish when every state value has one owner, every effect has a justified lifecycle and key, and the UI can be previewed and tested without app dependencies.
Topic router
| Signal | Read | |---|---| | Bare local `var`, `remember { mutableStateOf(...) }`, state lists/maps, or reset state | [Local state](references/local-state.md) | | State shared by siblings, UI state holders, ViewModel/component wiring, or previewable screen boundaries | [State hoisting](references/state-hoisting.md) | | `LaunchedEffect`, `DisposableEffect`, `SideEffect`, `snapshotFlow`, `rememberCoroutineScope`, `rememberUpdatedState`, `produceState`, imperative `requestFocus`, callbacks, event Flow collection, snackbar, navigation, or analytics | [Side effects](references/side-effects.md) | | Focus ownership and keyboard/TV/D-pad behavior | [Compose focus navigation](../compose-focus-navigation/SKILL.md) | | Tests or previews for the resulting UI contract | [Compose UI testing patterns](../compose-ui-testing-patterns/SKILL.md) |
RED/GREEN agent scenarios
1. RED keeps a component, collected `StateFlow`, navigation event, and screen layout in one composable. GREEN leaves wiring and effects at the screen boundary and gives plain rendering immutable state plus callbacks. 2. Novel case: a query drives repository suggestions while a list state and focus requester coordinate UI behavior. GREEN puts query and suggestions in the screen state holder, but keeps Compose runtime objects in plain UI state. 3. Counterexample: a one-off expandable badge has one private Boolean. GREEN keeps it local and does not introduce a state holder or an effect.
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-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.
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-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