← ClaudeAtlas

android-compose-designlisted

Android-specific UI/UX and engineering system for Jetpack Compose apps. Use this skill whenever building, modifying, reviewing, or designing any Android app screen, component, or layout - even if the user doesn't explicitly mention design, Compose, or Material. Routes between five distinct visual styles (m3-expressive-default, dark-product-minimal, playful-warm, data-dense, trust-signaling) based on the app's purpose, then applies an engineering track covering architecture, state, platform integration (edge-to-edge, splash, predictive back, permissions), accessibility, performance, and build defaults. Use this proactively for any Android development work, not just when "design" is named in the prompt.
Mcgrass-ops/android-studio-pipeline · ★ 1 · Web & Frontend · score 74
Install: claude install-skill Mcgrass-ops/android-studio-pipeline
# Android Compose Design This skill imposes intentional design *and engineering* choices on Android Compose work. The goal isn't to reject Material - it's to make sure design and architecture decisions are *chosen*, not defaulted into. ## Core philosophy 1. **Choose the style before writing code.** When the user asks for "an Android app," declare a style choice and the reasoning in one sentence. Don't just start typing `Card` and `Button` with no plan. 2. **M3 Expressive is a real option, not the enemy.** Material 3 Expressive (the 2025-2026 evolution of M3) was promoted to stable in 2025 and includes customizable tokens, spring-based motion, variable fonts, and 35 morphing shapes. A well-customized M3 Expressive app is a legitimate design choice. The enemy is *unstyled* M3 defaults - purple Roboto on gray with no thought - not M3 itself. 3. **Style first, components second.** The visual style depends on what the app *is*. Don't apply Phantom-style glassmorphism to a finance tracker. Don't apply Duolingo-style playfulness to a security tool. Match style to purpose. 4. **Compose-native, not web-ported.** Use Compose idioms (`Modifier`, `MaterialTheme`, `remember`, `LaunchedEffect`, `AnimatedVisibility`). Don't generate code that reads like a translated React component. 5. **Concrete tokens, not vague descriptions.** Every style reference gives hex codes, exact `dp`/`sp` values, named font choices, and named Compose functions. "Use nice spacing" isn't a design decision; "16d