Skip to content
Mobile
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.

From plugin
skills
1.1k21 skills

Claude Code

$ npx -y skills add chrisbanes/skills --skill compose-state-and-effects --agent claude-code

SKILL.md

compose-state-and-effects.SKILL.md
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.

A screen-ownership review is incomplete until it names the plain, previewable content composable that receives immutable state and event callbacks separately from app wiring and composition-owned runtime objects.

Procedure

1. Establish the requested scope and visible behavioral requirements. Treat an ownership change as a finding only when code or task evidence shows a lifecycle, testability, business, or coordination need. In a focused contract or correctness review, a missing provider, owner, or writer that the code never needs is at most a noted risk; do not recommend ownership, default-value, or API-surface changes for it, even as optional. 2. Inventory mutable UI state, app state, event streams, app dependencies, and imperative work in the affected screen or component. 3. Place each state value at its lowest necessary owner: local UI state, hoisted state, a plain UI state holder, or a screen state holder. 4. For a screen boundary, keep durable data and intents in the wiring owner, Compose runtime objects in composition or a plain UI state holder, and rendering in a previewable content composable that takes immutable state and callbacks. Read [State hoisting](references/state-hoisting.md) for the implementation shape; naming only state and intents is not that boundary. Keep this content callable with sample state and callbacks; an `@Preview` wrapper is optional and is not required for the state-driven boundary. Before adding it, confirm the module declares its tooling; do not assume Compose runtime or UI dependencies provide it. Respect the task's file scope: do not add tooling or change build files unless authorized. If Preview tooling is needed but unavailable within scope, omit the wrapper and report the setup gap. 5. Choose an effect API whose lifecycle matches the work, and key it by the semantic input that should restart or dispose it. 6. Load the focused reference for every material concern below. Do not use a reference merely because its topic is adjacent. 7. Route frame-rate reads, cross-phase back-writing, and `@ReadOnlyComposable` contracts to [Compose performance](../compose-performance/SKILL.md). For that contract, distinguish a read of snapshot `State.value` from an operation that changes the composer; the state read alone is not a violation. 8. Before responding to a screen-ownership review, verify all three screen seams in step 4 when visible code needs them. 9. 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. For review-only work, report no change when no evidence-backed issue remains; do not invent product requirements.

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) |

Read more
@chrisbanes
Ships withskills

A set of skills for Kotlin, Jetpack Compose, Android development, and grounded writing. The repository is also a portable Agent Plugins and the immediate skill directories under skills/.

Stars on GitHub

Momentum

stars in total
1.1k
Star history of chrisbanes/skills on GitHub, a chart by star-history.com

Other skills on skills.

changelog

changelog

Use when updating or reviewing Unreleased changelog entries, reconciling a changelog against Git history and issue or PR…

@chrisbanes@chrisbanesInstall Skill
compose-animations

compose-animations

Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or…

@chrisbanes@chrisbanesInstall Skill
compose-performance

compose-performance

Use when investigating Jetpack Compose recomposition cost, compiler stability reports, skippability, unstable parameters,…

@chrisbanes@chrisbanesInstall Skill

More skills from other plugins.

deep-code-review

deep-code-review

In-depth design-focused code review - understands codebase context before evaluating PR changes, posts structured feedback to…

expo5d53k
@expo@expoInstall Skill
modlens

modlens

Plug-in vision for text-only models. Hard rule: when a file path or URL with an image extension (.png, .jpg, .jpeg, .webp, .gif,…

modlens3w4.6k
@liustack@liustackInstall Skill
appllama-app-design-skill

appllama-app-design-sk…

Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile…

appllama2mo3.9k
@appllama@appllamaInstall Skill

Questions about compose-state-and-effects.

Which coding agents can use compose-state-and-effects?
compose-state-and-effects installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.