mobile-android-designby Seth Hobson

Mobile Android Design Skill.

A Claude Code and Codex skill for mobile app design: native Android UI with Material Design 3 and Jetpack Compose.

Mobile Apps
UI code

wshobson/agents · plugins/ui-design/skills/mobile-android-design/SKILL.mdSKILL.md

--- name: mobile-android-design description: 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. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

Front matter and section headings read from the upstream file on 2026-09-14 · 3,797 characters in full

01 What it does

What the mobile-android-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill teaches agents to build native Android applications using Material Design 3 (Material You) and Jetpack Compose. It covers implementing Compose UI layouts, Android navigation patterns with Navigation Compose, adaptive layouts for phones, tablets, and foldables, Material 3 theming with dynamic colors, accessible Android interfaces, and Android-specific gestures and interactions.

The skill focuses on creating modern, adaptive Android applications that integrate seamlessly with the Android ecosystem, following Google's Material Design guidelines and handling different screen configurations.

UI code

See the example prompt ↗

How It Works

01
Apply Material 3 Theming
Access colors through MaterialTheme.colorScheme to automatically support dark mode and enable dynamic color on Android 12+ for personalization.
02
Build Compose UI Components
Create composables using Jetpack Compose patterns with proper state hoisting to make components reusable and testable.
03
Implement Adaptive Layouts
Use WindowSizeClass to create responsive designs that adapt across phones, tablets, and foldable devices.
04
Add Accessibility Support
Provide contentDescription for all interactive elements and ensure minimum 48dp touch targets for accessibility compliance.
05
Handle State Properly
Use remember and rememberSaveable appropriately to prevent state loss during configuration changes.

02 Find your fit

When to Use the mobile-android-design Skill

Use the mobile-android-design skill in Claude Code or Codex when the job is mobile app design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Designing Android app interfaces that follow Material Design 3 guidelines
Building Jetpack Compose UI and layouts for native Android applications
Creating adaptive layouts that work across phones, tablets, and foldable devices
Implementing Android navigation patterns using Navigation Compose
Building accessible Android interfaces with proper touch targets and content descriptions

03 Inside the skill

Rules the mobile-android-design Skill Gives Claude Code and Codex

1 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

LazyColumn for Long Lists
Use LazyColumn instead of Column when displaying long scrollable lists to prevent performance issues.

04 Put it to work

Install mobile-android-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add mobile-android-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-android-design

Generic skills CLI form for plugins/ui-design/skills/mobile-android-design/SKILL.md; the repository may document its own path.

Give the Skill a First Mobile App Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

Before accepting the output, look for these in the transcript and the files:

The result is delivered as UI code, as the catalog lists for this skill.
The agent names the mobile-android-design skill in its plan or transcript before producing the result.
Your own content, names and numbers appear unchanged in the output.

In OpenDesign import mobile-android-design from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/mobile-android-design/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for mobile-android-design.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists scenarios for Material Design 3, Compose UI, navigation, adaptive layouts, theming, and accessibility
Core ConceptsDetailed technical content moved to references/details.md due to size constraints
Quick Start ComponentProvides complete Compose code example for ItemListCard with Material Design 3 styling
Best PracticesEight concrete rules covering theming, dynamic color, layouts, accessibility, state, and previews
Common IssuesSix frequent problems: recomposition, state loss, performance, theme leaks, navigation, and memory leaks

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 3,797 characters. Read the full file on GitHub.

Mobile Android Design

Run mobile-android-design on a Real Mobile App Design Task.

Download OpenDesign, import mobile-android-design from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills