skills.rest
22Teikk
22TeikkCOMMUNITY
Explore all skills by this author →
GitHub

android-ui-kotlin

Builds Android user interfaces with Kotlin, Jetpack Compose, MVVM ViewModels, and Navigation Compose.

Updated Jun 13, 2026
Search Tags:#android#kotlin#ui development#mvvm#jetpack compose#coil#navigation compose
One-click install
npx skills add https://github.com/22Teikk/22Teikk-Agent-Skills-Hub --skill android-ui-kotlin-22teikk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-ui-kotlin
Source: https://github.com/22Teikk/22Teikk-Agent-Skills-Hub/tree/main/packs/android/skills/android-ui-kotlin
Command: npx skills add https://github.com/22Teikk/22Teikk-Agent-Skills-Hub --skill android-ui-kotlin-22teikk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building Android UIs without clear architectural guidance leads to tightly coupled Composables, lost state on configuration changes, and poor list performance. This Skill provides concrete patterns for structuring Compose screens with MVVM, type-safe navigation, and efficient image loading. ## Core Features & Use Cases - MVVM + Clean Architecture: Enforces dumb Composables, ViewModels exposing StateFlow-based UI state, and separation of UI from data layers. - State Hoisting & Recomposition: Guides stateless Composable design, @Stable/@Immutable annotations, and keyed LazyColumn items for performance. - Type-Safe Navigation & Coil: Implements kotlinx.serialization-based Navigation Compose routes and AsyncImage loading with placeholders and crossfade. - Use Case: When building a task list screen, use this Skill to create a ViewModel exposing TaskUiState, a stateless TaskListContent Composable with keyed LazyColumn items, and type-safe navigation to a detail screen. ## Quick Start Use the android-ui-kotlin skill to create a new Compose screen with a ViewModel, state hoisting, and Navigation Compose routing.

Frequently Asked Questions about android-ui-kotlin

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

FAQPage Schema
How do I structure a Jetpack Compose screen with MVVM?▼

Create a ViewModel exposing a single StateFlow UI state data class, then build a stateless Composable that receives state and event lambdas. Collect state in the screen-level Composable using collectAsStateWithLifecycle and hoist events up to the ViewModel.

How to implement type-safe navigation in Navigation Compose?▼

Define destinations as @Serializable objects or data classes, then use composable<Destination> routes in NavHost. Retrieve arguments in the destination with backStackEntry.toRoute() and navigate by passing route instances to navController.navigate.

Should I pass ViewModels to child Composables?▼

No, passing ViewModels to child Composables couples them to the ViewModel, making them non-reusable and hard to preview or test. Instead, hoist state down as parameters and pass events up as lambdas.

Why does my LazyColumn recompose unnecessarily?▼

Missing key parameters in LazyColumn or LazyRow items cause unstable item identity and extra recompositions. Always provide a unique key such as the item ID, and mark data classes passed to Composables as @Stable or @Immutable.

When should I not use Jetpack Compose for Android UI?▼

Do not use this approach for traditional Android projects built with Java or XML-only layouts; those require a View-system-based skill instead. Compose with Kotlin is the intended stack for this guidance.

Related Skills

Explore More Software Engineering Skills→
XiriGoXiriGo

android-dev

Implement Android features with Kotlin, Jetpack Compose, and Clean Architecture.

Official
Advanced
igorescodroigorescodro
1.6k

write-viewmodel

Writes ViewModels for the Alkaa Kotlin Multiplatform project following sealed state and flow patterns.

Community
Intermediate
GuibibiGuibibi

motion

Add Vue and Nuxt animation guidance for motion components and gestures.

Community
Intermediate
yash-gargyash-garg

migrate-xml-views-to-jetpack-compose

Convert Android XML View layouts into Jetpack Compose components.

Community
Advanced