jetpack-compose

Build declarative Android UIs with Jetpack Compose and Material3.

Updated Apr 16, 2026
One-click install
npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill jetpack-compose-duylinhdang1998
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: jetpack-compose
Source: https://github.com/duylinhdang1998/claude-template-agent/tree/main/plugins/vfm-agent-company/skills/jetpack-compose
Command: npx skills add https://github.com/duylinhdang1998/claude-template-agent --skill jetpack-compose-duylinhdang1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Jetpack Compose removes verbose XML layouts and imperative UI wiring by enabling declarative, state-driven UI development for Android, reducing boilerplate and making UI behavior easier to reason about and test.

Core Features & Use Cases

  • Declarative Composables & Previews: Build reusable UI components as pure functions and preview them instantly for rapid iteration.
  • State Management & ViewModel Integration: Manage UI state with remember, mutableStateOf, and observe ViewModel flows to keep UI and business logic decoupled.
  • Lists, Navigation & Theming: Efficient lazy lists, navigation with navController, and Material3 theming for consistent app appearance.
  • Use Case: Migrate legacy XML screens to Compose by creating composable screens, hoisting state to ViewModels, wiring navigation routes, and applying Material3 design tokens.

Quick Start

Create a new Compose screen that displays a lazy list of users, manages loading state with a ViewModel, and navigates to a detail composable when an item is tapped.

Frequently Asked Questions about jetpack-compose

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

FAQPage Schema
How do I migrate legacy Android XML layouts to Jetpack Compose?

To migrate legacy Android XML layouts to Jetpack Compose, replace imperative view handling by creating composable screens and hoisting state to ViewModels. This declarative approach reduces boilerplate and makes UI behavior easier to reason about and test.

What is the best way to manage UI state in Android Kotlin composables?

The best way to manage UI state in Kotlin composables is using remember and mutableStateOf while observing ViewModel flows. This state-driven approach keeps your UI and business logic decoupled, reducing boilerplate and making UI behavior easier to test.

Do I need ViewModel and coroutines to build Material3 theming in Jetpack Compose?

You do not strictly need ViewModel and coroutines just for Material3 theming in Jetpack Compose. However, integrating ViewModel and coroutine-based data handling is required to manage state-driven UIs and decouple business logic from your Material3 themed composables.

How do I set up navigation between Android Compose screens using navController?

To set up navigation between Android Compose screens, use the navigation-compose library with navController to wire navigation routes between composables. This allows you to navigate to detail composables when list items are tapped, creating consistent navigation flows.

Can I preview Jetpack Compose UI components instantly without running the app?

Yes, you can preview Jetpack Compose UI components instantly without running the app. Build reusable UI components as pure functions and use Compose Previews to iterate rapidly on your declarative Android user interfaces during development.