Android Mobile UI Design
ModinMobileSTS/SlayTheAmethystModded
Designs and reviews Android screens with attention to touch ergonomics, adaptive layouts, accessibility, state handling and an implementation handoff.
A skill your agent uses when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and…
$ npx skills add rcosteira79/android-skills --skill android-ux -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install rcosteira79/android-skills android-ux --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .claude/skills/android-ux && rm -rf skills-srcUse ~/.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/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .claude/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-uxType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add rcosteira79/android-skills --skill android-ux -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install rcosteira79/android-skills android-ux --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .agents/skills/android-ux && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .agents/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rcosteira79/android-skills --skill android-ux -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install rcosteira79/android-skills android-ux --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .cursor/skills/android-ux && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .cursor/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/rcosteira79/android-skills.git --path plugins/android-skills/skills/android-ux--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add rcosteira79/android-skills --skill android-ux -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install rcosteira79/android-skills android-ux --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .gemini/skills/android-ux && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .gemini/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install rcosteira79/android-skills android-uxInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add rcosteira79/android-skills --skill android-ux -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .github/skills/android-ux && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .github/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add rcosteira79/android-skills --skill android-ux -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install rcosteira79/android-skills android-ux --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/android-skills/skills/android-ux .opencode/skills/android-ux && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "android-ux" agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/android-ux into .opencode/skills/android-ux/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-ux", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
android-uxA skill your agent uses when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and…
Android UX is an agent skill from rcosteira79/android-skills. Use when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and platform conventions. Includes an M3 compliance audit that scores screens across 10 categories. Complements the compose skill with design-level decisions.
Its SKILL.md is about 2.3k 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 Frontend & Design, covering Android development, Mobile UI design and Accessibility. It works with Android. The repository describes itself as: Claude Code skills for Android & KMP development. The licence is MIT.
10 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 0f9af5a. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
rgFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Android UX loads about 2.3k tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 718 words of instructions outside code blocks.
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.
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.
The full file from rcosteira79/android-skills at commit 0f9af5a, republished under its MIT licence (© rcosteira79). 718 words, ~2,323 tokens.
.claude/skills/android-ux/SKILL.md (or your agent's skills folder).This reference covers the non-obvious platform facts and reviewing an existing screen for M3 compliance, not the basics of building M3-correct UI.
Foldables introduce postures beyond window size classes. Detect them with WindowInfoTracker + FoldingFeature (Jetpack WindowManager), and never place interactive content or critical information across the hinge.
| Posture | Detection | Layout behavior |
|---|---|---|
| Flat (unfolded) | no folding feature | Treat as Medium/Expanded by width |
| Half-opened, horizontal fold (tabletop) | HALF_OPENED + Orientation.HORIZONTAL | Content top half, controls bottom half |
| Half-opened, vertical fold (book) | HALF_OPENED + Orientation.VERTICAL | List left, detail right |
| Folded (cover screen) | — | Treat as Compact |
@Composable
fun FoldAwareLayout() {
val context = LocalContext.current
val layoutInfo by WindowInfoTracker.getOrCreate(context)
.windowLayoutInfo(context) // accepts @UiContext — Activity, InputMethodService, or createWindowContext()
.collectAsStateWithLifecycle(initialValue = WindowLayoutInfo(emptyList()))
val fold = layoutInfo.displayFeatures.filterIsInstance<FoldingFeature>().firstOrNull()
when {
fold?.state == FoldingFeature.State.HALF_OPENED ->
if (fold.orientation == FoldingFeature.Orientation.HORIZONTAL) TabletopLayout() else BookLayout()
else -> StandardAdaptiveLayout() // by window size class
}
}Compose's dynamicLightColorScheme / dynamicDarkColorScheme read the system contrast setting automatically (SDK 34+) and expose no contrast parameter. To offer in-app contrast control (Standard 0.0 / Medium 0.5 / High 1.0 tonal distance), build the scheme from Hct + SchemeContent:
// com.google.android.material:material (MDC-Android), package com.google.android.material.color.utilities
// Marked @RestrictTo(LIBRARY_GROUP) — internal API, may change between versions; re-check on version bumps.
val hct = Hct.fromInt(0xFF6750A4.toInt())
val scheme = SchemeContent(hct, /* isDark = */ false, /* contrastLevel = */ 1.0)
val colorScheme = lightColorScheme(
primary = Color(scheme.primary),
onPrimary = Color(scheme.onPrimary),
// ... map remaining roles
)For multiplatform or a stable public API, com.materialkolor:material-color-utilities is a KMP alternative.
Pair M3's duration ladder with easing (short* → FastOutSlowIn; medium* → Emphasized(De/Ac)celerate; long*/extraLong* → Emphasized) rather than arbitrary millis. Reach for MotionScheme (Compose M3 1.4+) where available; otherwise hold durations at one source of truth in the theme.
| Token group | Range | Typical use |
|---|---|---|
short1…short4 | 50–200ms | Micro-interactions, state changes (ripple, selection, switch) |
medium1…medium4 | 250–400ms | Standard transitions (screen enter/exit, expansion, reveal) |
long1…long4 | 450–600ms | Container transforms, fade-through between large surfaces |
extraLong1…extraLong4 | 700–1000ms | Shared-element / hero transitions on tablets/foldables |
Animations must be interruptible and never block input. Respect reduced motion — Compose has no built-in LocalReducedMotion, so read ANIMATOR_DURATION_SCALE and provide one:
val LocalReducedMotion = staticCompositionLocalOf { false }
@Composable
fun AppTheme(content: @Composable () -> Unit) {
val context = LocalContext.current
val reduceMotion = remember {
Settings.Global.getFloat(context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
}
CompositionLocalProvider(LocalReducedMotion provides reduceMotion) { MaterialTheme { content() } }
}
// at the call site
AnimatedVisibility(
visible = isVisible,
enter = if (LocalReducedMotion.current) EnterTransition.None else fadeIn() + slideInVertically(),
) { Content() }(staticCompositionLocalOf + keyless remember read the setting once per Activity; for live updates switch to compositionLocalOf + a ContentObserver on ANIMATOR_DURATION_SCALE.)
Use this when reviewing a screen or feature for Material Design 3 compliance — the part that's easy to skip from memory. Score each category Pass / Partial / Fail, then fix any Partial/Fail before shipping.
MaterialTheme.colorScheme roles — no hardcoded hex/ARGB.primary for key actions, secondary/tertiary for less prominent / accents, error for errors; on* paired correctly; layered surfaces via surfaceContainerLow/High, not arbitrary grays.outline for interactive boundaries needing 3:1 (field borders, focus rings), outlineVariant for decorative dividers.MaterialTheme.typography — no inline fontSize/fontWeight.display* hero, headline* section headers, title* card/dialog titles, body* content, label* buttons/captions.MaterialTheme.shapes, not hardcoded RoundedCornerShape.extraSmall (4dp) chips, small (8dp) cards, medium (12dp) dialogs, large (16dp) sheets, extraLarge (28dp) FABs. Consistent shape language.ElevatedCard/ElevatedButton over manual shadowElevation.surfaceContainerLowest < … < Highest) — if two adjacent layers render the same color in either theme, the elevation cue is broken.androidx.compose.material3.*), no M2 (androidx.compose.material.*) and no M2/M3 mixing on a screen.FloatingActionButton for the primary action, Card for grouped content, TopAppBar for screen-level actions.Run from the project root — each hit is a category-1/3/5 violation to triage before human review:
rg --type kt 'Color\(0x[0-9a-fA-F]{6,8}\)' --files-with-matches | head # 1: hardcoded colors
rg --type kt 'RoundedCornerShape\(\s*\d+(?:\.\d+)?\s*\.dp\s*\)' --files-with-matches | head # 3: hardcoded radii
rg --type kt 'import androidx\.compose\.material\.' --files-with-matches | head # 5: Material 2 importsselected + active indicator.Emphasized at 300–500ms; enter/exit follow M3 (fade-through, container transform); interruptible and respect reduced motion.contentDescription; contrast meets WCAG AA (4.5:1 body, 3:1 large text + UI components); touch targets ≥48dp.semantics(mergeDescendants = true) so TalkBack announces them as one unit (icon contentDescription = null when merged).semantics { heading() } so screen-reader users can jump between sections.semantics { traversalIndex } where needed). User-controlled contrast (Standard/Medium/High) considered if supported.MaterialTheme (no nested/conflicting themes); light + dark both tested; custom theme extensions via CompositionLocal, not globals; brand colors via a custom ColorScheme, not per-component overrides.Screen: [name] Date: [date]
| # | Category | Score | Notes |
|---|---------------------|---------|------------------------|
| 1 | Color tokens | Pass | |
| 2 | Typography | Partial | bodySmall hardcoded |
| 5 | Components | Fail | M2 Scaffold still used |
| 6 | Layout & spacing | Partial | No tablet breakpoint |
| 9 | Accessibility | Partial | Missing headings |
…
Action items:
- [ ] ...© rcosteira79, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in plugins/android-skills/skills/android-ux of rcosteira79/android-skills.
Open the folder on GitHubat commit 0f9af5a
Android UX 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Android UX this skillrcosteira79/android-skills | 151 | — | ~2.3k | Automated safety check: Pass | MIT | |
| Android Mobile UI DesignModinMobileSTS/SlayTheAmethystModded | 402 | — | ~1k | Automated safety check: Pass | Custom licence | |
| STS Amethyst Launcher Design SystemModinMobileSTS/SlayTheAmethystModded | 402 | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Android AccessibilityMoustachauve/WLED-Android | 169 | 3 repos | ~471 | Automated safety check: Pass | Apache-2.0 | |
| Accessible Mobile DeveloperFerroxLabs/wayland | 608 | — | ~3.6k | Automated safety check: Pass | Apache-2.0 | |
| Android UI AutomationOpenMinis/MinisSkills | 444 | — | ~1.6k | Automated safety check: Pass | MIT |
ModinMobileSTS/SlayTheAmethystModded
Designs and reviews Android screens with attention to touch ergonomics, adaptive layouts, accessibility, state handling and an implementation handoff.
ModinMobileSTS/SlayTheAmethystModded
Design system imported from the SlayTheAmethyst Android Jetpack Compose launcher: Material 3 surfaces, user-selected seed colors, light and dark themes and typography rules.
Moustachauve/WLED-Android
Expert checklist and prompts for auditing and fixing Android accessibility issues, especially in Jetpack Compose.
FerroxLabs/wayland
Mobile accessibility development expertise covering iOS VoiceOver and Android TalkBack integration, accessibility APIs for SwiftUI and Jetpack Compose, touch target sizing, gesture alternatives…
OpenMinis/MinisSkills
Automate Android apps that have no public API or web version by driving the UI layer through the Accessibility Service.
skydoves/android-testing-skills
A skill your agent uses to wire the correct Gradle dependency matrix for Jetpack Compose UI tests.
rcosteira79/android-skills
Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.
rcosteira79/android-skills
Helps choose how common Kotlin Multiplatform code reaches platform APIs: expect/actual, a common interface with platform bindings, or separate platform screens.
rcosteira79/android-skills
Sets out the repository pattern's error-propagation model for Android and Kotlin Multiplatform, plus the Room setup for commonMain.
rcosteira79/android-skills
Android and KMP debugging techniques for crashes, ANRs, memory leaks, R8 traces, Gradle failures and Compose recomposition, built on finding the root cause first.
rcosteira79/android-skills
Sets house defaults for Android and Kotlin Multiplatform work and routes to the right specialized skill for Compose, networking, testing or build tooling.
rcosteira79/android-skills
Sets up Android Gradle convention plugins in a build-logic composite build, including the version catalog wiring and shared configuration that are easy to get wrong.
Works with
Categories
A skill your agent uses when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and…. Android UX is an agent skill from rcosteira79/android-skills. Use when designing or reviewing Android UI — applies Material Design 3 UX principles covering touch targets, spacing, navigation patterns, accessibility, animation timing, and platform conventions.
Android UX fits situations like: reviewing Android UI — applies Material Design 3 UX principles covering touch targets; navigation patterns; animation timing; platform conventions.
Run `npx skills add rcosteira79/android-skills --skill android-ux -a claude-code`. Or copy the skill folder (plugins/android-skills/skills/android-ux in rcosteira79/android-skills) into .claude/skills/android-ux in your project. Claude Code loads it when a task matches its description.
Run `npx skills add rcosteira79/android-skills --skill android-ux -a codex`. Or copy the skill folder (plugins/android-skills/skills/android-ux in rcosteira79/android-skills) into .agents/skills/android-ux in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rcosteira79/android-skills --skill android-ux -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-ux, .gemini/skills/android-ux, .github/skills/android-ux and .opencode/skills/android-ux in your project.
Going by SKILL.md and its folder, Android UX needs the command-line tools its instructions call (rg).
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
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.
Android UX is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Android UX: Android Mobile UI Design (ModinMobileSTS/SlayTheAmethystModded, 402 stars), STS Amethyst Launcher Design System (ModinMobileSTS/SlayTheAmethystModded, 402 stars), Android Accessibility (Moustachauve/WLED-Android, 169 stars) and Accessible Mobile Developer (FerroxLabs/wayland, 608 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
rcosteira79 (a GitHub user) maintains it in rcosteira79/android-skills, which has 151 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on September 19, 2026.
Source: rcosteira79/android-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.