Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

android-design — pick the track first · hashgraph-online | DecimalAI

hashgraph-online/android-design

SkillScore74Maintained

Use when the user asks for an Android app, Compose UI, Material 3, Material You, Material 3 Expressive, Pixel-style app, foldable/adaptive layout, Play Store deliverable, React Native Android, Flutter Android, Compose Multiplatform, or any Android deliverable. Builds Android apps across system-like Compose, branded Compose, React Native, Flutter, and Compose Multiplatform while preserving UX decisions, state coverage, adaptive navigation, Material motion, accessibility, and product-specific visu

Frontendby hashgraph-online

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/hashgraph-online-android-design/SKILL.md

decimalai skills pull hashgraph-online-android-design --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/hashgraph-online-android-design/SKILL.md https://app.decimal.ai/s/hashgraph-online-android-design/SKILL.md

Raw file: /s/hashgraph-online-android-design/SKILL.md ↗ · machine-readable summary at /s/hashgraph-online-android-design.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 19d ago

Yes — +26% lift · at higher cost+82% tokens0% turns74% of whole cases pass with skill (17/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	30%	0%
case-02	✗→✓	▲ Improved	44%	0%
case-03	✗→✓	▲ Improved	16%	0%
case-04	✗→✓	▲ Improved	71%	0%
case-06	✗→✓	▲ Improved	99%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

hashgraph-online / awesome-codex-plugins

plugins/f0d010c/stark/skills/android-design/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/10/2026Version v1

Skill contents

SKILL.md

android-design — pick the track first

Android has multiple stacks with different visual ceilings. Ask the user which one before any code.

What This Skill Can Do

Choose the right Android track: strict Compose/Material, branded Compose, React Native, Flutter, or Compose Multiplatform.
Design mobile task flows, onboarding, forms, settings, dashboards, media/product surfaces, foldables, tablets, and adaptive layouts.
Preserve UX briefs, state coverage, navigation hierarchy, gesture/back behavior, loading/error/permission states, and accessibility.
Apply Material 3 Expressive, dynamic color, edge-to-edge, predictive back, motion schemes, shape, typography, and responsive window-size classes.
Add branded originality through content surfaces, composition, typography, and state treatment without breaking Android idioms.

Step 0 (MANDATORY) — Ask the user which track

> Which track for this app? > > 1. System-like native (Jetpack Compose + Material 3 Expressive strict) — feels like Pixel Launcher, Google Calendar, Settings. Best for: utilities, system tools, productivity. Spring physics, shape morphing, wavy progress, dynamic color (Material You). Examples: Read You, Androidify sample, Files by Google. > > 2. Branded native (Compose + custom Material theme) — native chrome (M3E motion, predictive back, edge-to-edge) but bespoke content surface (custom typography, hero atmospheres, magazine layouts). Visual ceiling: high. Examples: Fitbit redesign, Google Calendar's editorial moments, Niantic apps. > > 3. React Native (New Architecture + Fabric + Hermes) — real Android views, decent native feel, JavaScript codebase, cross-platform with iOS. Material themable but won't get spring physics or shape morphing without manual work. Examples: Discord mobile, Coinbase, Microsoft Office. > > 4. Flutter — Skia-painted custom rendering. Cross-platform single codebase. Lags Material updates (no M3 Expressive parity, no real dynamic color). Visual ceiling: high if you ship your own design language; weak if mimicking Material. Examples: Google Pay, BMW My BMW, Toyota. > > 5. Compose Multiplatform (1.8+) — same Compose code, runs Android + iOS + Desktop + Web (Wasm experimental). Native on Android, Material-look on iOS (you must Cupertino-skin or accept). Best for: Kotlin shop wanting cross-platform from one codebase. > > Which? Or describe priorities (Play Store launch, cross-platform reach, brand vs Material fit) and I'll pick.

If brief gives strong signal (e.g. "Pixel-style camera" → 1; "cross-platform with React team" → 3; "Kotlin shop, ship to all platforms" → 5), state your pick + reasoning in one sentence. If ambiguous, ask.

Step 0b — Once picked, route

| Track | Reference docs | Default stack | |---|---|---| | 1. System-like Compose | ../../references/material3-expressive.md | Compose BOM 2026.06.00 + Material3 1.4 + adaptive layouts strict | | 2. Branded Compose | Same as 1 | Same as 1 + custom display font + hero atmospheres + bespoke surfaces | | 3. React Native | ../../references/web-fonts.md + cross-platform docs | RN 0.86 New Architecture + Expo Router | | 4. Flutter | None for native fidelity | Flutter 3+ stable | | 5. Compose Multiplatform | ../../references/material3-expressive.md | Current stable CMP + shared Compose |

For tracks 3 and 4: web/cross-platform anti-slop rules apply. Read web references.

State the chosen aesthetic direction and track in one sentence at top of response.

Step 0c — UI decision brief

Before code, read:

../../references/ui-patterns/surface-taxonomy.md
../../references/ui-patterns/ui-decision-brief.md
../../references/ui-patterns/visual-hierarchy.md
../../references/ui-patterns/motion-budget.md

Write the UI decision brief and adapt it to the chosen Android track. Compact screens need thumb-reachable primary actions, sheets, edge-to-edge, and adaptive navigation; tablets/foldables need list-detail or supporting panes; operational tools should stay dense and scannable while preserving Material 3 Expressive motion, dynamic color, and predictive back.

Step 1 — Material 3 Expressive default (only if track 1 or 2)

Launched at I/O 2025. Default for Pixel 10 / Android 16 QPR1. Generated UI must adopt:

Spring physics on every motion — MotionScheme.expressive(). Never FastOutSlowIn on M3E surfaces.
Shape morphing — 35 new shapes (squircle, pill, cookie, clover). Use MaterialShapes.Cookie4Sided, Pill, etc. Buttons/chips/loaders morph between states.
Emphasized typography — bigger, heavier headlines. Use MaterialTheme.typography.displayLarge with intent.
New components:
FloatingToolbar (pill-shaped, drifts with content)
ButtonGroup / SplitButton
FloatingActionButtonMenu
ContainedLoadingIndicator (cycles through M3E shapes)
Wavy progress — LinearWavyProgressIndicator, CircularWavyProgressIndicator with variable amplitude
Large/Small/XL button sizes
Tonal elevation — surface tone shifts, never Modifier.shadow() for elevation
Dynamic color (Material You) — dynamicColorScheme() from wallpaper on Android 12+

Read ../../references/material3-expressive.md for the M3E adoption checklist.

Step 2 — Compose currency (BOM 2026.04.01)

kotlin
implementation(platform("androidx.compose:compose-bom:2026.04.01"))
implementation("androidx.compose.material3:material3:1.4.0")
// or for shape-morphing chips:
implementation("androidx.compose.material3:material3:1.5.0-alpha18")

Use:

currentWindowAdaptiveInfo() + NavigationSuiteScaffold (auto-swaps Bar/Rail/Drawer by WindowSizeClass)
ListDetailPaneScaffold, SupportingPaneScaffold, NavigableListDetailPaneScaffold
SharedTransitionLayout { ... } for shared element transitions (stable)
PredictiveBackHandler / BackHandler — mandatory on Android 16, default ON Android 15+
LookaheadAnimationVisualDebugging for inspecting bounds during dev

Step 3 — Edge-to-edge is mandatory

Android 16 (API 36) deprecated windowOptOutEdgeToEdgeEnforcement. Every screen:

Wraps in Scaffold with content padding from insets
Uses WindowInsets.systemBars, .statusBars, .navigationBars
Predictive back must be wired
Status bar color cannot be set opaque — banned on Android 16

Step 4 — Adaptive layouts

Compact (phone portrait) → NavigationBar (3–5 items)
Medium (foldable inner / tablet portrait) → NavigationRail
Expanded (tablet landscape / desktop) → NavigationDrawer (modal or permanent) + ListDetailPaneScaffold
Foldables: handle tabletop / book postures via WindowInfoTracker

Step 5 — Typography & icons

Default body: Roboto Flex (variable). Headlines: per-app brand expression — but stay within M3E weight/size scale.
Material Symbols (variable axes: weight, fill, grade, optical size) — never FontAwesome/Lucide.
Get Material Symbols from https://fonts.google.com/icons

Step 6 — Anti-slop ban list (Android-specific)

iOS-style top nav bars / chevron-back headers
Hamburger drawer when NavigationBar (3–5 items) or NavigationRail fits
Hard Modifier.shadow(elevation = 8.dp) — use tonalElevation on Surface instead
Custom back stacks ignoring system back / predictive animation
Opaque colored status bars — banned on Android 16
Bottom sheets without drag handle / non-draggable
Static easing curves on M3E surfaces — MotionScheme.expressive() only
SF Symbols / Material Symbols-Outlined-only (use variable axes)
Inter / SF Pro on Android — Roboto Flex / Google Sans / Material default
Centered FAB layouts where docked FAB pattern is canonical
Standard Material 3 baseline 2023 — must be M3 Expressive
Web-style desktop dashboards squeezed into mobile Compose
Decorative motion that hides progress, state, or navigation changes

Step 7 — Reference apps that nail M3 Expressive

Pixel Launcher / Android 16 System UI — shape morph + springs
Google Calendar — floating toolbar + tonal surfaces
Fitbit (2025 redesign) — ContainedLoadingIndicator cycling shapes; floating toolbar
Pixel Camera 10.1 — wavy progress in capture
Google Docs/Sheets/Slides homepages — M3E typography
Chrome (M3E redesign) — adaptive nav
Read You (community RSS, OSS) — canonical M3 + dynamic color
Androidify sample app — official Compose M3E reference

Step 8 — Architecture defaults

MVVM with ViewModel + StateFlow + collectAsStateWithLifecycle()
Hilt for DI
Navigation Compose 3 with type-safe routes
Coil 3 for image loading (replaces Glide for Compose-first apps)
Ktor or Retrofit + KotlinX Serialization for networking
Room for local persistence

Step 9 — Tokens & assets

M3 token spec: https://m3.material.io/foundations/design-tokens/how-to-use-tokens
Theme Builder (web): https://m3.material.io/theme-builder
Theme Builder Figma plugin: https://www.figma.com/community/plugin/1034969338659738588
M3 Figma kit: https://www.figma.com/community/file/1035203688168086460
Material Symbols: https://fonts.google.com/icons
M3E component catalog: https://github.com/meticha/material-3-expressive-catalog

Token JSON: see ../../assets/tokens/material3-expressive.json

Illustrative Want to see what hashgraph-online/android-design would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/1/2026, 21:41 UTC · 23 cases

Lift

+26%

74% vs 48%

Agent turns

1.0 vs 1.0

Tokens

+82%

6,982.39 vs 3,829.83

fail → pass · 9pass → pass · 8fail → fail · 3pass → fail · 3

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I want to build a modern Android podcast player application that feels completely native to Android 16. I need help establishing the UI architecture and code for the main player dashboard and episode queue. Please evaluate the visual/technical options or confirm the stack choice with me, draft a visual layout plan, and write the Jetpack Compose screen implementations featuring responsive layouts for foldables and standard phones, edge-to-edge handling, state management, and modern native Android styling.	fail→pass	39,694	52,847	+33%	1	1	0%	8,282	10,759	+30%	0	0	—
case-02 We are designing an Android system utility app for managing storage and device diagnostics. Can you guide us through setting up the UI layout and code structure? I'd like you to clarify the tech stack choice up front or recommend one based on system utility requirements, provide a brief summary of UI decisions, and then write the Kotlin code for the main overview dashboard screen complete with state handling, smooth transition effects, dynamic device window size support, and proper back-navigation behavior.	fail→pass	48,535	39,561	-18%	1	1	0%	7,485	10,759	+44%	0	0	—
case-03 I'm developing an Android news reader app with editorial typography and bespoke branding. Before writing the screen layouts, please prompt me to pick the right technology track or propose the best fit for a brand-focused native experience. After setting the direction and UI brief, implement the article list and detail view with adaptive multi-pane layout for tablets, modern loading states, and edge-to-edge visual polish using idiomatic Android components.	fail→pass	58,373	66,053	+13%	1	1	0%	8,275	9,571	+16%	0	0	—
case-04 Create the main screen for a new habit tracking app on Android. Show me the project setup and initial Compose layout code.	fail→pass	28,188	32,439	+15%	1	1	0%	5,022	8,609	+71%	0	0	—
case-05 Write a custom animation spec in Jetpack Compose for opening a modal sheet in an Android 16 utility application.	pass→pass	23,595	38,607	+64%	1	1	0%	3,403	7,738	+127%	0	0	—
case-06 Show how to render a modern loading indicator state in Jetpack Compose for a Material 3 Android app while fetching remote data.	fail→pass	23,060	33,040	+43%	1	1	0%	3,847	7,645	+99%	0	0	—
case-07 Build an interactive toggle chip in Jetpack Compose that visually transitions between idle and selected states for an Android 16 app.	fail→pass	28,578	25,326	-11%	1	1	0%	3,797	7,780	+105%	0	0	—
case-08 Create a top-level screen wrapper layout in Jetpack Compose for Android 16 targeting modern system bar transparency rules.	pass→pass	19,144	20,231	+6%	1	1	0%	3,510	6,587	+88%	0	0	—
case-09 Implement custom back button press handling in Jetpack Compose for a detail view in an Android 15+ target application.	pass→pass	16,037	19,930	+24%	1	1	0%	3,049	6,382	+109%	0	0	—
case-10 Design a responsive dual-pane navigation flow in Jetpack Compose that handles both phone portrait screens and expanded tablet displays.	pass→pass	20,956	26,370	+26%	1	1	0%	3,233	8,633	+167%	0	0	—
case-11 Create a custom card container component in Jetpack Compose to visually elevate content above the background surface.	pass→pass	21,052	30,160	+43%	1	1	0%	3,130	8,246	+163%	0	0	—
case-12 Show how to configure and display action icons for an Android toolbar using standard system vectors.	fail→fail	20,239	18,552	-8%	1	1	0%	2,940	6,302	+114%	0	0	—
case-13 Design the top-level navigation structure for a mobile phone app with 4 main tabs.	pass→fail	26,505	4,901	-82%	1	1	0%	2,149	3,138	+46%	0	0	—
case-14 Set up the default body typography style configuration in Jetpack Compose for an Android application.	fail→pass	11,134	15,511	+39%	1	1	0%	2,311	5,377	+133%	0	0	—
case-15 Write a Jetpack Compose composable that loads and renders an image from a remote URL in a modern Compose-first application architecture.	fail→pass	24,649	22,313	-9%	1	1	0%	2,930	5,959	+103%	0	0	—
case-16 Show how to expose and consume UI state from an Android ViewModel inside a Jetpack Compose screen composable.	pass→pass	21,355	25,842	+21%	1	1	0%	2,617	6,693	+156%	0	0	—
case-17 Implement a floating primary action button and related dynamic action items on an Android dashboard screen.	fail→fail	30,520	29,261	-4%	1	1	0%	3,880	3,337	-14%	0	0	—
case-18 Provide the recommended dependency injection setup for injecting a repository into an Android ViewModel in modern Compose apps.	pass→pass	11,427	20,139	+76%	1	1	0%	2,158	4,809	+123%	0	0	—
case-19 Provide the Gradle build script dependencies block for setting up modern Compose Material 3 Expressive libraries.	fail→pass	23,655	15,039	-36%	1	1	0%	2,822	4,783	+69%	0	0	—
case-20 Create an active file transfer progress bar component in Jetpack Compose for Android 16.	fail→fail	19,040	28,508	+50%	1	1	0%	4,302	8,708	+102%	0	0	—
case-21 Write a Kotlin Ktor server application route with Netty engine to handle JWT user authentication and password hashing.	pass→fail	21,902	25,072	+14%	1	1	0%	3,603	8,400	+133%	0	0	—
case-22 Write a Room database auto-migration spec and SQL migration script between version 2 and 3 for an Android SQLite database.	pass→pass	17,600	25,795	+47%	1	1	0%	2,658	6,583	+148%	0	0	—
case-23 Build a native iOS settings screen using SwiftUI with NavigationStack and Toggle views.	pass→fail	17,647	9,631	-45%	1	1	0%	2,683	3,797	+42%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +26 percentage points is the difference between those two pass rates over the 23 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 47.8%
Pass rate with the skill: 73.9%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 3
Skill version measured: v1
Run completed: 9/1/2026, 21:41 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

I want to build a modern Android podcast player application that feels completely native to Android 16. I need help establishing the UI architecture and code for the main player dashboard and episode queue. Please evaluate the visual/technical options or confirm the stack choice with me, draft a visual layout plan, and write the Jetpack Compose screen implementations featuring responsive layouts for foldables and standard phones, edge-to-edge handling, state management, and modern native Android styling.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run74

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+134% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 18 days ago

Other measured skills in the registry, with their headline benchmark lift.