android-design

Name: android-design
Author: f0d010c

19stars0forks

How to install android-design?

f0d010c/stark/android-design

$npx -y skills add f0d010c/stark --skill android-design

Installs into the current project.

Summary

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

Files · 1

View on GitHub

SKILL.md

1	# android-design — pick the track first
2
3	Android has multiple stacks with different visual ceilings. Ask the user which one before any code.
4
5	## What This Skill Can Do
6
7	- Choose the right Android track: strict Compose/Material, branded Compose, React Native, Flutter, or Compose Multiplatform.
8	- Design mobile task flows, onboarding, forms, settings, dashboards, media/product surfaces, foldables, tablets, and adaptive layouts.
9	- Preserve UX briefs, state coverage, navigation hierarchy, gesture/back behavior, loading/error/permission states, and accessibility.
10	- Apply Material 3 Expressive, dynamic color, edge-to-edge, predictive back, motion schemes, shape, typography, and responsive window-size classes.
11	- Add branded originality through content surfaces, composition, typography, and state treatment without breaking Android idioms.
12
13	## Step 0 (MANDATORY) — Ask the user which track
14
15	> Which track for this app?
16	>
17	> 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.
18	>
19	> 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.
20	>
21	> 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.
22	>
23	> 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.
24	>
25	> 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.
26	>
27	> Which? Or describe priorities (Play Store launch, cross-platform reach, brand vs Material fit) and I'll pick.
28
29	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.
30
31	## Step 0b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like Compose \| `../../references/material3-expressive.md` \| Compose BOM 2026.04 + Material3 1.4 + adaptive layouts strict \|
36	\| 2. Branded Compose \| Same as 1 \| Same as 1 + custom display font + hero atmospheres + bespoke surfaces \|
37	\| 3. React Native \| `../../references/web-fonts.md` + cross-platform docs \| RN 0.78+ New Arch + Expo Router \|
38	\| 4. Flutter \| None for native fidelity \| Flutter 3+ stable \|
39	\| 5. Compose Multiplatform \| `../../references/material3-expressive.md` \| CMP 1.8 stable + shared Compose \|
40
41	For tracks 3 and 4: web/cross-platform anti-slop rules apply. Read web references.
42
43	State the chosen aesthetic direction and track in one sentence at top of response.
44
45	## Step 0c — UI decision brief
46
47	Before code, read:
48
49	- `../../references/ui-patterns/surface-taxonomy.md`
50	- `../../references/ui-patterns/ui-decision-brief.md`
51	- `../../references/ui-patterns/visual-hierarchy.md`
52	- `../../references/ui-patterns/motion-budget.md`
53
54	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.
55
56	## Step 1 — Material 3 Expressive default (only if track 1 or 2)
57
58	Launched at I/O 2025. Default for Pixel 10 / Android 16 QPR1. Generated UI must adopt:
59
60	- Spring physics on every motion — `MotionScheme.expressive()`. Never `FastOutSlowIn`

People who liked this also viewed

6 picks

Type

android-design

19stars0forks

View on GitHub

How to install android-design?

f0d010c/stark/android-design

$npx -y skills add f0d010c/stark --skill android-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# android-design — pick the track first
2
3	Android has multiple stacks with different visual ceilings. Ask the user which one before any code.
4
5	## What This Skill Can Do
6
7	- Choose the right Android track: strict Compose/Material, branded Compose, React Native, Flutter, or Compose Multiplatform.
8	- Design mobile task flows, onboarding, forms, settings, dashboards, media/product surfaces, foldables, tablets, and adaptive layouts.
9	- Preserve UX briefs, state coverage, navigation hierarchy, gesture/back behavior, loading/error/permission states, and accessibility.
10	- Apply Material 3 Expressive, dynamic color, edge-to-edge, predictive back, motion schemes, shape, typography, and responsive window-size classes.
11	- Add branded originality through content surfaces, composition, typography, and state treatment without breaking Android idioms.
12
13	## Step 0 (MANDATORY) — Ask the user which track
14
15	> Which track for this app?
16	>
17	> 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.
18	>
19	> 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.
20	>
21	> 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.
22	>
23	> 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.
24	>
25	> 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.
26	>
27	> Which? Or describe priorities (Play Store launch, cross-platform reach, brand vs Material fit) and I'll pick.
28
29	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.
30
31	## Step 0b — Once picked, route
32
33	\| Track \| Reference docs \| Default stack \|
34	\|---\|---\|---\|
35	\| 1. System-like Compose \| `../../references/material3-expressive.md` \| Compose BOM 2026.04 + Material3 1.4 + adaptive layouts strict \|
36	\| 2. Branded Compose \| Same as 1 \| Same as 1 + custom display font + hero atmospheres + bespoke surfaces \|
37	\| 3. React Native \| `../../references/web-fonts.md` + cross-platform docs \| RN 0.78+ New Arch + Expo Router \|
38	\| 4. Flutter \| None for native fidelity \| Flutter 3+ stable \|
39	\| 5. Compose Multiplatform \| `../../references/material3-expressive.md` \| CMP 1.8 stable + shared Compose \|
40
41	For tracks 3 and 4: web/cross-platform anti-slop rules apply. Read web references.
42
43	State the chosen aesthetic direction and track in one sentence at top of response.
44
45	## Step 0c — UI decision brief
46
47	Before code, read:
48
49	- `../../references/ui-patterns/surface-taxonomy.md`
50	- `../../references/ui-patterns/ui-decision-brief.md`
51	- `../../references/ui-patterns/visual-hierarchy.md`
52	- `../../references/ui-patterns/motion-budget.md`
53
54	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.
55
56	## Step 1 — Material 3 Expressive default (only if track 1 or 2)
57
58	Launched at I/O 2025. Default for Pixel 10 / Android 16 QPR1. Generated UI must adopt:
59
60	- Spring physics on every motion — `MotionScheme.expressive()`. Never `FastOutSlowIn`

People who liked this also viewed

6 picks

Type