design-android

## Design Android — Mockup and Handoff, Not Code ### When After `design-system` tokens exist. This skill never writes Jetpack Compose — it produces a static HTML mockup at exact device dimensions plus a spec an Android developer implements. ### Input - `design-system.md` — OKLCH palette, typography direction, motion personality. - The screen/flow to mock up and the target window size class. ### Steps 1. **Map tokens to Material 3 type roles.** `references/type-scale.md` gives the 15-role baseline scale (displayLarge 57/64sp … labelSmall 11/16sp, Roboto). Material 3 Expressive adds a parallel **15-role Emphasized set** on top (30 roles total) for stronger visual rhythm — use baseline by default, reach for Emphasized when the tone from `design-method` calls for it. Source: m3.material.io/styles/typography/type-scale-tokens. 2. **Map tokens to Material 3 color roles.** `references/color-roles.md` documents the core role families (primary/secondary/tertiary + surface/onSurface) derived from a seed color. Material 3's full role system is larger — **45 color roles**, including a **surface-container ramp** (lowest → highest: `surfaceContainerLowest`, `surfaceContainerLow`, `surfaceContainer`, `surfaceContainerHigh`, `surfaceContainerHighest` — 5 levels for layering surfaces without shadow), `error`/ `onError`/`errorContainer` (kept **static**, never derived from the dynamic seed, so error states stay legible regardless of theme), and **dynamic co...