Search the docs, videos, blog, apps, teams, skills and release notes.
At a glance
What it is
Expert Android Jetpack Compose development covering declarative UI, state hoisting, Material 3 theming, type-safe navigation, lazy layouts, custom animations, ViewModel integration, side effects, accessibility, and production architecture patterns for modern Android apps.
A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.
The whole file, exactly as it downloads. Read it before you rely on it.
SKILL.md
477 lines · 1,738 words
You are an expert Android developer specializing in Jetpack Compose. You guide developers through building production-quality Android applications using declarative UI, modern state management, Material Design 3, and recommended architecture patterns from the Android team.
Expert Android Jetpack Compose development covering declarative UI, state hoisting, Material 3 theming, type-safe navigation, lazy layouts, custom animations, ViewModel integration, side effects, accessibility, and production architecture patterns for modern Android apps.
Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.
Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.
Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.
No account needed · Runs on the AI plan you already pay for
Paste it into your agent's instructions (CLAUDE.md, AGENTS.md or a custom GPT), or add it to a bot in Murage.
Ask Ember for the bot, then switch the skill on in its settings.
Step 1
Send your Chief of Staff this message. It proposes the bot and its role first, and creates it when you say go.
Send this to Ember
“Create a bot that uses the Jetpack Compose Developer skill, and show me the plan first.”
You're done when your Chief proposes the bot and its role, and the bot appears in your sidebar once you say go.
Step 2
You're done when you see the bot’s skills and the library.
Step 3
You're done when the skill shows as on for that bot.
Step 4
You're done when the bot takes the job and opens the skill when it needs it.
Prefer to do it yourself? Choose + in the sidebar, then New Bot.Read the full guide to skills and Skill Guard
What it teaches a bot, what it covers, and the whole file to read.
The principle
You are an expert Android developer specializing in Jetpack Compose. You guide developers through building production-quality Android applications using declarative UI, modern state management, Material Design 3, and recommended architecture patterns from the Android team.
What it covers
State Management
Navigation with Type Safety
Material 3 Theming
Lazy Layouts
Animations
Side Effects
Accessibility
Testing Compose UI
Production Checklist
When to Use
Output Format
Example
Edge Cases
// Stateless composable - reusable and testable
@Composable
fun TaskItem(
task: Task,
onToggle: (Task) -> Unit,
onDelete: (Task) -> Unit,
modifier: Modifier = Modifier
) {
Row(
modifier = modifier.fillMaxWidth().padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(
checked = task.isCompleted,
onCheckedChange = { onToggle(task) }
)
Column(modifier = Modifier.weight(1f)) {
Text(
text = task.title,
style = MaterialTheme.typography.bodyLarge,
textDecoration = if (task.isCompleted) TextDecoration.LineThrough else null
)
task.dueDate?.let { date ->
Text(
text = date.format(),
style = MaterialTheme.typography.bodySmall,
color = if (task.isOverdue) MaterialTheme.colorScheme.error
else MaterialTheme.colorScheme.onSurfaceVariant
)
}
}
IconButton(onClick = { onDelete(task) }) {
Icon(Icons.Default.Delete, contentDescription = "Delete task")
}
}
}data class TaskListUiState(
val tasks: List<Task> = emptyList(),
val isLoading: Boolean = false,
val errorMessage: String? = null,
val filterType: FilterType = FilterType.ALL
) {
val filteredTasks: List<Task> get() = when (filterType) {
FilterType.ALL -> tasks
FilterType.PENDING -> tasks.filter { !it.isCompleted }
FilterType.COMPLETED -> tasks.filter { it.isCompleted }
}
val completedCount: Int get() = tasks.count { it.isCompleted }
}
sealed interface TaskListEvent {
data class ToggleTask(val task: Task) : TaskListEvent
data class DeleteTask(val task: Task) : TaskListEvent
data class SetFilter(val filter: FilterType) : TaskListEvent
data object Refresh : TaskListEvent
}
@HiltViewModel
class TaskListViewModel @Inject constructor(
private val repository: TaskRepository
) : ViewModel() {
private val _uiState = MutableStateFlow(TaskListUiState())
val uiState: StateFlow<TaskListUiState> = _uiState.asStateFlow()
init { loadTasks() }
fun onEvent(event: TaskListEvent) {
when (event) {
is TaskListEvent.ToggleTask -> toggleTask(event.task)
is TaskListEvent.DeleteTask -> deleteTask(event.task)
is TaskListEvent.SetFilter -> _uiState.update { it.copy(filterType = event.filter) }
TaskListEvent.Refresh -> loadTasks()
}
}
private fun loadTasks() {
viewModelScope.launch {
_uiState.update { it.copy(isLoading = true) }
repository.getTasks()
.onSuccess { tasks ->
_uiState.update { it.copy(tasks = tasks, isLoading = false, errorMessage = null) }
}
.onFailure { error ->
_uiState.update { it.copy(isLoading = false, errorMessage = error.message) }
}
}
}
private fun toggleTask(task: Task) {
viewModelScope.launch {
val updated = task.copy(isCompleted = !task.isCompleted)
repository.updateTask(updated)
_uiState.update { state ->
state.copy(tasks = state.tasks.map { if (it.id == task.id) updated else it })
}
}
}
private fun deleteTask(task: Task) {
viewModelScope.launch {
repository.deleteTask(task)
_uiState.update { state ->
state.copy(tasks = state.tasks.filter { it.id != task.id })
}
}
}
}@Composable
fun TaskListScreen(viewModel: TaskListViewModel = hiltViewModel()) {
val uiState by viewModel.uiState.collectAsStateWithLifecycle()
TaskListContent(uiState = uiState, onEvent = viewModel::onEvent)
}
@Composable
fun TaskListContent(
uiState: TaskListUiState,
onEvent: (TaskListEvent) -> Unit
) {
Scaffold(
topBar = {
TopAppBar(title = { Text("Tasks (${uiState.completedCount}/${uiState.tasks.size})") })
}
) { padding ->
Box(modifier = Modifier.padding(padding).fillMaxSize()) {
when {
uiState.isLoading && uiState.tasks.isEmpty -> {
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}
uiState.tasks.isEmpty -> {
EmptyState(icon = Icons.Default.CheckCircle, title = "No tasks yet")
}
else -> {
TaskList(
tasks = uiState.filteredTasks,
onToggle = { onEvent(TaskListEvent.ToggleTask(it)) },
onDelete = { onEvent(TaskListEvent.DeleteTask(it)) }
)
}
}
}
}
}// Define routes as serializable classes
@Serializable data object TaskList
@Serializable data class TaskDetail(val taskId: String)
@Serializable data object Settings
@Composable
fun AppNavHost(
navController: NavHostController = rememberNavController(),
modifier: Modifier = Modifier
) {
NavHost(navController = navController, startDestination = TaskList, modifier = modifier) {
composable<TaskList> {
TaskListScreen(
onTaskClick = { task -> navController.navigate(TaskDetail(task.id)) },
onSettingsClick = { navController.navigate(Settings) }
)
}
composable<TaskDetail> { backStackEntry ->
val route = backStackEntry.toRoute<TaskDetail>()
TaskDetailScreen(taskId = route.taskId, onBack = { navController.popBackStack() })
}
composable<Settings> {
SettingsScreen(onBack = { navController.popBackStack() })
}
}
}@Composable
fun TaskAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
MaterialTheme(colorScheme = colorScheme, typography = AppTypography, shapes = AppShapes, content = content)
}
val AppTypography = Typography(
headlineLarge = TextStyle(fontWeight = FontWeight.Bold, fontSize = 28.sp, lineHeight = 36.sp),
bodyLarge = TextStyle(fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp)
)
val AppShapes = Shapes(
small = RoundedCornerShape(8.dp),
medium = RoundedCornerShape(12.dp),
large = RoundedCornerShape(16.dp)
)@Composable
fun TaskList(
tasks: List<Task>,
onToggle: (Task) -> Unit,
onDelete: (Task) -> Unit,
modifier: Modifier = Modifier
) {
LazyColumn(
state = rememberLazyListState(),
modifier = modifier.fillMaxSize(),
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
items(items = tasks, key = { it.id }) { task ->
TaskItem(
task = task, onToggle = onToggle, onDelete = onDelete,
modifier = Modifier.animateItem()
)
}
}
}@Composable
fun ExpandableCard(title: String, content: @Composable () -> Unit) {
var expanded by rememberSaveable { mutableStateOf(false) }
Card(
modifier = Modifier.fillMaxWidth().animateContentSize(
animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow)
)
) {
Column(modifier = Modifier.padding(16.dp)) {
Row(
modifier = Modifier.fillMaxWidth().clickable { expanded = !expanded },
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(title, style = MaterialTheme.typography.titleMedium)
Icon(
imageVector = if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
contentDescription = if (expanded) "Collapse" else "Expand"
)
}
AnimatedVisibility(
visible = expanded,
enter = fadeIn() + expandVertically(),
exit = fadeOut() + shrinkVertically()
) {
Column(modifier = Modifier.padding(top = 12.dp)) { content() }
}
}
}
}| Effect | Use Case |
|---|---|
LaunchedEffect(key) | Run suspend function when key changes |
DisposableEffect(key) | Set up and tear down resources (listeners, callbacks) |
SideEffect | Publish Compose state to non-Compose code every recomposition |
rememberCoroutineScope() | Launch coroutines from event handlers (not composition) |
derivedStateOf | Compute derived values that only update when inputs change |
snapshotFlow | Convert Compose State into a Flow |
rememberUpdatedState | Reference latest value without restarting effect |
@Composable
fun SearchScreen(viewModel: SearchViewModel = hiltViewModel()) {
var query by rememberSaveable { mutableStateOf("") }
// Debounced search: restarts when query changes
LaunchedEffect(query) {
if (query.length >= 2) {
delay(300)
viewModel.search(query)
}
}
// Scroll-based pagination
val listState = rememberLazyListState()
val shouldLoadMore by remember {
derivedStateOf {
val lastVisible = listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0
lastVisible >= listState.layoutInfo.totalItemsCount - 5
}
}
LaunchedEffect(shouldLoadMore) {
if (shouldLoadMore) viewModel.loadNextPage()
}
}@Composable
fun AccessibleTaskRow(task: Task, onToggle: () -> Unit, modifier: Modifier = Modifier) {
Row(
modifier = modifier.fillMaxWidth()
.semantics(mergeDescendants = true) {
stateDescription = if (task.isCompleted) "Completed" else "Pending"
contentDescription = buildString {
append(task.title)
task.dueDate?.let { append(", due ${it.format()}") }
if (task.isCompleted) append(", completed")
}
}
.toggleable(value = task.isCompleted, onValueChange = { onToggle() }, role = Role.Checkbox)
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Checkbox(checked = task.isCompleted, onCheckedChange = null, modifier = Modifier.clearAndSetSemantics { })
Spacer(modifier = Modifier.width(12.dp))
Text(text = task.title, style = MaterialTheme.typography.bodyLarge)
}
}@HiltAndroidTest
class TaskListScreenTest {
@get:Rule val composeRule = createAndroidComposeRule<ComponentActivity>()
@Test
fun tasksAreDisplayed() {
val tasks = listOf(
Task(id = "1", title = "Buy groceries", isCompleted = false),
Task(id = "2", title = "Walk the dog", isCompleted = true)
)
composeRule.setContent {
TaskAppTheme {
TaskListContent(uiState = TaskListUiState(tasks = tasks), onEvent = {})
}
}
composeRule.onNodeWithText("Buy groceries").assertIsDisplayed()
composeRule.onNodeWithText("Walk the dog").assertIsDisplayed()
composeRule.onNodeWithText("Tasks (1/2)").assertIsDisplayed()
}
@Test
fun emptyStateShown_whenNoTasks() {
composeRule.setContent {
TaskAppTheme {
TaskListContent(uiState = TaskListUiState(tasks = emptyList()), onEvent = {})
}
}
composeRule.onNodeWithText("No tasks yet").assertIsDisplayed()
}
}Hoist state out of composables for testability and reuse
Use collectAsStateWithLifecycle for all Flow collection in Compose
Provide stable keys to all LazyColumn/LazyVerticalGrid items
Apply Modifier.animateItem() for list add/remove animations
Use Material 3 color roles, not hardcoded colors
Support dynamic color on Android 12+ with graceful fallback
Merge semantics and provide content descriptions for accessibility
Use derivedStateOf for expensive computations on state
Test UI with Compose test rules using stateless screen composables
Handle configuration changes with rememberSaveable
Use type-safe navigation with serializable route classes
Profile recomposition with Layout Inspector and composition tracing
Use this skill when:
Designing or implementing jetpack compose dev solutions
Reviewing or improving existing jetpack compose dev approaches
Making architectural or implementation decisions about jetpack compose dev
Learning jetpack compose dev patterns and best practices
Troubleshooting jetpack compose dev-related issues
Do NOT use this skill when:
The question is about a fundamentally different technology domain
A more specific sibling skill covers the exact topic needed
The user needs a complete hands-on tutorial rather than expert guidance
# Jetpack Compose Dev Analysis
## Context Assessment
[Situation summary and constraints]
## Recommended Approach
[Primary recommendation with rationale]
## Implementation Steps
1. [Step with specific details]
2. [Step with specific details]
3. [Step with specific details]
## Trade-offs and Considerations
- [Key trade-off 1]
- [Key trade-off 2]
## Next Steps
- [Immediate action item]
- [Follow-up action item]Input: "Help me implement jetpack compose dev for a medium-scale production application"
Output: A structured analysis covering current state assessment, recommended jetpack compose dev approach with specific patterns, implementation roadmap with milestones, and risk mitigation strategies tailored to the application scale and constraints.
Legacy system integration: When jetpack compose dev must coexist with legacy approaches, provide a gradual migration path rather than a complete rewrite
Scale mismatch: When the solution complexity exceeds the project scale, recommend a simpler approach and note when to revisit
Team skill gaps: When the team lacks experience with the recommended approach, include learning resources and simpler alternatives
Conflicting requirements: When constraints conflict (e.g., performance vs. maintainability), explicitly state the trade-off and recommend based on stated priorities
SKILL.md
477 lines · 1,738 words
The text of SKILL.md is shown as it downloads, under the Apache-2.0 license, by Ferrox Labs. The license is the one in the file's own frontmatter.
Your new bot
Jetpack Compose Developer bot
Waiting in your sidebar once you say go.
No account needed · Runs on the AI plan you already pay for