mobile-android-design

Name: mobile-android-design - Agent Skill
Rating: 5.0 (26449 reviews)
Author: wshobson

26,449

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.

Download Folder View on GitHub

CLI Install

Recommended

Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.

Method 1 - skills CLI

npx skills i wshobson/agents/plugins/ui-design/skills/mobile-android-design

Method 2 - openskills (supports sync & update)

npx openskills install wshobson/agents

Auto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.

Installation Path

Download and extract to one of the following locations:

~/.claude/skills/mobile-android-design/

SKILL.md

references

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

Environment setup included

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
                .

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