Skip to main content
skill CX Codex

compose-state-and-effects — Claude Code skill: overview

This skill guides state ownership and side-effect choices in Jetpack Compose. It keeps UI state at the lowest responsible layer and matches effect lifecycles to their owners.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code
Open on GitHub

What compose-state-and-effects does

The skill enforces a clear review flow for Jetpack Compose architecture. Every state value goes to its lowest responsible owner, from local remember calls to plain state holders or screen state holders. Screen composables separate rendering from app wiring. This keeps previewable components reliant only on immutable state and event callbacks.

Effects run through APIs like LaunchedEffect or DisposableEffect. Each effect requires semantic keys so cleanup and restarts trigger at the right time. Frame-rate reads and @ReadOnlyComposable rules route to performance guidance instead.

The skill respects task boundaries. It forbids modifying build files or adding dependencies on its own. When a module lacks preview tooling, the agent flags the gap instead of generating @Preview wrappers.

What it helps with

  • assign UI state to the lowest responsible owner
  • pick the correct effect API for imperative operations
  • separate screen wiring from previewable content composables
  • key LaunchedEffect and DisposableEffect by semantic inputs

Example prompts for the agent

  • Review state ownership and side effects in HomeScreen.kt
  • Hoist state from this composable and select semantic keys for LaunchedEffect
  • Separate UI wiring from the previewable content composable in ProfileScreen.kt

How to install compose-state-and-effects

1Skills CLI (Vercel)

npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code

2Manually: put the files in place

~/.claude/skills/compose-state-and-effects/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/compose-state-and-effects/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about compose-state-and-effects

How do I install compose-state-and-effects in Claude Code?

Run npx skills add chrisbanes/skills --skill compose-state-and-effects -a claude-code.

What does compose-state-and-effects do?

It guides state ownership and effect lifecycles in Jetpack Compose, helping agents organize state holders and prevent side-effect bugs.

Will the skill add @Preview annotations automatically?

Only if the module already includes preview tooling dependencies. The skill forbids modifying build files to add tooling.

Source text

SKILL.md · Apache-2.0
---
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) |

© chrisbanes · Apache-2.0 · chrisbanes/skills

Similar skills

Everything for Mobile →

From the same set18

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor