Generate Jetpack Compose Android Screens

This skill is expert in building Android screens using Jetpack Compose, with deep knowledge of modern UI patterns, state management, navigation, and performance optimization. Its core principles are unidirectional data flow (ViewModels own state and business logic, composables stay stateless, events flow up and state flows down via StateFlow and collectAsState) and composition over inheritance (breaking complex screens into small reusable composables with proper state hoisting). Its screen architecture pattern splits a stateful entry composable that collects ViewModel state from a stateless content composable that renders loading, error, and success states based on that data. It covers UI state modeling with immutable data classes and sealed action classes, a Hilt-injected ViewModel pattern that updates StateFlow via a coroutine-scoped repository call with success/failure handling, adaptive grid layouts that adjust column count by screen width breakpoints, reusable custom composables like a search bar with clear-button logic, lazy-loading pagination that triggers a load-more callback near the end of a list, NavHost-based screen navigation with typed arguments, and Compose UI testing via composeTestRule.

Use this skill when building or refactoring Android screens in Jetpack Compose that need a maintainable, testable architecture rather than ad hoc state handling inside composables. It's built around a specific stack - Hilt for dependency injection, StateFlow for reactive state, Navigation Compose for screen routing - so it fits projects already on or moving to that combination. Its adaptive grid is not a vague responsive gesture - it sets exact breakpoints (2 columns under 600dp width, 3 columns under 900dp, 4 columns above that) read from LocalConfiguration. It is not a guide for View-based (XML layout) Android UI - it's scoped specifically to Compose's declarative model.

@HiltViewModel
class ProductListViewModel @Inject constructor(
    private val productRepository: ProductRepository
) : ViewModel() {
    
    private val _uiState = MutableStateFlow(ProductListUiState())
    val uiState: StateFlow<ProductListUiState> = _uiState.asStateFlow()
    
    init {
        loadProducts()
    }
    
    private fun loadProducts() {
        viewModelScope.launch {
            _uiState.update { it.copy(isLoading = true, error = null) }
            
            productRepository.getProducts()
                .onSuccess { products ->
                    _uiState.update { it.copy(products = products, isLoading = false) }
                }
                .onFailure { error ->
                    _uiState.update { it.copy(error = error.message, isLoading = false) }
                }
        }
    }
}

Given a screen requirement, the skill produces a stateful/stateless composable pair, a Hilt ViewModel like the one above managing StateFlow state, an immutable UI state data class plus a sealed action class, adaptive LazyVerticalGrid layouts, reusable composables (search bars, cards), paginated LazyColumn lists with load-more triggers, a NavHost graph wiring screens together with typed navigation arguments, and a Compose UI test asserting rendered content.

Android engineers building Compose screens on a Hilt plus StateFlow plus Navigation Compose stack who want a consistent, testable architecture pattern rather than assembling state management ad hoc per screen. It suits teams that want performance and accessibility baked in from the start - stable/immutable annotations for recomposition, Preview functions for design validation, and proper semantics for screen readers - and that want reusable UI primitives like a search field with a leading search icon and a trailing clear button that only appears once there's text to clear, rather than rebuilding that interaction on every screen.