A skill your agent uses when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React…

Apache-2.0Auto-check passedMobile

Install Android Design

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill android-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins android-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/f0d010c/stark/skills/android-design .claude/skills/android-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
android-design
GitHub stars
1.2k
Token cost
~2.5k tokens
SKILL.md length
1,009 words
Files
1
Skills in repo
736
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React…

  • Works in 10 steps: (MANDATORY) — Ask the user which track → Material 3 Expressive default (only if… → Compose currency (BOM 2026.04.01) → …
  • The user asks for an Android app
  • SKILL.md covers What This Skill Can Do, Step 0 (MANDATORY) — Ask the…, Step 0b — Once picked, route and Step 0c — UI decision brief, plus 9 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Android Design is an agent skill from hashgraph-online/awesome-codex-plugins. Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable. Builds Android apps across system-like Compose, branded Compose, React Native, Flutter, and Compose Multiplatform while preserving UX decisions, state coverage, adaptive navigation, Material motion, accessibility, and product-specific visual direction…

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps, Android development and Responsive design. It works with Android, Jetpack Compose, React Native and Flutter. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • The user asks for an Android app
  • Material 3 Expressive
  • Pixel-style app
  • Foldable/adaptive layout

Example prompts

  • “/android-design”

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. (MANDATORY) — Ask the user which track
  2. Material 3 Expressive default (only if track 1 or 2)
  3. Compose currency (BOM 2026.04.01)
  4. Edge-to-edge is mandatory
  5. Adaptive layouts
  6. Typography & icons
  7. Anti-slop ban list (Android-specific)
  8. Reference apps that nail M3 Expressive
  9. Architecture defaults
  10. Tokens & assets

What it can do on your machine

Read from SKILL.md and the folder at commit 16b4156. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are kotlin).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • fonts.google.com
    • m3.material.io
    • figma.com
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Android Design loads about 2.5k tokens when it runs. Until then it costs about 155 tokens; SKILL.md has 1,009 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~155
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 16b4156, republished under its Apache-2.0 licence (© hashgraph-online). 1,009 words, ~2,495 tokens.

