skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

android-ux

Applies Material Design 3 UX principles to design and audit Android Compose screens.

Updated Jul 1, 2026
Search Tags:#accessibility#android#jetpack compose#material design 3#ux audit#foldable#adaptive layout
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill android-ux-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: android-ux
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/android-ux
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill android-ux-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Android screens often ship with inconsistent spacing, undersized touch targets, missing accessibility semantics, and Material 2/3 component mixing. This Skill provides a single reference of Material Design 3 UX rules plus a 10-category compliance audit so screens feel native, accessible, and responsive before release. ## Core Features & Use Cases - M3 UX Guidelines: Concrete rules for touch targets (48dp), 8dp spacing grids, navigation patterns (Bottom Bar / Rail / Drawer), safe-area insets, animation timing tokens, and form input configuration with Kotlin Compose examples. - Adaptive & Foldable Layouts: Guidance for window size classes, canonical layouts (Feed, List-Detail, Supporting Pane), and foldable postures using WindowManager FoldingFeature. - M3 Compliance Audit: A 10-category scoring checklist (color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) with grep commands to detect hardcoded colors, corner radii, and M2 imports. - Use Case: Before shipping a new Compose screen, run the audit to catch M2 component contamination, missing contentDescriptions, and contrast violations, then fix each Partial/Fail item. ## Quick Start Review this Compose screen for Material Design 3 compliance and list the issues found in each audit category.

Frequently Asked Questions about android-ux

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

FAQPage Schema
How do I make Android touch targets accessible in Jetpack Compose?▼

Ensure every interactive element is at least 48x48dp with 8dp gaps between targets. Use IconButton, which enforces 48dp by default, or apply Modifier.minimumInteractiveComponentSize() to expand smaller visual elements.

How do I audit a Compose screen for Material Design 3 compliance?▼

Score the screen across 10 categories: color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, and theming. Use grep checks to find hardcoded Color literals, RoundedCornerShape values, and androidx.compose.material imports.

How do I support foldable devices in Jetpack Compose?▼

Use WindowInfoTracker and FoldingFeature from Jetpack WindowManager to detect postures like tabletop and book mode. Never place interactive content across the hinge, and switch layouts based on fold orientation and state.

Does Compose support reduced motion accessibility settings?▼

Compose has no built-in LocalReducedMotion, so create a CompositionLocal that reads Settings.Global.ANIMATOR_DURATION_SCALE. When animations are disabled, replace transitions like fadeIn with EnterTransition.None.

What is the difference between Material 2 and Material 3 components in Compose?▼

Material 3 components live in androidx.compose.material3 and use tonal elevation, dynamic color, and updated shape scales. Mixing M2 (androidx.compose.material) and M3 on the same screen is a compliance failure and should be migrated.

Related Skills

Explore More Software Engineering Skills→
jikig-aijikig-ai
12

ux-design-lead

Generates wireframes, high-fidelity screens, and design specs as Markdown or Pencil MCP files.

Official
Advanced
helmordevhelmordev

android-design-guidelines

Audit Android UIs for Material Design 3 and platform compliance.

Community
Intermediate
citytexicitytexi
1

visualizing-recomposition-cascades

Visualize Jetpack Compose recomposition cascades and live heatmaps inside the IDE.

Community
Intermediate
first-flukefirst-fluke
218

mobile-agent

Guide Flutter and React Native mobile projects with Clean Architecture and Riverpod or Bloc.

Official
Basic