compose-state-holder-ui-split

Separates state-holder wiring from UI rendering in Jetpack Compose screens.

Updated Jul 1, 2026
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-state-holder-ui-split-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-state-holder-ui-split
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/compose-state-holder-ui-split
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill compose-state-holder-ui-split-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Compose screens that take a ViewModel or component directly, collect flows, and render layout in one function become hard to preview, test, and reuse across Android, Desktop, TV, and KMP/CMP targets. This Skill guides the split between a state-holder composable and a plain UI composable. ## Core Features & Use Cases - State-holder/UI split pattern: Keep ViewModel access, flow collection, navigation, and side effects in a small state-holder composable while the UI composable takes immutable state and callbacks. - Decision tables: Rules of thumb for what belongs in each layer, including which UI-local state (scroll, focus, animation, text input) stays in the UI composable. - Common mistakes and boundaries: Fixes for leaking components into children, navigation inside UI, and guidance on when not to apply the pattern. - Use Case: A ProfileScreen takes a ProfileComponent, collects state with collectAsStateWithLifecycle, handles snackbar effects, then delegates layout to a plain ProfileScreen(state, callbacks) overload that is previewable and testable without DI. ## Quick Start Refactor my Compose screen so the ViewModel wiring and effect collection live in a state-holder composable and the layout lives in a plain UI composable taking state and callbacks.

Frequently Asked Questions about compose-state-holder-ui-split

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I split a Compose screen into state holder and UI composable?▼

Create a small public state-holder composable that collects ViewModel or component state and wires callbacks, then add a plain UI overload taking immutable state and lambdas. The UI composable owns layout, modifiers, and semantics only.

Should Compose UI composables collect flows or ViewModel state?▼

UI composables should not collect app or business state flows; collection belongs near the state holder. They may still own UI-local framework state like scroll, focus, animation, and text field interaction state.

Does this pattern work with Compose Multiplatform and KMP?▼

Yes, the split keeps screens reusable across Android, Desktop, TV, and KMP/CMP targets because the UI layer has no dependency on platform lifecycle, DI, or navigation. Platform-specific concerns stay in the state-holder layer.

Where should LaunchedEffect and side effects live in Compose?▼

Handle effects near the state holder where the effect source and imperative target are both available, such as collecting one-shot effects to show snackbars. If effect handling grows, extract a dedicated effects composable.

When should I not split a composable into state holder and UI?▼

Skip the split for tiny one-off composables already taking plain values, design-system primitives like Button or Card, and cases where the state holder would only forward one primitive. Split at screen or section boundaries, not every Row.