Download SKILL.mdSave it as .claude/skills/android-design/SKILL.md (or your agent's skills folder).
name
android-design
description
Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable. Builds Android apps across system-like Compose, branded Compose, React Native, Flutter, and Compose Multiplatform while preserving UX decisions, state coverage, adaptive navigation, Material motion, accessibility, and product-specific visual direction. ALWAYS ask which track first. SKIP when the target is only iOS, Windows, or web-in-browser.

android-design — pick the track first

Android has multiple stacks with different visual ceilings. Ask the user which one before any code.

What This Skill Can Do

  • Choose the right Android track: strict Compose/Material, branded Compose, React Native, Flutter, or Compose Multiplatform.
  • Design mobile task flows, onboarding, forms, settings, dashboards, media/product surfaces, foldables, tablets, and adaptive layouts.
  • Preserve UX briefs, state coverage, navigation hierarchy, gesture/back behavior, loading/error/permission states, and accessibility.
  • Apply Material 3 Expressive, dynamic color, edge-to-edge, predictive back, motion schemes, shape, typography, and responsive window-size classes.
  • Add branded originality through content surfaces, composition, typography, and state treatment without breaking Android idioms.

Step 0 (MANDATORY) — Ask the user which track

Which track for this app?

1. System-like native (Jetpack Compose + Material 3 Expressive strict) — feels like Pixel Launcher, Google Calendar, Settings. Best for: utilities, system tools, productivity. Spring physics, shape morphing, wavy progress, dynamic color (Material You). Examples: Read You, Androidify sample, Files by Google.

2. Branded native (Compose + custom Material theme) — native chrome (M3E motion, predictive back, edge-to-edge) but bespoke content surface (custom typography, hero atmospheres, magazine layouts). Visual ceiling: high. Examples: Fitbit redesign, Google Calendar's editorial moments, Niantic apps.

3. React Native (New Architecture + Fabric + Hermes) — real Android views, decent native feel, JavaScript codebase, cross-platform with iOS. Material themable but won't get spring physics or shape morphing without manual work. Examples: Discord mobile, Coinbase, Microsoft Office.

4. Flutter — Skia-painted custom rendering. Cross-platform single codebase. Lags Material updates (no M3 Expressive parity, no real dynamic color). Visual ceiling: high if you ship your own design language; weak if mimicking Material. Examples: Google Pay, BMW My BMW, Toyota.

5. Compose Multiplatform (1.8+) — same Compose code, runs Android + iOS + Desktop + Web (Wasm experimental). Native on Android, Material-look on iOS (you must Cupertino-skin or accept). Best for: Kotlin shop wanting cross-platform from one codebase.

Which? Or describe priorities (Play Store launch, cross-platform reach, brand vs Material fit) and I'll pick.

If brief gives strong signal (e.g. "Pixel-style camera" → 1; "cross-platform with React team" → 3; "Kotlin shop, ship to all platforms" → 5), state your pick + reasoning in one sentence. If ambiguous, ask.

Step 0b — Once picked, route

TrackReference docsDefault stack
1. System-like Compose../../references/material3-expressive.mdCompose BOM 2026.06.00 + Material3 1.4 + adaptive layouts strict
2. Branded ComposeSame as 1Same as 1 + custom display font + hero atmospheres + bespoke surfaces
3. React Native../../references/web-fonts.md + cross-platform docsRN 0.86 New Architecture + Expo Router
4. FlutterNone for native fidelityFlutter 3+ stable
5. Compose Multiplatform../../references/material3-expressive.mdCurrent stable CMP + shared Compose

For tracks 3 and 4: web/cross-platform anti-slop rules apply. Read web references.

State the chosen aesthetic direction and track in one sentence at top of response.

Step 0c — UI decision brief

Before code, read:

  • ../../references/ui-patterns/surface-taxonomy.md
  • ../../references/ui-patterns/ui-decision-brief.md
  • ../../references/ui-patterns/visual-hierarchy.md
  • ../../references/ui-patterns/motion-budget.md

Write the UI decision brief and adapt it to the chosen Android track. Compact screens need thumb-reachable primary actions, sheets, edge-to-edge, and adaptive navigation; tablets/foldables need list-detail or supporting panes; operational tools should stay dense and scannable while preserving Material 3 Expressive motion, dynamic color, and predictive back.

Step 1 — Material 3 Expressive default (only if track 1 or 2)

Launched at I/O 2025. Default for Pixel 10 / Android 16 QPR1. Generated UI must adopt:

  • Spring physics on every motion — MotionScheme.expressive(). Never FastOutSlowIn on M3E surfaces.
  • Shape morphing — 35 new shapes (squircle, pill, cookie, clover). Use MaterialShapes.Cookie4Sided, Pill, etc. Buttons/chips/loaders morph between states.
  • Emphasized typography — bigger, heavier headlines. Use MaterialTheme.typography.displayLarge with intent.
  • New components:
    • FloatingToolbar (pill-shaped, drifts with content)
    • ButtonGroup / SplitButton
    • FloatingActionButtonMenu
    • ContainedLoadingIndicator (cycles through M3E shapes)
    • Wavy progress — LinearWavyProgressIndicator, CircularWavyProgressIndicator with variable amplitude
    • Large/Small/XL button sizes
  • Tonal elevation — surface tone shifts, never Modifier.shadow() for elevation
  • Dynamic color (Material You) — dynamicColorScheme() from wallpaper on Android 12+

Read ../../references/material3-expressive.md for the M3E adoption checklist.

Show full SKILL.md (392 more words)Show less

Step 2 — Compose currency (BOM 2026.04.01)

kotlin
implementation(platform("androidx.compose:compose-bom:2026.04.01"))
implementation("androidx.compose.material3:material3:1.4.0")
// or for shape-morphing chips:
implementation("androidx.compose.material3:material3:1.5.0-alpha18")

Use:

  • currentWindowAdaptiveInfo() + NavigationSuiteScaffold (auto-swaps Bar/Rail/Drawer by WindowSizeClass)
  • ListDetailPaneScaffold, SupportingPaneScaffold, NavigableListDetailPaneScaffold
  • SharedTransitionLayout { ... } for shared element transitions (stable)
  • PredictiveBackHandler / BackHandler — mandatory on Android 16, default ON Android 15+
  • LookaheadAnimationVisualDebugging for inspecting bounds during dev

Step 3 — Edge-to-edge is mandatory

Android 16 (API 36) deprecated windowOptOutEdgeToEdgeEnforcement. Every screen:

  • Wraps in Scaffold with content padding from insets
  • Uses WindowInsets.systemBars, .statusBars, .navigationBars
  • Predictive back must be wired
  • Status bar color cannot be set opaque — banned on Android 16

Step 4 — Adaptive layouts

  • Compact (phone portrait) → NavigationBar (3–5 items)
  • Medium (foldable inner / tablet portrait) → NavigationRail
  • Expanded (tablet landscape / desktop) → NavigationDrawer (modal or permanent) + ListDetailPaneScaffold
  • Foldables: handle tabletop / book postures via WindowInfoTracker

Step 5 — Typography & icons

  • Default body: Roboto Flex (variable). Headlines: per-app brand expression — but stay within M3E weight/size scale.
  • Material Symbols (variable axes: weight, fill, grade, optical size) — never FontAwesome/Lucide.
  • Get Material Symbols from https://fonts.google.com/icons

Step 6 — Anti-slop ban list (Android-specific)

  • iOS-style top nav bars / chevron-back headers
  • Hamburger drawer when NavigationBar (3–5 items) or NavigationRail fits
  • Hard Modifier.shadow(elevation = 8.dp) — use tonalElevation on Surface instead
  • Custom back stacks ignoring system back / predictive animation
  • Opaque colored status bars — banned on Android 16
  • Bottom sheets without drag handle / non-draggable
  • Static easing curves on M3E surfaces — MotionScheme.expressive() only
  • SF Symbols / Material Symbols-Outlined-only (use variable axes)
  • Inter / SF Pro on Android — Roboto Flex / Google Sans / Material default
  • Centered FAB layouts where docked FAB pattern is canonical
  • Standard Material 3 baseline 2023 — must be M3 Expressive
  • Web-style desktop dashboards squeezed into mobile Compose
  • Decorative motion that hides progress, state, or navigation changes

Step 7 — Reference apps that nail M3 Expressive

  • Pixel Launcher / Android 16 System UI — shape morph + springs
  • Google Calendar — floating toolbar + tonal surfaces
  • Fitbit (2025 redesign) — ContainedLoadingIndicator cycling shapes; floating toolbar
  • Pixel Camera 10.1 — wavy progress in capture
  • Google Docs/Sheets/Slides homepages — M3E typography
  • Chrome (M3E redesign) — adaptive nav
  • Read You (community RSS, OSS) — canonical M3 + dynamic color
  • Androidify sample app — official Compose M3E reference

Step 8 — Architecture defaults

  • MVVM with ViewModel + StateFlow + collectAsStateWithLifecycle()
  • Hilt for DI
  • Navigation Compose 3 with type-safe routes
  • Coil 3 for image loading (replaces Glide for Compose-first apps)
  • Ktor or Retrofit + KotlinX Serialization for networking
  • Room for local persistence

Step 9 — Tokens & assets

Token JSON: see ../../assets/tokens/material3-expressive.json

© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in plugins/f0d010c/stark/skills/android-design of hashgraph-online/awesome-codex-plugins.

Open the folder on GitHubat commit 16b4156

Compare with similar skills

Android Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Android Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Android Design this skillhashgraph-online/awesome-codex-plugins1.2k—~2.5kAutomated safety check: PassApache-2.0
Senior Mobileborghei/Claude-Skills874—~1.9kAutomated safety check: PassMIT
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Mobile App Builderrevfactory/harness-1001.3k—~1.8kAutomated safety check: PassApache-2.0
Claude Android NinjaDrjacky/claude-android-ninja124—~5.2kAutomated safety check: PassApache-2.0
Expo UIarcboxlabs/linkcode155—~1.2kAutomated safety check: PassMIT

Similar skills

  • Senior Mobile

    borghei/Claude-Skills

    A skill your agent uses when the user asks to "build a mobile app", "scaffold React Native project", "create SwiftUI views", "set up Jetpack Compose", "optimize mobile performance", "configure Expo…

    874 GitHub stars~1.9k tokensUpdated today
    MobileAuto-check passed
  • Developing Mobile Apps

    telagod/code-abyss

    Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.

    244 GitHub stars~258 tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Mobile App Builder

    revfactory/harness-100

    Full mobile app development pipeline. An agent skill from revfactory/harness-100.

    1.3k GitHub stars~1.8k tokensUpdated 6 mo ago
    MobileAuto-check passed
  • Claude Android Ninja

    Drjacky/claude-android-ninja

    Build and migrate Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), Navigation3, and multi-module Gradle.

    124 GitHub stars~5.2k tokensUpdated 8 days ago
    MobileAuto-check passed
  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    155 GitHub stars~1.2k tokensUpdated 9 days ago
    MobileAuto-check passed
  • Simdeck

    NativeScript/SimDeck

    A skill your agent uses for simulator lifecycle, app install/launch, live viewing, UI inspection, touch/keyboard automation, screenshots, recordings, logs, pasteboard, hardware controls, and…

    152 GitHub stars~3.6k tokensUpdated 25 days ago
    MobileAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 736 skills in this repo
  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.2k GitHub stars~922 tokensUpdated today
    Auto-check passed
  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.2k GitHub stars~1k tokensUpdated today
    Auto-check passed
  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.2k GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.2k GitHub stars~2.4k tokensUpdated today
    Auto-check passed
  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.2k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.2k GitHub stars~618 tokensUpdated today
    Auto-check passed

