Menu
Jetpack Compose Android declarative UI. Use for Android.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/G1Joshi/Agent-Skills --skill jetpack-composeThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | jetpack-compose |
| description | Jetpack Compose Android declarative UI. Use for Android. |
Jetpack Compose is Android's modern toolkit for building native UIs. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
// build.gradle.kts needs composed enabled
// MainActivity.kt
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.lifecycle.viewmodel.compose.viewModel
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
MyApp()
}
}
}
}
@Composable
fun MyApp) {
count viewModel.uiState.collectAsState()
Scaffold(
floatingActionButton = {
FloatingActionButton(onClick = { viewModel.increment() }) {
Text()
}
}
) { padding ->
Text(
text = ,
modifier = Modifier.padding(padding)
)
}
}
Functions annotated with @Composable are the building blocks. They describe specialized UI widgets or layouts. They can call other Composables.
When the state of a Composable changes, the framework re-executes the function to update the UI. Smart logic ensures only necessary parts are redrawn.
The Modifier object allows you to decorate or augment a composable (layout, appearance, interactions, etc.). They are chainable and order-sensitive.
State should be moved up to the caller to make components stateless and reusable.
remember { mutableStateOf(...) }).Use ViewModel to hold business logic and expose screen state via StateFlow or Compose State. Collect it in the UI using collectAsStateWithLifecycle().
Define a NavHost with composable destinations. Pass arguments and navigate using a type-safe approach (library dependent) or string routes (default).
Do:
androidx.compose.material3) for the latest design specs.remember and derivedStateOf to optimize performance.LazyColumn / LazyRow for lists (equivalent to RecyclerView).Preview annotations to visualize UI without running the app.Don't:
LaunchedEffect or ViewModel).Modifier parameter in reusable components (always allow caller to pass one).| Error | Cause | Solution |
|---|---|---|
@Composable invocations can only happen from context... | Calling a composable from a standard function. | Add @Composable annotation to the caller. |
| Infinite Recomposition | Updating state inside the composition without a side-effect wrapper. | Move update logic to a callback or SideEffect/LaunchedEffect. |
ViewModel state not updating UI | Using a non-observable type or forgetting collectAsState. | Use StateFlow/MutableState and collect it properly. |