Skip to main content Inicio Creadores ferroxlabs wayland jetpack-compose-dev
jetpack-compose-dev 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.
Use when the user asks about jetpack compose dev, jetpack compose dev best practices, or needs guidance on jetpack compose dev implementation.
Do NOT use when the user needs a different specialized skill or is asking about an unrelated technology domain.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/FerroxLabs/wayland --skill jetpack-compose-devEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
name jetpack-compose-dev description 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.
Use when the user asks about jetpack compose dev, jetpack compose dev best practices, or needs guidance on jetpack compose dev implementation.
Do NOT use when the user needs a different specialized skill or is asking about an unrelated technology domain.
license Apache-2.0 metadata {"author":"foundry-skills","version":"1.0.0","tags":"mobile best-practices kotlin","category":"software-engineering","subcategory":"mobile-development","depends":"","disclaimer":"none","difficulty":"intermediate"}
Jetpack Compose Developer
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.
State Management
State Hoisting Pattern
@Composable
fun TaskItem (
task: Task ,
onToggle: (Task ) -> Unit
Task
Unit
Modifier
16.
1f
if
else
null
if
else
"Delete task"
ViewModel with UiState 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 () 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 ) 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 )
Collecting State in Compose @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
) "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)) }
)
}
}
}
}
}
Navigation with Type Safety
@Serializable data object TaskList
@Serializable data class TaskDetail (val taskId: String)
@Serializable data object Settings
@Composable
fun AppNavHost (
navController: NavHostController = rememberNavController() val route = backStackEntry.toRoute<TaskDetail>()
TaskDetailScreen(taskId = route.taskId, onBack = { navController.popBackStack() })
}
composable<Settings> {
SettingsScreen(onBack = { navController.popBackStack() })
}
}
}
Material 3 Theming @Composable
fun TaskAppTheme (
darkTheme: Boolean = isSystemInDarkTheme() 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)
)
Lazy Layouts @Composable
fun TaskList (
tasks: List <Task >,
onToggle: (Task ) -> Unit ,
onDelete: (Task ) -> Unit ,
modifier: Modifier = Modifier
) 16. dp),
verticalArrangement = Arrangement.spacedBy(8. dp)
) {
items(items = tasks, key = { it.id }) { task ->
TaskItem(
task = task, onToggle = onToggle, onDelete = onDelete,
modifier = Modifier.animateItem()
)
}
}
}
Animations
Animated Visibility and Content Transitions @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() }
}
}
}
}
Side Effects Effect Use Case LaunchedEffect(key)Run suspend function when key changes DisposableEffect(key)Set up and tear down resources (listeners, callbacks) SideEffectPublish Compose state to non-Compose code every recomposition rememberCoroutineScope()Launch coroutines from event handlers (not composition) derivedStateOfCompute derived values that only update when inputs change snapshotFlowConvert Compose State into a Flow rememberUpdatedStateReference latest value without restarting effect
Practical Side Effect Examples @Composable
fun SearchScreen (viewModel: SearchViewModel = hiltViewModel() var query by rememberSaveable { mutableStateOf("" ) }
LaunchedEffect(query) {
if (query.length >= 2 ) {
delay(300 )
viewModel.search(query)
}
}
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()
}
}
Accessibility @Composable
fun AccessibleTaskRow (task: Task , onToggle: () -> Unit , modifier: Modifier = Modifier) 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)
}
}
Testing Compose UI @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 () "No tasks yet" ).assertIsDisplayed()
}
}
Production Checklist
When to Use
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
Output Format # 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]
Example 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.
Edge Cases
Legacy system integration: When jetpack compose dev must coexist with legacy approaches, provide a gradual migration path rather than a complete rewriteScale mismatch: When the solution complexity exceeds the project scale, recommend a simpler approach and note when to revisitTeam skill gaps: When the team lacks experience with the recommended approach, include learning resources and simpler alternativesConflicting requirements: When constraints conflict (e.g., performance vs. maintainability), explicitly state the trade-off and recommend based on stated priorities 