android-jetpack-compose

Develop Android UIs with Jetpack Compose and state management.

10.4k|519|Updated Apr 15, 2023
One-click install
npx skills add https://github.com/maxrave-dev/SimpMusic --skill android-jetpack-compose-maxrave-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: android-jetpack-compose
Source: https://github.com/maxrave-dev/SimpMusic/tree/main/.claude/skills/jetpack-compose
Command: npx skills add https://github.com/maxrave-dev/SimpMusic --skill android-jetpack-compose-maxrave-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides guidance and best practices for developing Android user interfaces using Jetpack Compose, enabling efficient and declarative UI development.

Core Features & Use Cases

  • Declarative UI: Build UIs by describing how they should look based on current state.
  • State Management: Efficiently manage UI state with remember, mutableStateOf, and rememberSaveable.
  • State Hoisting: Lift state up for better reusability and testability.
  • ViewModel Integration: Seamlessly integrate with Android Architecture Components like ViewModels.
  • Navigation: Implement navigation patterns using the Navigation Compose library.
  • Theming: Apply Material 3 theming for consistent design.
  • Lists & Grids: Efficiently display scrollable lists and grids.
  • Side Effects: Manage side effects like data fetching and analytics.
  • Use Case: Develop a custom composable for a user profile screen, managing user input state and integrating with a ViewModel to fetch and save user data.

Quick Start

Use the android-jetpack-compose skill to create a simple counter composable with state management.

Frequently Asked Questions about android-jetpack-compose

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

FAQPage Schema
How do I manage state in Jetpack Compose without causing unnecessary recomposition?

Manage Jetpack Compose state efficiently using `remember`, `mutableStateOf`, and `rememberSaveable`. Following best practices for state hoisting and avoiding anti-patterns ensures UI components only recompose when necessary, optimizing performance.

What's the best way to integrate ViewModels with Android Jetpack Compose?

Integrate ViewModels with Jetpack Compose to fetch and save data for declarative UIs. This approach lifts state up, allowing seamless interaction with Android Architecture Components for better reusability and testability of your composables.

How do I implement navigation in an Android app using Jetpack Compose?

Implement navigation in Jetpack Compose using the Navigation Compose library. This modern declarative UI toolkit supports standard navigation patterns, enabling smooth transitions between screens while maintaining consistent state management.

Why does my Jetpack Compose UI recompose so frequently and how do I fix it?

Frequent recomposition in Jetpack Compose often stems from improper state hoisting or anti-patterns. Lift state up correctly using `remember` and `mutableStateOf`, and manage side effects separately to ensure efficient UI updates.

Can I use Material 3 theming for consistent design in Jetpack Compose?

Yes, Jetpack Compose supports applying Material 3 theming for consistent design across your Android app. This declarative UI toolkit allows you to build modern interfaces by describing how they should look based on the current state.

How do I manage side effects like data fetching in Jetpack Compose?

Manage side effects in Jetpack Compose to safely handle data fetching and analytics. Proper side effect management prevents unnecessary recomposition and ensures that operations interact correctly with the declarative UI lifecycle.