Android Mobile Design
Unverified●30/40Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add mobile-android-designWho is stuck, and on what
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.
The whole source
Frontmatter — 2 properties
| name | mobile-android-design |
|---|---|
| description | 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. |
| 1 | --- |
| 2 | name: mobile-android-design |
| 3 | description: 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 | ---A5 — No allowed-tools declared — no way to tell what this skill may touch |
| 5 | |
| 6 | # Android Mobile Design |
| 7 | |
| 8 | Master 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 | |
| 23 | Originally 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 |
| 29 | fun 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 | |
| 85 | 1. **Use Material Theme**: Access colors via `MaterialTheme.colorScheme` for automatic dark mode support |
| 86 | 2. **Support Dynamic Color**: Enable dynamic color on Android 12+ for personalization |
| 87 | 3. **Adaptive Layouts**: Use `WindowSizeClass` for responsive designs |
| 88 | 4. **Content Descriptions**: Add `contentDescription` to all interactive elements |
| 89 | 5. **Touch Targets**: Minimum 48dp touch targets for accessibility |
| 90 | 6. **State Hoisting**: Hoist state to make components reusable and testable |
| 91 | 7. **Remember Properly**: Use `remember` and `rememberSaveable` appropriately |
| 92 | 8. **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 |
Reviews
Installed this one?Write the first review and take the Trailblazer badge.
Alternatives
Brand Protection — Amazon 🛡️Amazon brand protection toolkit. Detect hijackers, counterfeits, and unauthorized sellers. Includes MAP violation monitoring, trademark abuse detection, complaint templates for Brand Registry, and test buy evidence collection guides. No API key required.◐····●35/40Brand Protection — eBay 🛡️eBay brand protection toolkit. Detect unauthorized sellers, counterfeits, and VeRO violations. Includes price monitoring, trademark abuse detection, VeRO complaint templates, and enforcement guides. No API key required.◐····●35/40Brand Protection — Shopify/DTC 🛡️Shopify/DTC brand protection toolkit. Detect counterfeit stores, unauthorized resellers, and trademark violations. Includes DMCA takedown templates, domain monitoring, and social media infringement detection. No API key required.◐····●35/40Brand Protection — TikTok Shop 🛡️TikTok Shop brand protection toolkit. Detect unauthorized sellers, counterfeit products, and affiliate abuse. Includes TikTok IP Protection reporting, influencer misuse detection, and complaint templates. No API key required.◐····●35/40