What problem does it solve? Translating a design into production-quality Jetpack Compose code involves more than writing pixels — it requires correct state hoisting, theming, accessibility, previews, and responsive layout. This Skill provides a structured six-phase process so the resulting screen holds up in code review instead of becoming a hardcoded, untestable monolith. ## Core Features & Use Cases - Structured screen architecture: Splits every screen into a stateful wrapper, a stateless screen Composable, section composables, and leaf composables, keeping ViewModels out of previewable code. - State-driven design: Defines a UiState model covering loading, empty, error, and content states, with a @Preview for each state plus dark-theme and font-scale variants. - Theming, accessibility, and responsiveness: Enforces use of MaterialTheme tokens instead of hardcoded values, checks touch targets and semantics for TalkBack, and branches layouts on WindowSizeClass for tablets and foldables. - Use Case: A developer pastes a Figma link for a deals list screen and asks to implement it; the Skill produces the UiState definition, stateful/stateless Composables, per-state previews, and notes on which theme tokens were reused. ## Quick Start Ask the assistant to turn this mockup or Figma design into a Jetpack Compose screen with state hoisting, previews for every UI state, and accessibility support.