Categories

Questions about Android Design

What does Android Design do?

A skill your agent uses when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React…. Android Design is an agent skill from hashgraph-online/awesome-codex-plugins. Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable.

When should I use Android Design?

Android Design fits situations like: the user asks for an Android app; material 3 Expressive; pixel-style app; foldable/adaptive layout.

How do I install Android Design in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill android-design -a claude-code`. Or copy the skill folder (plugins/f0d010c/stark/skills/android-design in hashgraph-online/awesome-codex-plugins) into .claude/skills/android-design in your project. Claude Code loads it when a task matches its description.

How do I install Android Design in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill android-design -a codex`. Or copy the skill folder (plugins/f0d010c/stark/skills/android-design in hashgraph-online/awesome-codex-plugins) into .agents/skills/android-design in your project. Codex loads it when a task matches its description.

Can I use Android Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill android-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/android-design, .gemini/skills/android-design, .github/skills/android-design and .opencode/skills/android-design in your project.

What does Android Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Android Design is instructions for the agent only.

Does Android Design access the network?

SKILL.md names 4 domains. As links in the text: fonts.google.com, m3.material.io, figma.com and github.com. This is read from the text; nothing was executed.

Is Android Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Android Design use?

Android Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Android Design use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Android Design?

Skills that share tags, products or a category with Android Design: Senior Mobile (borghei/Claude-Skills, 874 stars), Developing Mobile Apps (telagod/code-abyss, 244 stars), Mobile App Builder (revfactory/harness-100, 1.3k stars) and Claude Android Ninja (Drjacky/claude-android-ninja, 124 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Android Design?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,232 GitHub stars. The repository holds 736 skills in this directory. The repository was last updated on October 6, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.