skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

android-compose-patterns

Standardize Jetpack Compose UI architecture with Route/Screen separation and StateFlow.

58|4|Updated Mar 8, 2026
Search Tags:#navigation#android#kotlin#jetpack-compose#ui-patterns#viewmodel#stateflow
One-click install
npx skills add https://github.com/po4yka/RIPDPI --skill android-compose-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-compose-patterns
Source: https://github.com/po4yka/RIPDPI/tree/main/.github/skills/android-compose-patterns
Command: npx skills add https://github.com/po4yka/RIPDPI --skill android-compose-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear, repeatable blueprint for building Android UIs with Jetpack Compose, including consistent navigation, state handling, and theming patterns to speed up development and reduce bugs.

Core Features & Use Cases

  • Unified UI patterns for Compose apps, with clear separation of Route (stateful) and Screen (stateless) composables.
  • Data flow and state management guidance using StateFlow, ViewModels, and lifecycle-aware patterns like collectAsStateWithLifecycle.
  • Navigation and theming conventions using sealed-route navigation and Material 3 theming for scalable apps.

Quick Start

Define a new Route, implement its ViewModel, and connect it to a screen via a Route-driven navigation setup.

Frequently Asked Questions about android-compose-patterns

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

FAQPage Schema
What is the best way to structure Jetpack Compose UI architecture in Android?▼

Jetpack Compose UI architecture should use sealed-route navigation and separate Route (stateful) from Screen (stateless) composables. This pattern enforces clear data flow boundaries, making Android apps predictable, scalable, and significantly easier to debug.

How do I manage state with ViewModel and StateFlow in Jetpack Compose?▼

To manage state in Jetpack Compose, expose StateFlow from your ViewModel and collect it in composables using collectAsStateWithLifecycle. This lifecycle-aware pattern ensures UI state updates only happen when the Android component is active, preventing unnecessary background processing.

How do I set up navigation using sealed classes in Jetpack Compose?▼

Set up Jetpack Compose navigation by defining sealed classes for your routes and connecting them to a Route-driven navigation graph. This approach provides type-safe navigation, centralizes screen paths, and eliminates runtime string-path errors in your Android app.

Does this Compose UI pattern work with Material 3 theming conventions?▼

Yes, this Compose UI pattern fully supports Material 3 theming conventions. It standardizes theming alongside sealed-route navigation, allowing you to build consistent, scalable UI components that automatically adapt to Material 3 dynamic color schemes.

Why separate Route and Screen composables in Jetpack Compose?▼

Separating Route and Screen composables isolates state management from UI rendering. Routes handle ViewModel instantiation and lifecycle-aware state collection via collectAsStateWithLifecycle, while Screens remain stateless, maximizing Compose UI reusability and testability.

Related Skills

Explore More Software Engineering Skills→
patlar104patlar104

Material Design 3 with Jetpack Compose

Implement Material Design 3 theming and components in Jetpack Compose.

Community
Advanced
multiplex-aimultiplex-ai
2

kotlin-coroutines-flows

Provide Kotlin coroutines and Flow guidance for Android and Kotlin Multiplatform projects.

Official
Advanced
maroffomaroffo
16

android-kotlin

Develop Android apps with Kotlin, Jetpack Compose, and Clean Architecture.

Community
Advanced
devanfer02devanfer02

compose-navigation

Model Jetpack Compose navigation routes as @Serializable primitives for type-safe NavHost setup.

Community
Advanced