102.7K+Download
Skip to the usage guide
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
Download OpenDesignView usage guide
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

  1. 01
    Apply Material 3 Theming

    Access colors through MaterialTheme.colorScheme to automatically support dark mode and enable dynamic color on Android 12+ for personalization.

  2. 02
    Build Compose UI Components

    Create composables using Jetpack Compose patterns with proper state hoisting to make components reusable and testable.

  3. 03
    Implement Adaptive Layouts

    Use WindowSizeClass to create responsive designs that adapt across phones, tablets, and foldable devices.

  4. 04
    Add Accessibility Support

    Give meaningful controls accessible descriptions where needed and use the source’s minimum 48dp touch-target guidance. These checks do not by themselves establish accessibility conformance.

  5. 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

    What to Provide

    • Screen and Android ProjectShare the Compose screen or desired screen behavior, the data it displays, and the phone, tablet or foldable configurations you need to support.

    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.

    1. 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.

    Editorial starter prompt based on the source instructions; not a recorded or tested run.

    Check the First Result

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

    • The screen uses the project’s MaterialTheme rather than hardcoded colors.
    • State survives the intended configuration changes and reusable composables expose state to their owner.
    • Phone and wider-screen previews show a usable layout.
    • Long lists use lazy rendering and important controls have meaningful accessibility labels.

    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 OpenDesignRead 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

    1. When to Use This SkillLists scenarios for Material Design 3, Compose UI, navigation, adaptive layouts, theming, and accessibility
    2. Core ConceptsDetailed technical content moved to references/details.md due to size constraints
    3. Quick Start ComponentProvides complete Compose code example for ItemListCard with Material Design 3 styling
    4. Best PracticesEight concrete rules covering theming, dynamic color, layouts, accessibility, state, and previews
    5. 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 OpenDesignBrowse all skills
    Terminal
    npx skills add https://github.com/wshobson/agents --skill mobile-android-design