android-compose-ui

Builds Android screens, ViewModels, and navigation with Jetpack Compose and Material 3.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/DCueto/zen-track --skill android-compose-ui-dcueto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-compose-ui
Source: https://github.com/DCueto/zen-track/tree/main/ZenTrackApp/.agents/skills/android-compose-ui
Command: npx skills add https://github.com/DCueto/zen-track --skill android-compose-ui-dcueto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents the three most common Android Compose bugs: zombie state that re-triggers on every recomposition, background collection leaks from non-lifecycle-aware state collection, and UI state loss on screen rotation or process death. ## Core Features & Use Cases - MVI Screen Scaffolding: Step-by-step procedure to create a Contract (State/Event/Effect), ViewModel with StateFlow and Channel<Effect>, and a root Composable using collectAsStateWithLifecycle. - Type-Safe Navigation: Defines routes as @Serializable classes with Navigation Compose 2.8+, passing navigation lambdas instead of NavController to screens. - Material 3 Theming: Configures ZenTrackTheme with Dynamic Color on Android 12+, edge-to-edge insets, and BackHandler for predictive back gestures. - Use Case: When asked to add a TaskDetailScreen to the androidApp module, follow the playbook to generate the Contract, ViewModel, Screen, Koin registration, and NavHost route in one consistent pass. ## Quick Start Use the android-compose-ui skill to create a new Board screen with an MVI ViewModel, type-safe navigation route, and Material 3 theming in the androidApp module.

Frequently Asked Questions about android-compose-ui

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

FAQPage Schema
How do I create a new screen with Jetpack Compose and MVI?▼

Define a Contract file with an @Immutable State data class plus sealed Event and Effect classes, implement a ViewModel exposing StateFlow and Channel<Effect>, then build a root Composable that collects state with collectAsStateWithLifecycle and effects inside LaunchedEffect(Unit).

What is the difference between collectAsState and collectAsStateWithLifecycle?▼

collectAsState keeps receiving StateFlow updates while the app is in the background, wasting CPU and battery. collectAsStateWithLifecycle stops collection when the lifecycle is not active, and is the required approach in this playbook.

How do I handle one-time events like Snackbars in Compose?▼

Use a Channel<Effect> with BUFFERED capacity in the ViewModel and expose it via receiveAsFlow. Collect it once in LaunchedEffect(Unit) in the root Composable instead of storing boolean flags in State, which causes zombie state on recomposition.

Does Navigation Compose support type-safe routes?▼

Yes, Navigation Compose 2.8+ supports routes defined as @Serializable objects and data classes. Use composable<Route> in the NavHost and backStackEntry.toRoute() to retrieve arguments, avoiding string-based routes entirely.

Why does my Compose UI state reset on screen rotation?▼

State stored in remember { mutableStateOf(...) } is lost during configuration changes and process death. Use rememberSaveable { mutableStateOf(...) } for user inputs and UI flags, with a custom Saver for complex objects.

Should I pass NavController to Compose screens?▼

No, screens should receive navigation lambdas like onNavigateToTask: (String) -> Unit. Navigation is triggered via Effects from the ViewModel, keeping screens testable and free of navigation logic.