Mobile android design

Skill wshobson/agents/plugins/ui-design/skills/mobile-android-design

Multi-harness agentic plugin marketplace for Claude Code, Codex CLI, Cursor, OpenCode, GitHub Copilot, and Gemini CLI

Install

npx -y skills add wshobson/agents --skill mobile-android-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.7 KB, as published. Nobody here has run it

Android Mobile Design

Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.

When to Use This Skill

Designing Android app interfaces following Material Design 3
Building Jetpack Compose UI and layouts
Implementing Android navigation patterns (Navigation Compose)
Creating adaptive layouts for phones, tablets, and foldables
Using Material 3 theming with dynamic colors
Building accessible Android interfaces
Implementing Android-specific gestures and interactions
Designing for different screen configurations

Detailed section: Core Concepts

Originally a 9201-byte section in this SKILL.md. Moved to references/details.md to fit Codex's 8 KB skill body cap.

Quick Start Component

@Composable
fun ItemListCard(
    item: Item,
    onItemClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onItemClick,
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primaryContainer),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    imageVector = Icons.Default.Star,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onPrimaryContainer
                )
            }

            Spacer(modifier = Modifier.width(16.dp))

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = item.subtitle,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }

            Icon(
                imageVector = Icons.Default.ChevronRight,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
    }
}

Best Practices

Use Material Theme: Access colors via MaterialTheme.colorScheme for automatic dark mode support
Support Dynamic Color: Enable dynamic color on Android 12+ for personalization
Adaptive Layouts: Use WindowSizeClass for responsive designs
Content Descriptions: Add contentDescription to all interactive elements
Touch Targets: Minimum 48dp touch targets for accessibility
State Hoisting: Hoist state to make components reusable and testable
Remember Properly: Use remember and rememberSaveable appropriately
Preview Annotations: Add @Preview with different configurations

Common Issues

Recomposition Issues: Avoid passing unstable lambdas; use remember
State Loss: Use rememberSaveable for configuration changes
Performance: Use LazyColumn instead of Column for long lists
Theme Leaks: Ensure MaterialTheme wraps all composables
Navigation Crashes: Handle back press and deep links properly
Memory Leaks: Cancel coroutines in DisposableEffect