mobile-android-design

Name: mobile-android-design
Author: hanamizuki

104stars8forks

How to install mobile-android-design?

hanamizuki/solopreneur/mobile-android-design

$npx -y skills add hanamizuki/solopreneur --skill mobile-android-design

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type

mobile-android-design

104stars8forks

View on GitHub

How to install mobile-android-design?

hanamizuki/solopreneur/mobile-android-design

$npx -y skills add hanamizuki/solopreneur --skill mobile-android-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type