{"id":"2feb43f9-59e2-4328-bb76-e1a36df2791a","shortId":"DRhkxC","kind":"skill","title":"android-mobile-frontend-design","tagline":"Design Android mobile frontend experiences from scratch, improve existing screens, and fix UI issues with brand-forward, localization-safe, overflow-safe guidance across Compose and Views.","description":"# Android Mobile Frontend Design\n\n## When To Use\n- Use this skill when the request is about: android mobile frontend design, design android screen from scratch, redesign android mobile screen.\n- Primary outcome: Design Android mobile frontend experiences from scratch, improve existing screens, and fix UI issues with brand-forward, localization-safe, overflow-safe guidance across Compose and Views.\n- Use this skill when the work is design-intent first: hierarchy, rhythm, screen structure, navigation chrome, spacing, surface model, visual direction, overflow safety, or localization-safe mobile UX.\n- Reach for this skill before implementation details when the user wants a screen to feel premium, modern, polished, clearer, calmer, more branded, or more mobile-native.\n- Read `references/patterns.md` when you need the create/improve/fix routing matrix, Compose-vs-Views handoff rules, or the localization and overflow stress checklist.\n- Read `references/scenarios.md` when you want docs-only walkthroughs for new-screen design briefs, OrbitTasks redesign reviews, or overflow/localization repair passes.\n- Handoff skills when the scope expands:\n- `android-compose-foundations`\n- `android-material3-design-system`\n- `android-compose-accessibility`\n- `android-viewsystem-foundations`\n- `android-testing-ui`\n\n## Operating Modes\n### `create`\n- Use when a screen does not exist yet or exists only as a rough idea.\n- Start from user goal, primary task, state model, and mobile hierarchy instead of jumping to colors or components.\n- Decide the screen's dominant pattern early: list-detail, feed, form, dashboard, onboarding flow, confirmation flow, or settings surface.\n\n### `improve`\n- Use when a screen works functionally but feels generic, cluttered, dated, confusing, or visually weak.\n- Audit what to preserve first: task order, user mental model, brand constraints, and the pieces already carrying useful meaning.\n- Redesign hierarchy, spacing, affordances, and action emphasis without changing product intent unless the request explicitly asks for it.\n\n### `fix`\n- Use when a screen already exists and has concrete UX defects: clipped text, awkward spacing, unreachable actions, poor hierarchy, broken insets, bad RTL, weak loading states, or cramped controls.\n- Repair the smallest set of layout and interaction decisions that restores clarity before proposing a full visual overhaul.\n- Treat \"cut\" as clipped, cropped, truncated, obscured, or otherwise visually broken UI and handle it as a first-class failure mode.\n\n## Workflow\n1. Choose the operating mode first: `create`, `improve`, or `fix`.\n2. Define the screen job in mobile terms: who is using it, what they must complete fast, what they must understand at a glance, and what deserves confidence or calm.\n3. Decide the information hierarchy before styling: primary action, dominant content block, secondary actions, supporting metadata, and recovery states.\n4. Choose the right mobile shell for the job: top app bar, bottom bar, rail, sheet, FAB, segmented control, tabs, or list-detail split based on device size and task frequency.\n5. Build a surface model that is intentionally brand-forward but still Android-usable: density, corner language, depth, color posture, and typography emphasis should express the product without fighting touch ergonomics.\n6. Stress the layout against real mobile constraints: long strings, translated labels, multiline text, RTL, narrow widths, large widths, keyboard, system bars, cutouts, split-screen, tablets, and foldables.\n7. Validate action reachability, touch targets, hierarchy, contrast, and scanning speed before handing off to implementation skills.\n8. Route the implementation correctly:\n- `android-compose-foundations` when the design is settled and the work is Compose structure/layout.\n- `android-material3-design-system` when the work is tokenization, theming, or custom design-system translation.\n- `android-compose-accessibility` when semantics, focus, or assistive behavior needs dedicated work.\n- `android-viewsystem-foundations` when the owning surface is XML/ViewBinding/Fragment UI.\n- `android-testing-ui` when the design is ready for screenshot or interaction verification.\n\n## Amazing UI Quality Bar\n### What \"amazing\" means in a mobile Android UI\n- The first screenful answers three questions instantly: what this screen is for, what matters most, and what the user should do next.\n- The screen feels authored rather than assembled from default components: spacing, type scale, color emphasis, depth, and motion all reinforce the same product personality.\n- The primary action is obvious without becoming noisy.\n- The UI remains attractive under stress: translation, font scaling, keyboard, gesture navigation, split-screen, and large-screen resizing do not collapse the experience.\n- The product feels premium because it is confident and friction-aware, not because it piles on gradients, glass, or decorative chrome.\n\n### Practical craft rules\n- Use a consistent spacing rhythm grounded in Android's 4dp grid, but let the screen breathe where clarity benefits from more separation.\n- Build typography with distinct jobs: overline/kicker, headline, section label, body, metadata, and action text should not blur together.\n- Let one element dominate each viewport region. If headline, filter row, cards, and CTA all compete equally, the design has no conductor.\n- Prefer fewer, stronger surfaces over many weak cards and dividers.\n- Use color to clarify state, action, and trust. Do not use accent color as wallpaper.\n- Motion should reveal structure, preserve context, or confirm state change. Remove it if it is only decorative.\n\n### Screen-family best practices\n- Lists and feeds:\n  make item hierarchy scannable in under a second, keep row density intentional, and make secondary metadata quieter than the decision-driving content.\n- Forms:\n  keep labels persistent, make validation and requiredness obvious, and ensure keyboard progression never hides the active task.\n- Dashboards:\n  do not import desktop density by default; group content into a clear narrative of summary, decision, and drill-down.\n- Onboarding and empty states:\n  one idea per screen, one primary move, and copy that explains value before detail.\n- Sheets and dialogs:\n  use them for focused decisions or contextual flows, not as a place to hide full screens with broken navigation.\n\n## Design Direction\n### Start with mobile intent, not decoration\n- Decide what the user must do one-handed, what can live below the fold, and what must stay visible through motion, keyboard, and narrow widths.\n- Mobile UI should feel authored, not squeezed-down desktop UI. Small screens punish weak hierarchy faster than any design review does.\n- Brand-forward does not mean louder by default. It means the interface feels deliberate, memorable, and specific to the product instead of generic Material scaffolding.\n\n### Pick a clear visual posture\n- Use one dominant posture per screen family:\n- `confident utility`: dense, clear, fast, highly legible, restrained color.\n- `calm guidance`: more air, stronger sectional rhythm, gentle emphasis, friendly onboarding and empty states.\n- `premium trust`: layered surfaces, disciplined motion, richer typography, higher confidence for money, health, or irreversible actions.\n- `expressive brand`: stronger color, memorable shapes, and signature layout moves, but still touch-safe and readable.\n- Keep the posture consistent across related screens. A premium dashboard and a flat, generic detail screen usually means the system is not yet coherent.\n\n### Create mode specifics\n- Start with:\n- screen goal\n- user state and urgency\n- primary action placement\n- content order\n- state planning for loading, empty, error, offline, and success\n- Choose the shell around the primary action:\n- bottom action areas for flow completion\n- floating action only when it is the dominant repeatable action\n- sheets for contextual, interruptible actions\n- tabs or segmented controls only when switching content families is central to the screen\n- Prefer one strong primary move per screen. If everything shouts, nothing leads.\n\n### Improve mode specifics\n- Audit:\n- what the eye lands on first\n- where the primary action currently sits\n- whether spacing communicates grouping\n- whether surfaces feel flat, noisy, or over-divided\n- whether the screen asks the user to read too much before acting\n- whether the screen feels generic because every component has equal visual weight\n- whether motion, color, and type are helping orientation or just adding noise\n- Preserve:\n- product logic\n- user muscle memory where it still helps\n- good existing component contracts\n- any design token investment already paying off\n- Improve by reordering emphasis, merging weak sections, clarifying labels, strengthening whitespace, and making calls to action unmissable without increasing clutter.\n\n### Fix mode specifics\n- Diagnose:\n- clipped or truncated text\n- buttons, chips, tabs, and snackbars that cannot survive longer text\n- actions hidden behind the keyboard or system bars\n- broken sheet heights or unsafe fixed heights\n- weak contrast or tiny touch targets\n- awkward spacing that makes dense screens harder to scan\n- empty, loading, or error states that do not explain what to do next\n- visual imbalance where everything is the same size, weight, and urgency\n- \"cheap\" feeling UI caused by weak rhythm, inconsistent corners, inconsistent elevation, or accidental color usage\n- Fix layout stress first, then aesthetics. A screen that looks premium in English but breaks in German or Arabic is not finished.\n\n## Localization And Overflow Best Practices\n### Localization-aware design\n- Expect long-string expansion as the default, not an edge case.\n- Design labels, chips, and CTA text to survive translation without depending on the English string length.\n- Think multiline first for buttons, filters, banners, onboarding copy, and empty states when the content must remain explicit.\n- Treat pseudolocalization as a design tool, not just a QA tool. If the hierarchy collapses under pseudolocalized strings, the design is too brittle.\n- Support per-app languages and locale shifts without assuming one global density or one formatting style.\n- Respect locale-specific numerals, date/time formats, currency width, and reading rhythm when designing narrow cells and summary rows.\n- Ensure visual emphasis does not depend on a specific word order that disappears in translation.\n\n### RTL-aware design\n- Mirror directional layout safely instead of hardcoding left/right assumptions.\n- Keep iconography, chevrons, progress cues, and text alignment honest in RTL contexts.\n- Do not rely on asymmetric padding or a left-anchored visual trick that breaks when mirrored.\n- When mixed-direction content appears inside the same screen, design for readability rather than assuming the entire surface behaves as one direction.\n\n### Overflow and cutoff safety\n- Do not use fixed-height text containers unless the design has been proven safe under long strings, font scaling, and multiline content.\n- No clipped CTA labels, chips, tabs, sheets, snackbars, toolbar titles, or bottom-sheet handles because of decorative layout decisions.\n- Prefer safe wrapping and adaptive reflow before silent truncation.\n- Use ellipsis only when the hidden content is genuinely noncritical or there is a clear recovery path such as expansion, detail view, or tooltip-equivalent help.\n- Ensure keyboards, IME insets, cutouts, taskbars, and system bars never obscure primary actions or active inputs.\n- On large screens and foldables, avoid placing crucial content in hinge, fold, or awkward dead-zone regions.\n- Do not put tap or drag-critical UI directly under gesture-inset conflict zones in edge-to-edge layouts.\n\n## Adaptive And Edge-To-Edge Best Practices\n- Design edge-to-edge by default: scrolling and background content may live behind system bars, but critical tappable UI must honor insets and gesture conflicts.\n- For target SDK 35+ and newer devices, assume edge-to-edge is part of the normal Android experience rather than an optional flourish.\n- Use window size classes and adaptive structure so layouts can recompose into rails, multi-column sections, or list-detail arrangements without becoming stretched phone UIs.\n- Large screens should at least meet \"optimized\" Android large-screen quality expectations: no letterboxing mindset, no dead wasted space, and no phone-only navigation assumptions.\n- Foldables and multi-window states are layout tests, not post-launch surprises.\n\n## Compose And View-System Guidance\n### Compose\n- Compose is best when the redesign needs flexible hierarchy, adaptive structure, expressive spacing, and reusable UI primitives.\n- Use Compose when the screen benefits from compositional sections, easier adaptive branching, and modern motion/visual polish.\n- Hand off to `android-compose-foundations` once the design intent is settled and the remaining work is component architecture and layout execution.\n\n### Views and XML\n- View-system screens still deserve strong design work; do not assume only Compose screens can feel premium.\n- Respect Fragment, RecyclerView, ViewBinding, and ConstraintLayout realities when planning improvements.\n- Prefer responsive/adaptive View-system layouts over static, dimension-locked XML that only looks correct on one device profile.\n- Hand off to `android-viewsystem-foundations` once the screen direction is clear and the remaining work is XML/Fragment execution.\n\n## Guardrails\n- Mobile-first always wins over desktop habits. Do not import dashboard-web density or pointer-driven assumptions into phone screens without justification.\n- Brand-forward styling must remain localization-safe, overflow-safe, and accessibility-safe.\n- Keep touch targets reachable and obvious; visual minimalism is not an excuse for tiny interactive areas.\n- Design for edge-to-edge layouts and real insets from the start rather than bolting them on after the fact.\n- Support phones, tablets, foldables, and multi-window states through adaptive structure, not one hardcoded canvas.\n- Preserve the product's mental model when improving existing screens; do not redesign the workflow unless the request asks for it.\n- Prefer clear hierarchy and recovery UX over decorative motion, ornamental surfaces, or extra chrome.\n- At least one of spacing, typography, depth, or color emphasis should make the screen memorable; \"safe but generic\" is not the target outcome for this skill.\n\n## Anti-Patterns\n- Designing a phone screen like a compressed web dashboard with tiny controls and dense top-level navigation.\n- Using fixed widths or heights that cause clipping, truncation, or overlap as soon as text length changes.\n- Treating English-only screenshots as proof that the design is complete.\n- Hiding the primary action below the fold, behind the keyboard, or in visually weak chrome.\n- Making every section a card, divider, or boxed surface until the screen becomes noisy and slow to scan.\n- Relying on symmetry tricks that collapse in RTL or on narrow widths.\n- Solving a layout bug by shortening copy instead of making the design structurally resilient.\n- Rebuilding everything visually when a focused repair would fix the real issue.\n- Mistaking visual busyness for premium quality.\n- Shipping a screen that looks good statically but becomes fragile under IME, font scaling, or long-form content.\n\n## Examples\n### Happy path\n- Scenario: Create a new Android mobile screen from scratch with a strong hierarchy, clear primary action, adaptive shell, and brand-forward visual posture.\n- Command: `bash skills/android-mobile-frontend-design/scripts/run_examples.sh`\n\n### Edge case\n- Scenario: Improve an existing OrbitTasks Compose screen so it survives long localized strings, keyboard insets, and RTL mirroring without clipped controls.\n- Command: `cd examples/orbittasks-compose && ./gradlew :app:assembleDebug`\n\n### Failure recovery\n- Scenario: Fix an existing XML screen with truncation, cramped spacing, and weak empty/error states before escalating to a full redesign.\n- Command: `cd examples/orbittasks-xml && ./gradlew :app:assembleDebug`\n\n## Done Checklist\n- The operating mode is explicit: `create`, `improve`, or `fix`.\n- The information hierarchy and primary action placement are clear before implementation details begin.\n- The design direction is brand-forward but still mobile-native and platform-usable.\n- Localization, RTL, overflow, keyboard, and inset stress cases have been considered explicitly.\n- Compose-vs-Views routing is clear, and implementation work is handed off to the correct neighboring skill.\n- The resulting guidance can be used to create a screen from scratch, improve an existing one, or repair a broken one without leaving major design decisions unresolved.\n\n## Official References\n- [https://developer.android.com/develop/ui/compose](https://developer.android.com/develop/ui/compose)\n- [https://developer.android.com/develop/ui/compose/designsystems/material3](https://developer.android.com/develop/ui/compose/designsystems/material3)\n- [https://developer.android.com/develop/ui/compose/designsystems/custom](https://developer.android.com/develop/ui/compose/designsystems/custom)\n- [https://developer.android.com/develop/ui/compose/system/material-insets](https://developer.android.com/develop/ui/compose/system/material-insets)\n- [https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes)\n- [https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views](https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views)\n- [https://developer.android.com/training/basics/supporting-devices/languages.html](https://developer.android.com/training/basics/supporting-devices/languages.html)\n- [https://developer.android.com/guide/topics/resources/localization](https://developer.android.com/guide/topics/resources/localization)\n- [https://developer.android.com/guide/topics/resources/app-languages](https://developer.android.com/guide/topics/resources/app-languages)\n- [https://developer.android.com/guide/topics/resources/internationalization](https://developer.android.com/guide/topics/resources/internationalization)\n- [https://developer.android.com/guide/topics/ui/accessibility/apps](https://developer.android.com/guide/topics/ui/accessibility/apps)\n- [https://developer.android.com/docs/quality-guidelines/large-screen-app-quality](https://developer.android.com/docs/quality-guidelines/large-screen-app-quality)","tags":["android","mobile","frontend","design","agent","skills","krutikjain","agent-skills","android-development","android-skills","androidx","claude-code"],"capabilities":["skill","source-krutikjain","skill-android-mobile-frontend-design","topic-agent-skills","topic-android","topic-android-development","topic-android-skills","topic-androidx","topic-claude-code","topic-codex","topic-cursor","topic-jetpack-compose","topic-kotlin","topic-skills"],"categories":["android-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/krutikJain/android-agent-skills/android-mobile-frontend-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add krutikJain/android-agent-skills","source_repo":"https://github.com/krutikJain/android-agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (18,664 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:13:27.996Z","embedding":null,"createdAt":"2026-05-18T13:20:50.513Z","updatedAt":"2026-05-18T19:13:27.996Z","lastSeenAt":"2026-05-18T19:13:27.996Z","tsv":"'/develop/ui/compose/designsystems/custom](https://developer.android.com/develop/ui/compose/designsystems/custom)':2534 '/develop/ui/compose/designsystems/material3](https://developer.android.com/develop/ui/compose/designsystems/material3)':2531 '/develop/ui/compose/layouts/adaptive/use-window-size-classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes)':2540 '/develop/ui/compose/system/material-insets](https://developer.android.com/develop/ui/compose/system/material-insets)':2537 '/develop/ui/compose](https://developer.android.com/develop/ui/compose)':2528 '/develop/ui/views/layout/responsive-adaptive-design-with-views](https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views)':2543 '/docs/quality-guidelines/large-screen-app-quality](https://developer.android.com/docs/quality-guidelines/large-screen-app-quality)':2561 '/gradlew':2396,2424 '/guide/topics/resources/app-languages](https://developer.android.com/guide/topics/resources/app-languages)':2552 '/guide/topics/resources/internationalization](https://developer.android.com/guide/topics/resources/internationalization)':2555 '/guide/topics/resources/localization](https://developer.android.com/guide/topics/resources/localization)':2549 '/guide/topics/ui/accessibility/apps](https://developer.android.com/guide/topics/ui/accessibility/apps)':2558 '/training/basics/supporting-devices/languages.html](https://developer.android.com/training/basics/supporting-devices/languages.html)':2546 '1':402 '2':412 '3':442 '35':1815 '4':461 '4dp':772 '5':493 '6':526 '7':555 '8':572 'accent':846 'access':213,612,2078 'accessibility-saf':2077 'accident':1420 'across':31,90,1131 'act':1270 'action':318,348,450,455,557,707,797,840,1109,1163,1182,1184,1190,1198,1203,1243,1331,1354,1734,2247,2358,2443 'activ':914,1736 'ad':1293 'adapt':1690,1778,1841,1920,1938,2127,2359 'aesthet':1428 'afford':316 'air':1083 'align':1594 'alreadi':309,336,1313 'alway':2042 'amaz':647,652 'anchor':1609 'android':2,7,35,50,55,60,66,202,206,211,215,219,507,578,593,610,623,634,657,770,1829,1870,1948,2022,2347 'android-compose-access':210,609 'android-compose-found':201,577,1947 'android-material3-design-system':205,592 'android-mobile-frontend-design':1 'android-testing-ui':218,633 'android-us':506 'android-viewsystem-found':214,622,2021 'answer':662 'anti':2195 'anti-pattern':2194 'app':471,1526,2397,2425 'appear':1621 'arab':1441 'architectur':1963 'area':1185,2095 'around':1179 'arrang':1857 'ask':328,1262,2151 'assembl':687 'assembledebug':2398,2426 'assist':617 'assum':1532,1631,1819,1981 'assumpt':1586,1889,2058 'asymmetr':1603 'attract':716 'audit':294,1233 'author':684,1015 'avoid':1743 'awar':749,1452,1576 'awkward':345,1375,1751 'background':1795 'bad':353 'banner':1488 'bar':472,474,547,650,1361,1730,1801 'base':486 'bash':2368 'becom':711,1859,2271,2329 'begin':2450 'behav':1635 'behavior':618 'behind':1356,1799,2251 'benefit':781,1933 'best':870,1448,1784,1913 'block':453 'blur':801 'bodi':794 'bolt':2111 'bottom':473,1183,1678 'bottom-sheet':1677 'box':2266 'branch':1939 'brand':22,81,145,304,502,1034,1111,2065,2363,2456 'brand-forward':21,80,501,1033,2064,2362,2455 'break':1437,1613 'breath':778 'brief':187 'brittl':1522 'broken':351,389,975,1362,2516 'bug':2292 'build':494,785 'busy':2317 'button':1344,1486 'call':1329 'calm':441,1080 'calmer':143 'cannot':1350 'canva':2132 'card':814,832,2263 'carri':310 'case':1465,2371,2474 'caus':1411,2221 'cd':2394,2422 'cell':1555 'central':1214 'chang':321,859,2231 'cheap':1408 'checklist':172,2428 'chevron':1589 'chip':1345,1468,1670 'choos':403,462,1176 'chrome':110,759,2167,2258 'clarifi':838,1323 'clariti':372,780 'class':398,1839 'clear':928,1061,1074,1709,2030,2155,2356,2446,2485 'clearer':142 'clip':343,382,1340,1667,2222,2391 'clutter':288,1335 'coher':1150 'collaps':735,1514,2282 'color':255,513,694,836,847,1079,1113,1285,1421,2176 'column':1851 'command':2367,2393,2421 'communic':1248 'compet':818 'complet':427,1188,2243 'compon':257,690,1278,1307,1962 'compos':32,91,161,203,212,579,590,611,1904,1910,1911,1929,1949,1983,2377,2480 'compose-vs-view':160,2479 'composit':1935 'compress':2203 'concret':340 'conductor':824 'confid':439,745,1071,1103 'confirm':273,857 'conflict':1770,1811 'confus':290 'consid':2477 'consist':765,1130 'constraint':305,533 'constraintlayout':1993 'contain':1650 'content':452,897,925,1165,1211,1496,1620,1665,1701,1746,1796,2339 'context':855,1598 'contextu':964,1201 'contract':1308 'contrast':562,1370 'control':360,479,1207,2208,2392 'copi':949,1490,2295 'corner':510,1416 'correct':576,2013,2494 'craft':761 'cramp':359,2409 'creat':224,408,1151,2344,2434,2504 'create/improve/fix':157 'critic':1763,1803 'crop':383 'crucial':1745 'cta':816,1470,1668 'cue':1591 'currenc':1547 'current':1244 'custom':604 'cut':380 'cutoff':1641 'cutout':548,1726 'dashboard':270,916,1136,2051,2205 'dashboard-web':2050 'date':289 'date/time':1545 'dead':1753,1880 'dead-zon':1752 'decid':258,443,985 'decis':369,895,932,962,1685,2522 'decision-driv':894 'decor':758,866,984,1683,2161 'dedic':620 'default':689,923,1041,1461,1792 'defect':342 'defin':413 'deliber':1047 'dens':1073,1379,2210 'densiti':509,885,921,1535,2053 'depend':1476,1564 'depth':512,696,2174 'deserv':438,1975 'design':5,6,38,53,54,65,102,186,208,583,595,606,639,821,977,1030,1310,1453,1466,1504,1519,1553,1577,1626,1653,1786,1953,1977,2096,2197,2241,2300,2452,2521 'design-int':101 'design-system':605 'desktop':920,1020,2045 'detail':130,267,484,954,1141,1715,1856,2449 'developer.android.com':2527,2530,2533,2536,2539,2542,2545,2548,2551,2554,2557,2560 'developer.android.com/develop/ui/compose/designsystems/custom](https://developer.android.com/develop/ui/compose/designsystems/custom)':2532 'developer.android.com/develop/ui/compose/designsystems/material3](https://developer.android.com/develop/ui/compose/designsystems/material3)':2529 'developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes)':2538 'developer.android.com/develop/ui/compose/system/material-insets](https://developer.android.com/develop/ui/compose/system/material-insets)':2535 'developer.android.com/develop/ui/compose](https://developer.android.com/develop/ui/compose)':2526 'developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views](https://developer.android.com/develop/ui/views/layout/responsive-adaptive-design-with-views)':2541 'developer.android.com/docs/quality-guidelines/large-screen-app-quality](https://developer.android.com/docs/quality-guidelines/large-screen-app-quality)':2559 'developer.android.com/guide/topics/resources/app-languages](https://developer.android.com/guide/topics/resources/app-languages)':2550 'developer.android.com/guide/topics/resources/internationalization](https://developer.android.com/guide/topics/resources/internationalization)':2553 'developer.android.com/guide/topics/resources/localization](https://developer.android.com/guide/topics/resources/localization)':2547 'developer.android.com/guide/topics/ui/accessibility/apps](https://developer.android.com/guide/topics/ui/accessibility/apps)':2556 'developer.android.com/training/basics/supporting-devices/languages.html](https://developer.android.com/training/basics/supporting-devices/languages.html)':2544 'devic':488,1818,2016 'diagnos':1339 'dialog':957 'dimens':2007 'dimension-lock':2006 'direct':115,978,1579,1619,1638,1765,2028,2453 'disappear':1571 'disciplin':1098 'distinct':788 'divid':834,1258,2264 'doc':179 'docs-on':178 'domin':262,451,806,1066,1196 'done':2427 'drag':1762 'drag-crit':1761 'drill':935 'drill-down':934 'drive':896 'driven':2057 'earli':264 'easier':1937 'edg':1464,1774,1776,1781,1783,1788,1790,1821,1823,2099,2101,2370 'edge-to-edg':1773,1780,1787,1820,2098 'element':805 'elev':1418 'ellipsi':1696 'emphasi':319,517,695,1088,1319,1561,2177 'empti':939,1092,1171,1384,1492 'empty/error':2413 'english':1435,1479,2234 'english-on':2233 'ensur':908,1559,1722 'entir':1633 'equal':819,1280 'equival':1720 'ergonom':525 'error':1172,1387 'escal':2416 'everi':1277,2260 'everyth':1226,1400,2304 'exampl':2340 'examples/orbittasks-compose':2395 'examples/orbittasks-xml':2423 'excus':2091 'execut':1966,2037 'exist':14,73,231,234,337,1306,2141,2375,2404,2511 'expand':200 'expans':1458,1714 'expect':1454,1875 'experi':10,69,737,1830 'explain':951,1392 'explicit':327,1499,2433,2478 'express':519,1110,1922 'extra':2166 'eye':1236 'fab':477 'fact':2116 'failur':399,2399 'famili':869,1070,1212 'fast':428,1075 'faster':1027 'feed':268,874 'feel':138,286,683,740,1014,1046,1252,1274,1409,1986 'fewer':826 'fight':523 'filter':812,1487 'finish':1444 'first':104,298,397,407,660,1239,1426,1484,2041 'first-class':396 'fix':17,76,331,411,1336,1367,1423,1647,2216,2311,2402,2437 'fixed-height':1646 'flat':1139,1253 'flexibl':1918 'float':1189 'flourish':1835 'flow':272,274,965,1187 'focus':615,961,2308 'fold':999,1749,2250 'foldabl':554,1742,1890,2120 'font':720,1661,2333 'form':269,898,2338 'format':1538,1546 'forward':23,82,503,1035,2066,2364,2457 'foundat':204,217,580,625,1950,2024 'fragil':2330 'fragment':1989 'frequenc':492 'friction':748 'friction-awar':747 'friend':1089 'frontend':4,9,37,52,68 'full':376,972,2419 'function':284 'generic':287,1056,1140,1275,2185 'gentl':1087 'genuin':1703 'german':1439 'gestur':723,1768,1810 'gesture-inset':1767 'glanc':435 'glass':756 'global':1534 'goal':243,1157 'good':1305,2326 'gradient':755 'grid':773 'ground':768 'group':924,1249 'guardrail':2038 'guidanc':30,89,1081,1909,2499 'habit':2046 'hand':567,993,1944,2018,2490 'handl':392,1680 'handoff':164,195 'happi':2341 'hardcod':1584,2131 'harder':1381 'headlin':791,811 'health':1106 'height':1364,1368,1648,2219 'help':1289,1304,1721 'hidden':1355,1700 'hide':912,971,2244 'hierarchi':105,250,314,350,446,561,877,1026,1513,1919,2156,2355,2440 'high':1076 'higher':1102 'hing':1748 'honest':1595 'honor':1807 'iconographi':1588 'idea':239,942 'imbal':1398 'ime':1724,2332 'implement':129,570,575,2448,2487 'import':919,2049 'improv':13,72,278,409,1230,1316,1997,2140,2373,2435,2509 'inconsist':1415,1417 'increas':1334 'inform':445,2439 'input':1737 'inset':352,1725,1769,1808,2105,2386,2472 'insid':1622 'instant':665 'instead':251,1054,1582,2296 'intent':103,323,500,886,982,1954 'interact':368,645,2094 'interfac':1045 'interrupt':1202 'invest':1312 'irrevers':1108 'issu':19,78,2314 'item':876 'job':416,469,789 'jump':253 'justif':2063 'keep':883,899,1127,1587,2080 'keyboard':545,722,909,1007,1358,1723,2253,2385,2470 'label':537,793,900,1324,1467,1669 'land':1237 'languag':511,1527 'larg':543,730,1739,1863,1872 'large-screen':729,1871 'launch':1902 'layer':1096 'layout':366,529,1118,1424,1580,1684,1777,1844,1897,1965,2003,2102,2291 'lead':1229 'least':1867,2169 'leav':2519 'left':1608 'left-anchor':1607 'left/right':1585 'legibl':1077 'length':1481,2230 'let':775,803 'letterbox':1877 'level':2213 'like':2201 'list':266,483,872,1855 'list-detail':265,482,1854 'live':996,1798 'load':356,1170,1385 'local':25,84,120,168,1445,1451,1529,1542,2071,2383,2467 'locale-specif':1541 'localization-awar':1450 'localization-saf':24,83,119,2070 'lock':2008 'logic':1297 'long':534,1456,1659,2337,2382 'long-form':2336 'long-str':1455 'longer':1352 'look':1432,2012,2325 'louder':1039 'major':2520 'make':875,888,902,1328,1378,2179,2259,2298 'mani':830 'materi':1057 'material3':207,594 'matrix':159 'matter':672 'may':1797 'mean':312,653,1038,1043,1144 'meet':1868 'memor':1048,1114,2182 'memori':1300 'mental':302,2137 'merg':1320 'metadata':457,795,890 'mindset':1878 'minim':2087 'mirror':1578,1615,2389 'mistak':2315 'mix':1618 'mixed-direct':1617 'mobil':3,8,36,51,61,67,122,149,249,418,465,532,656,981,1011,2040,2348,2461 'mobile-first':2039 'mobile-n':148,2460 'mode':223,400,406,1152,1231,1337,2431 'model':113,247,303,497,2138 'modern':140,1941 'money':1105 'motion':698,850,1006,1099,1284,2162 'motion/visual':1942 'move':947,1119,1222 'much':1268 'multi':1850,1893,2123 'multi-column':1849 'multi-window':1892,2122 'multilin':538,1483,1664 'muscl':1299 'must':426,431,989,1002,1497,1806,2068 'narrat':929 'narrow':541,1009,1554,2287 'nativ':150,2462 'navig':109,724,976,1888,2214 'need':155,619,1917 'neighbor':2495 'never':911,1731 'new':184,2346 'new-screen':183 'newer':1817 'next':680,1396 'nois':1294 'noisi':712,1254,2272 'noncrit':1704 'normal':1828 'noth':1228 'numer':1544 'obscur':385,1732 'obvious':709,906,2085 'offici':2524 'offlin':1173 'onboard':271,937,1090,1489 'one':804,941,945,992,1065,1219,1533,1537,1637,2015,2130,2170,2512,2517 'one-hand':991 'oper':222,405,2430 'optim':1869 'option':1834 'orbittask':188,2376 'order':300,1166,1569 'orient':1290 'ornament':2163 'otherwis':387 'outcom':64,2190 'over-divid':1256 'overflow':28,87,116,170,1447,1639,2074,2469 'overflow-saf':27,86,2073 'overflow/localization':192 'overhaul':378 'overlap':2225 'overline/kicker':790 'own':628 'pad':1604 'part':1825 'pass':194 'path':1711,2342 'pattern':263,2196 'pay':1314 'per':943,1068,1223,1525 'per-app':1524 'persist':901 'person':704 'phone':1861,1886,2060,2118,2199 'phone-on':1885 'pick':1059 'piec':308 'pile':753 'place':969,1744 'placement':1164,2444 'plan':1168,1996 'platform':2465 'platform-us':2464 'pointer':2056 'pointer-driven':2055 'polish':141,1943 'poor':349 'post':1901 'post-launch':1900 'postur':514,1063,1067,1129,2366 'practic':760,871,1449,1785 'prefer':825,1218,1686,1998,2154 'premium':139,741,1094,1135,1433,1987,2319 'preserv':297,854,1295,2133 'primari':63,244,449,706,946,1162,1181,1221,1242,1733,2246,2357,2442 'primit':1927 'product':322,521,703,739,1053,1296,2135 'profil':2017 'progress':910,1590 'proof':2238 'propos':374 'proven':1656 'pseudoloc':1501,1516 'punish':1024 'put':1758 'qa':1509 'qualiti':649,1874,2320 'question':664 'quieter':891 'rail':475,1848 'rather':685,1629,1831,2109 'reach':124 'reachabl':558,2083 'read':151,173,1266,1550 'readabl':1126,1628 'readi':641 'real':531,2104,2313 'realiti':1994 'rebuild':2303 'recompos':1846 'recoveri':459,1710,2158,2400 'recyclerview':1990 'redesign':59,189,313,1916,2145,2420 'refer':2525 'references/patterns.md':152 'references/scenarios.md':174 'reflow':1691 'region':809,1755 'reinforc':700 'relat':1132 'reli':1601,2277 'remain':715,1498,1959,2033,2069 'remov':860 'reorder':1318 'repair':193,361,2309,2514 'repeat':1197 'request':47,326,2150 'required':905 'resili':2302 'resiz':732 'respect':1540,1988 'responsive/adaptive':1999 'restor':371 'restrain':1078 'result':2498 'reusabl':1925 'reveal':852 'review':190,1031 'rhythm':106,767,1086,1414,1551 'richer':1100 'right':464 'rough':238 'rout':158,573,2483 'row':813,884,1558 'rtl':354,540,1575,1597,2284,2388,2468 'rtl-awar':1574 'rule':165,762 'safe':26,29,85,88,121,1124,1581,1657,1687,2072,2075,2079,2183 'safeti':117,1642 'scaffold':1058 'scale':693,721,1662,2334 'scan':564,1383,2276 'scannabl':878 'scenario':2343,2372,2401 'scope':199 'scratch':12,58,71,2351,2508 'screen':15,56,62,74,107,136,185,228,260,282,335,415,551,661,668,682,727,731,777,868,944,973,1023,1069,1133,1142,1156,1217,1224,1261,1273,1380,1430,1625,1740,1864,1873,1932,1973,1984,2027,2061,2142,2181,2200,2270,2323,2349,2378,2406,2506 'screen-famili':867 'screenshot':643,2236 'scroll':1793 'sdk':1814 'second':882 'secondari':454,889 'section':792,1085,1322,1852,1936,2261 'segment':478,1206 'semant':614 'separ':784 'set':276,364 'settl':585,1956 'shape':1115 'sheet':476,955,1199,1363,1672,1679 'shell':466,1178,2360 'shift':1530 'ship':2321 'shorten':2294 'shout':1227 'signatur':1117 'silent':1693 'sit':1245 'size':489,1404,1838 'skill':44,96,127,196,571,2193,2496 'skill-android-mobile-frontend-design' 'skills/android-mobile-frontend-design/scripts/run_examples.sh':2369 'slow':2274 'small':1022 'smallest':363 'snackbar':1348,1673 'solv':2289 'soon':2227 'source-krutikjain' 'space':111,315,346,691,766,1247,1376,1882,1923,2172,2410 'specif':1050,1153,1232,1338,1543,1567 'speed':565 'split':485,550,726 'split-screen':549,725 'squeez':1018 'squeezed-down':1017 'start':240,979,1154,2108 'state':246,357,460,839,858,940,1093,1159,1167,1388,1493,1895,2125,2414 'static':2005,2327 'stay':1003 'still':505,1121,1303,1974,2459 'strengthen':1325 'stress':171,527,718,1425,2473 'stretch':1860 'string':535,1457,1480,1517,1660,2384 'strong':1220,1976,2354 'stronger':827,1084,1112 'structur':108,853,1842,1921,2128,2301 'structure/layout':591 'style':448,1539,2067 'success':1175 'summari':931,1557 'support':456,1523,2117 'surfac':112,277,496,629,828,1097,1251,1634,2164,2267 'surpris':1903 'surviv':1351,1473,2381 'switch':1210 'symmetri':2279 'system':209,546,596,607,1146,1360,1729,1800,1908,1972,2002 'tab':480,1204,1346,1671 'tablet':552,2119 'tap':1759 'tappabl':1804 'target':560,1374,1813,2082,2189 'task':245,299,491,915 'taskbar':1727 'term':419 'test':220,635,1898 'text':344,539,798,1343,1353,1471,1593,1649,2229 'theme':602 'think':1482 'three':663 'tini':1372,2093,2207 'titl':1675 'togeth':802 'token':601,1311 'tool':1505,1510 'toolbar':1674 'tooltip':1719 'tooltip-equival':1718 'top':470,2212 'top-level':2211 'topic-agent-skills' 'topic-android' 'topic-android-development' 'topic-android-skills' 'topic-androidx' 'topic-claude-code' 'topic-codex' 'topic-cursor' 'topic-jetpack-compose' 'topic-kotlin' 'topic-skills' 'touch':524,559,1123,1373,2081 'touch-saf':1122 'translat':536,608,719,1474,1573 'treat':379,1500,2232 'trick':1611,2280 'truncat':384,1342,1694,2223,2408 'trust':842,1095 'type':692,1287 'typographi':516,786,1101,2173 'ui':18,77,221,390,632,636,648,658,714,1012,1021,1410,1764,1805,1862,1926 'understand':432 'unless':324,1651,2148 'unmiss':1332 'unreach':347 'unresolv':2523 'unsaf':1366 'urgenc':1161,1407 'usabl':508,2466 'usag':1422 'use':41,42,94,225,279,311,332,422,763,835,845,958,1064,1645,1695,1836,1928,2215,2502 'user':133,242,301,677,988,1158,1264,1298 'usual':1143 'util':1072 'ux':123,341,2159 'valid':556,903 'valu':952 'verif':646 'view':34,93,163,1716,1907,1967,1971,2001,2482 'view-system':1906,1970,2000 'viewbind':1991 'viewport':808 'viewsystem':216,624,2023 'visibl':1004 'visual':114,292,377,388,1062,1281,1397,1560,1610,2086,2256,2305,2316,2365 'vs':162,2481 'walkthrough':181 'wallpap':849 'want':134,177 'wast':1881 'weak':293,355,831,1025,1321,1369,1413,2257,2412 'web':2052,2204 'weight':1282,1405 'whether':1246,1250,1259,1271,1283 'whitespac':1326 'width':542,544,1010,1548,2217,2288 'win':2043 'window':1837,1894,2124 'without':320,522,710,1333,1475,1531,1858,2062,2390,2518 'word':1568 'work':99,283,588,599,621,1960,1978,2034,2488 'workflow':401,2147 'would':2310 'wrap':1688 'xml':1969,2009,2405 'xml/fragment':2036 'xml/viewbinding/fragment':631 'yet':232,1149 'zone':1754,1771","prices":[{"id":"e5db92ed-8c69-47e6-92a2-14bd2175d207","listingId":"2feb43f9-59e2-4328-bb76-e1a36df2791a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"krutikJain","category":"android-agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:20:50.513Z"}],"sources":[{"listingId":"2feb43f9-59e2-4328-bb76-e1a36df2791a","source":"github","sourceId":"krutikJain/android-agent-skills/android-mobile-frontend-design","sourceUrl":"https://github.com/krutikJain/android-agent-skills/tree/main/skills/android-mobile-frontend-design","isPrimary":false,"firstSeenAt":"2026-05-18T13:20:50.513Z","lastSeenAt":"2026-05-18T19:13:27.996Z"}],"details":{"listingId":"2feb43f9-59e2-4328-bb76-e1a36df2791a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"krutikJain","slug":"android-mobile-frontend-design","github":{"repo":"krutikJain/android-agent-skills","stars":8,"topics":["agent-skills","android","android-development","android-skills","androidx","claude-code","codex","cursor","jetpack-compose","kotlin","skills"],"license":"mit","html_url":"https://github.com/krutikJain/android-agent-skills","pushed_at":"2026-03-25T05:47:20Z","description":"Android skills repository for Kotlin, Compose, XML, testing, CI, release work, and legacy upgrades","skill_md_sha":"b8626aa6f3b2771f33c83779677a41a3fd47a195","skill_md_path":"skills/android-mobile-frontend-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/krutikJain/android-agent-skills/tree/main/skills/android-mobile-frontend-design"},"layout":"multi","source":"github","category":"android-agent-skills","frontmatter":{"name":"android-mobile-frontend-design","description":"Design Android mobile frontend experiences from scratch, improve existing screens, and fix UI issues with brand-forward, localization-safe, overflow-safe guidance across Compose and Views."},"skills_sh_url":"https://skills.sh/krutikJain/android-agent-skills/android-mobile-frontend-design"},"updatedAt":"2026-05-18T19:13:27.996Z"}}