mobile-android-design_skill

Overview

This skill helps you master Material Design 3 (Material You) and Jetpack Compose patterns for building modern, adaptive Android apps. It focuses on theming, responsive layouts, navigation patterns, and accessible component implementations. Use it to design, implement, and validate native Android UI that follows Google’s guidelines.

How this skill works

It inspects common Compose building blocks and recommends patterns for layouts, lazy lists, adaptive grids, and navigation (bottom nav, drawers, NavHost). It guides theming with dynamic color, typography, and color schemes, and highlights accessibility and performance considerations like touch targets, content descriptions, and state hoisting. It also offers concrete component examples (cards, buttons, FABs) and quick-start composables you can adapt.

When to use it

• Designing Android interfaces that follow Material Design 3 guidelines
• Implementing UI with Jetpack Compose for phones, tablets, and foldables
• Setting up navigation using Navigation Compose (bottom bar, drawer, NavHost)
• Applying dynamic theming and custom color schemes on Android 12+
• Improving accessibility, performance, and state handling in Compose apps

Best practices

• Wrap UI in MaterialTheme and read colors via MaterialTheme.colorScheme
• Enable dynamic color on Android 12+ and provide fallback color schemes
• Use WindowSizeClass and adaptive grids for responsive layouts
• Hoist state, use remember/rememberSaveable, and cancel coroutines in DisposableEffect
• Provide contentDescription and 48dp minimum touch targets for accessibility
• Prefer LazyColumn/LazyVerticalGrid for long lists and avoid unnecessary recompositions

Example use cases

• Build a main app scaffold with bottom navigation, NavHost, and state restoration
• Create a responsive product grid using LazyVerticalGrid with adaptive columns
• Implement a feature card component with image, title, description, and click handling
• Apply dynamic Light/Dark color schemes and custom typography across the app
• Design a navigation drawer with items, headers, and proper open/close coroutine handling