chrisbanes/skills

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.

Trending #7751 First seen Aug 6, 2026

Installation

$ npx skills add chrisbanes/skills --skill compose-state-and-effects

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from chrisbanes/skills · top by installs.

npx skills add chrisbanes/skills

Browse all from chrisbanes/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1.0K
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,317 B
  • docs SUMMARY.md 3,244 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 402 installs

SKILL.md

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.

  1. Inventory mutable UI state, app state, event streams, app dependencies, and

imperative work in the affected screen or component.

  1. Place each state value at its lowest necessary owner: local UI state,

hoisted state, a plain UI state holder, or a screen state holder.

  1. 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.

  1. Choose an effect API whose lifecycle matches the work, and key it by the

semantic input that should restart or dispose it.

  1. Load the focused reference for every material concern below. Do not use a

reference merely because its topic is adjacent.

  1. Route frame-rate reads, cross-phase back-writing, and

@ReadOnlyComposable contracts to [Compose performance](../compose-performance/SKILL.md).

  1. Before responding to a screen-ownership review, verify all three screen

seams in step 4 when visible code needs them.

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