1---
2name: mobile-android-design
3description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
4---
5 
6# Android Mobile Design
7 
8Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.
9 
10## When to Use This Skill
11 
12- Designing Android app interfaces following Material Design 3
13- Building Jetpack Compose UI and layouts
14- Implementing Android navigation patterns (Navigation Compose)
15- Creating adaptive layouts for phones, tablets, and foldables
16- Using Material 3 theming with dynamic colors
17- Building accessible Android interfaces
18- Implementing Android-specific gestures and interactions
19- Designing for different screen configurations
20 
21## Detailed section: Core Concepts
22 
23Originally a 9201-byte section in this SKILL.md. Moved to `references/details.md` to fit Codex's 8 KB skill body cap.
24 
25## Quick Start Component
26 
27```kotlin
28@Composable
29fun ItemListCard(
30    item: Item,
31    onItemClick: () -> Unit,
32    modifier: Modifier = Modifier
33) {
34    Card(
35        onClick = onItemClick,
36        modifier = modifier.fillMaxWidth(),
37        shape = RoundedCornerShape(12.dp)
38    ) {
39        Row(
40            modifier = Modifier
41                .padding(16.dp)
42                .fillMaxWidth(),
43            verticalAlignment = Alignment.CenterVertically
44        ) {
45            Box(
46                modifier = Modifier
47                    .size(48.dp)
48                    .clip(CircleShape)
49                    .background(MaterialTheme.colorScheme.primaryContainer),
50                contentAlignment = Alignment.Center
51            ) {
52                Icon(
53                    imageVector = Icons.Default.Star,
54                    contentDescription = null,
55                    tint = MaterialTheme.colorScheme.onPrimaryContainer
56                )
57            }
58 
59            Spacer(modifier = Modifier.width(16.dp))
60 
61            Column(modifier = Modifier.weight(1f)) {
62                Text(
63                    text = item.title,
64                    style = MaterialTheme.typography.titleMedium
65                )
66                Text(
67                    text = item.subtitle,
68                    style = MaterialTheme.typography.bodyMedium,
69                    color = MaterialTheme.colorScheme.onSurfaceVariant
70                )
71            }
72 
73            Icon(
74                imageVector = Icons.Default.ChevronRight,
75                contentDescription = null,
76                tint = MaterialTheme.colorScheme.onSurfaceVariant
77            )
78        }
79    }
80}
81```
82 
83## Best Practices
84 
851. **Use Material Theme**: Access colors via `MaterialTheme.colorScheme` for automatic dark mode support
862. **Support Dynamic Color**: Enable dynamic color on Android 12+ for personalization
873. **Adaptive Layouts**: Use `WindowSizeClass` for responsive designs
884. **Content Descriptions**: Add `contentDescription` to all interactive elements
895. **Touch Targets**: Minimum 48dp touch targets for accessibility
906. **State Hoisting**: Hoist state to make components reusable and testable
917. **Remember Properly**: Use `remember` and `rememberSaveable` appropriately
928. **Preview Annotations**: Add `@Preview` with different configurations
93 
94## Common Issues
95 
96- **Recomposition Issues**: Avoid passing unstable lambdas; use `remember`
97- **State Loss**: Use `rememberSaveable` for configuration changes
98- **Performance**: Use `LazyColumn` instead of `Column` for long lists
99- **Theme Leaks**: Ensure `MaterialTheme` wraps all composables
100- **Navigation Crashes**: Handle back press and deep links properly
101- **Memory Leaks**: Cancel coroutines in `DisposableEffect`
102