compose-state-holder-ui-split
Refactors Jetpack Compose screens to separate business logic and state management from rendering UI.
Install
mkdir -p .claude/skills/compose-state-holder-ui-split && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16133" && unzip -o skill.zip -d .claude/skills/compose-state-holder-ui-split && rm skill.zipInstalls to .claude/skills/compose-state-holder-ui-split
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when a Jetpack Compose screen-level composable takes a ViewModel/component/controller, collects state or effects, handles navigation/snackbars, or wires callbacks while also rendering layout.Key capabilities
- →Separate state-holder wiring from UI rendering
- →Collect app or business state and side effects
- →Wire callbacks for user events
- →Own UI-local state like scroll or focus
- →Handle effects near the state holder
- →Pass immutable UI state to UI composables
How it works
This skill separates state-holder wiring from UI rendering by creating a state-holder composable that interacts with ViewModels and side effects, and a UI composable that takes immutable UI state and callbacks for layout.
Inputs & outputs
When to use compose-state-holder-ui-split
- →Refactor Compose UI
- →Improve screen previewability
- →Decouple state from layout
About compose-state-holder-ui-split
Moves navigation, side effects, and state collection from UI functions into dedicated state-holder components to improve testability and preview support.
Use when a Jetpack Compose screen-level composable takes a ViewModel/component/controller, collects state or effects, handles navigation/snackbars, or wires callbacks while also rendering layout.
When not to use it
- →For tiny one-off composables that already take plain values and callbacks
- →For design-system primitives like Button or Card
- →When the state-holder composable would only forward one primitive
Limitations
- →Not suitable for design-system primitives
- →Not suitable for tiny one-off composables
- →Not suitable when a state-holder would only forward a single primitive
How it compares
This approach improves testability and preview support by decoupling state management from UI presentation, unlike a single composable that handles both.
Compared to similar skills
compose-state-holder-ui-split side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| compose-state-holder-ui-split (this skill) | 0 | 3mo | No flags | Intermediate |
| android-kotlin | 7 | 4mo | No flags | Intermediate |
| reviewing-changes | 1 | 3mo | No flags | Intermediate |
| kmp-cmp-app-builder | 0 | 5mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by chrisbanes
View all by chrisbanes →You might also like
android-kotlin
alinaqi
Android Kotlin development with Coroutines, Jetpack Compose, Hilt, and MockK testing
reviewing-changes
bitwarden
Guides Android code reviews with type-specific checklists and MVVM/Compose pattern validation. Use when reviewing Android PRs, pull requests, diffs, or local changes involving Kotlin, ViewModel, Composable, Repository, or Gradle files. Triggered by "review PR", "review changes", "check this code", "Android review", or code review requests mentioning bitwarden/android. Loads specialized checklists for feature additions, bug fixes, UI refinements, refactoring, dependency updates, and infrastructure changes.
kmp-cmp-app-builder
firdaus1453
>
Android Navigation
li-lance
Standards for Jetpack Navigation Compose (Type-safe)
using-chrisbanes-skills
chrisbanes
Use when a Kotlin, Android, or Jetpack Compose task is too broad for any single focused skill to obviously apply, especially for general review, refactor, architecture, state, performance, testing, or UI API design work.
compose-skill
tajemniktv
>