mobile-android-design

Build native Android UIs with Jetpack Compose and Material Design 3.

38.6k|4.1k|Updated Jul 24, 2025
One-click install
npx skills add https://github.com/wshobson/agents --skill mobile-android-design-wshobson
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-android-design
Source: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/mobile-android-design
Command: npx skills add https://github.com/wshobson/agents --skill mobile-android-design-wshobson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create modern, visually appealing, and user-friendly interfaces for native Android applications by leveraging Google's Material Design 3 guidelines and Jetpack Compose.

Core Features & Use Cases

  • Material Design 3 Implementation: Provides guidance and code examples for Material You theming, dynamic color, and core components (buttons, cards, navigation).
  • Jetpack Compose Layouts: Demonstrates how to build responsive and adaptive UIs using Compose's declarative system, including Columns, Rows, Lazy Lists, and Grids.
  • Navigation Patterns: Illustrates common Android navigation patterns like Bottom Navigation, Navigation Drawers, and Navigation Rails.
  • Use Case: A developer needs to design a new settings screen for an Android app. They can use this Skill to quickly implement Material 3 components, manage state with Compose, and ensure a consistent look and feel across different screen sizes.

Quick Start

Use the mobile-android-design skill to generate a Jetpack Compose ItemListCard composable.

Frequently Asked Questions about mobile-android-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Material Design 3 theming in Jetpack Compose?

Implement Material Design 3 theming in Jetpack Compose by applying Material You dynamic color schemes and core component tokens to your app's composable hierarchy. This Skill provides code examples and guidance for building visually appealing native Android interfaces.

How do I build responsive Android UI layouts that adapt to different screen sizes?

Build responsive Android UI layouts using Jetpack Compose's declarative system with Columns, Rows, Lazy Lists, and Grids. This approach ensures adaptive and accessible design across various Android device screen sizes and form factors.

What is the best way to set up navigation patterns in an Android app using Jetpack Compose?

The best way to set up navigation patterns in Jetpack Compose is using common Android approaches like Bottom Navigation, Navigation Drawers, and Navigation Rails. These patterns ensure consistent user experiences across different device screen sizes.

Can I use this guidance to create a complete Android settings screen with Kotlin?

Yes, you can use this guidance to create an Android settings screen with Kotlin. It demonstrates how to quickly implement Material 3 components, manage state with Compose, and ensure a consistent look and feel across screen sizes.

Does this cover accessible design principles for native Android applications?

Yes, this covers accessible design principles for native Android applications. It provides comprehensive guidance and best practices for adaptive and accessible design across various screen sizes and devices using Jetpack Compose and Material 3.