android-compose-uiuxlisted

# Android Compose UI/UX Skill This skill guides all UI/UX work in the MiltonLearnMandarin Android app — a Jetpack Compose + Material Design 3 app built for children aged 5 and up. ## App Context - **Audience:** Children aged 5+. Primary user is Milton (developer's son). Parents may also interact. - **Purpose:** Interactive Mandarin learning via role-play scenarios and quizzes. - **UI stack:** 100% Jetpack Compose, Material Design 3, no XML layouts. - **Key screens:** HomeScreen, RolePlayScreen, QuizScreen, PhrasesScreen, QuizResultsScreen. - **Key components:** ScenarioCard, ConversationBubble, ResponseOptionButton, QuizOptionButton, FeedbackCard. --- ## Design Principles for This App ### 1. Child-First Design - **Touch targets:** Minimum 48×48dp for all tappable elements. Prefer 56dp+ for primary actions. - **Typography:** Use large, bold text. Characters/Chinese text at 18sp+. Pinyin/labels at 14sp minimum. - **Simplicity:** One primary action per screen. No information overload. - **Delight:** Animations, emoji, colours, and sound feedback reward interactions. - **Language clarity:** Every Chinese string must be accompanied by pinyin and an English/Indonesian translation. ### 2. Material Design 3 in Compose - Use `MaterialTheme.colorScheme.*` tokens — never hardcode colours except for semantic feedback (green for correct, red for wrong). - Use `MaterialTheme.typography.*` for text styles. - Prefer `Card`, `Surface`, `Button`, `OutlinedButton`, `IconButton` from Mate