mvvm-compose-kmp

Implements MVVM ViewModels, UiState, and UiEvent patterns for Compose Multiplatform projects.

Updated Sep 12, 2026
One-click install
npx skills add https://github.com/Vierco/citoVisionApp --skill mvvm-compose-kmp-vierco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mvvm-compose-kmp
Source: https://github.com/Vierco/citoVisionApp/tree/main/.claude/skills/mvvm-compose-kmp
Command: npx skills add https://github.com/Vierco/citoVisionApp --skill mvvm-compose-kmp-vierco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Structuring the Presentation layer in Kotlin Multiplatform apps with Compose Multiplatform is error-prone: ViewModels leak platform APIs, state becomes mutable and inconsistent, and Composables end up holding business logic. This Skill enforces a consistent, unidirectional MVVM architecture that compiles identically on Android, iOS, and Desktop. ## Core Features & Use Cases - ViewModel scaffolding: Creates ViewModels extending androidx.lifecycle.ViewModel in commonMain, exposing immutable StateFlow<UiState> and launching coroutines only via viewModelScope. - UiState/UiEvent modeling: Decides between direct public functions for simple actions and a sealed interface UiEvent with a single onEvent handler for forms or multi-action screens. - Composable wiring: Connects screens using collectAsStateWithLifecycle() and Koin-injected ViewModels, keeping Presentation decoupled from Infrastructure. - Use Case: When adding a new Login screen to a KMP app, use this Skill to generate LoginUiState, LoginUiEvent, LoginViewModel calling the LoginUseCase, and the LoginScreen Composable following the unidirectional data flow. ## Quick Start Ask the AI to create the ViewModel, UiState, and screen for a new feature following the mvvm-compose-kmp pattern, providing the feature name and the UseCases it needs.

Frequently Asked Questions about mvvm-compose-kmp

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

FAQPage Schema
How do I create a ViewModel in Compose Multiplatform?▼

Extend androidx.lifecycle.ViewModel from the org.jetbrains.androidx.lifecycle multiplatform artifacts in commonMain. Expose state as StateFlow<UiState> backed by a private MutableStateFlow, and launch all coroutines with viewModelScope so the same code compiles on Android, iOS, and Desktop.

When should I use a sealed UiEvent interface versus direct ViewModel functions?▼

Use a direct public function for a single isolated action like increment or logout. Use a sealed interface UiEvent with one onEvent handler when a screen has multiple related actions or a form with several fields, and never mix both styles for the same action.

Can a Compose Multiplatform ViewModel access repositories or Ktor clients directly?▼

No. The ViewModel must only invoke UseCases from the Application layer, never a Repository, Ktor client, or SQLDelight database directly. This keeps Presentation decoupled from Infrastructure and preserves Clean Architecture boundaries.

Why use collectAsStateWithLifecycle instead of collectAsState in Compose?▼

collectAsStateWithLifecycle() stops collecting the StateFlow when the UI lifecycle is inactive, avoiding wasted work and stale updates. collectAsState() keeps collecting regardless of lifecycle, which can cause incorrect recompositions and resource waste.

How do I pass navigation arguments to a KMP ViewModel?▼

Inject navigation parameters such as an id into the ViewModel constructor via Koin using parametersOf. Never read and mutate parameters from the Composable, and never give the ViewModel a direct NavController reference.