design-android

Name: design-android
Author: fusengine

21stars3forks

How to install design-android?

fusengine/agents/design-android

$npx -y skills add fusengine/agents --skill design-android

Installs into the current project.

Summary

Android mockups and handoff specs — Material 3 Expressive type scale (baseline + emphasized), full color-role system (45 roles incl. surface-container ramp + dynamic color), elevation tokens, shape scale, window size classes, FAB tiers, motion, device-framed HTML mockup, and a Co

Files · 1

View on GitHub

SKILL.md

1	## Design Android — Mockup and Handoff, Not Code
2
3	### When
4	After `design-system` tokens exist. This skill never writes Jetpack Compose — it produces
5	a static HTML mockup at exact device dimensions plus a spec an Android developer implements.
6
7	### Input
8	- `design-system.md` — OKLCH palette, typography direction, motion personality.
9	- The screen/flow to mock up and the target window size class.
10
11	### Steps
12
13	1. Map tokens to Material 3 type roles. `references/type-scale.md` gives the 15-role
14	baseline scale (displayLarge 57/64sp … labelSmall 11/16sp, Roboto). Material 3
15	Expressive adds a parallel 15-role Emphasized set on top (30 roles total) for
16	stronger visual rhythm — use baseline by default, reach for Emphasized when the tone
17	from `design-method` calls for it. Source: m3.material.io/styles/typography/type-scale-tokens.
18	2. Map tokens to Material 3 color roles. `references/color-roles.md` documents the
19	core role families (primary/secondary/tertiary + surface/onSurface) derived from a seed
20	color. Material 3's full role system is larger — 45 color roles, including a
21	surface-container ramp (lowest → highest: `surfaceContainerLowest`,
22	`surfaceContainerLow`, `surfaceContainer`, `surfaceContainerHigh`,
23	`surfaceContainerHighest` — 5 levels for layering surfaces without shadow), `error`/
24	`onError`/`errorContainer` (kept static, never derived from the dynamic seed, so
25	error states stay legible regardless of theme), and dynamic color: on Android 12+
26	all roles can be generated tonally from a user's wallpaper/seed, not just the design
27	seed. Source: m3.material.io/styles/color/roles,
28	m3.material.io/styles/color/system/how-the-system-works. Gap: `color-roles.md`
29	documents the core families, not the full 45-role/surface-container enumeration — use
30	the fact above until that reference is expanded (out of this pass's exclusive scope).
31	3. Map tokens to shapes. `references/shape-scale.md` (never an arbitrary
32	border-radius). Material 3's full shape scale extends to 32dp, 48dp, and Full
33	(pill) beyond what's currently listed — Expressive defaults buttons to pill (Full)
34	shape unless a product reason calls for a smaller radius. Source:
35	m3.material.io/styles/shape/shape-scale-tokens. Gap: `shape-scale.md` stops at 28dp
36	(Extra Large); reconfirm 32/48/Full on the m3.material.io page above until expanded.
37	4. Apply elevation as tokens, not ad-hoc shadow. 6 levels, 0 → 5, mapping to
38	0 / 1 / 3 / 6 / 8 / 12dp. Elevation is expressed via shadow at each level —
39	the older `surfaceTint`-only approach is deprecated; don't rely on tint alone to
40	convey elevation. Source: m3.material.io/styles/elevation/overview. Gap: no
41	`references/elevation.md` exists yet — these token values are grounded but inlined
42	here pending a dedicated reference file (out of this pass's exclusive scope).
43	5. Pick the window size class from `references/window-size-classes.md` — mock up at
44	the dp width that matches the target device class (phone/foldable/tablet/desktop).
45	6. Build the HTML mockup: a device-frame `<div>` sized in dp-equivalent px, following
46	the 4dp base / 8dp grid throughout.
47	7. Verify touch targets and spacing: 48×48dp minimum touch target, ≥ 8dp spacing
48	between adjacent targets — see `references/touch-targets.md`.
49	8. FAB: pick one of 3 tiers, sized to the screen's primary-action weight — small FAB
50	is deprecated in Material 3 Expressive, don't use it. Source:
51	m3.material.io/components/floating-action-button/overview. Gap: no dedicated FAB
52	reference file yet; the 3 surviving tiers and their exact dp sizes should be reconfirmed
53	on the page above before finalizing a mockup.
54	9. Motion: Material 3 Expressive uses spring-physics-based motion (not fixed
55	duration/easing curves) for its signature feel; the legacy duration/easing-curve tokens
56	still apply where spring motion isn't specified. Source:
57	m3.material.io/styles/motion/overview. Gap: no `references/motion.md` exists yet —
58	note spring vs legacy-easing choice explicitly in the handoff spec until one exists.
59	10. Write the handoff spec per `reference

People who liked this also viewed

6 picks

Type

design-android

21stars3forks

View on GitHub

How to install design-android?

fusengine/agents/design-android

$npx -y skills add fusengine/agents --skill design-android

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	## Design Android — Mockup and Handoff, Not Code
2
3	### When
4	After `design-system` tokens exist. This skill never writes Jetpack Compose — it produces
5	a static HTML mockup at exact device dimensions plus a spec an Android developer implements.
6
7	### Input
8	- `design-system.md` — OKLCH palette, typography direction, motion personality.
9	- The screen/flow to mock up and the target window size class.
10
11	### Steps
12
13	1. Map tokens to Material 3 type roles. `references/type-scale.md` gives the 15-role
14	baseline scale (displayLarge 57/64sp … labelSmall 11/16sp, Roboto). Material 3
15	Expressive adds a parallel 15-role Emphasized set on top (30 roles total) for
16	stronger visual rhythm — use baseline by default, reach for Emphasized when the tone
17	from `design-method` calls for it. Source: m3.material.io/styles/typography/type-scale-tokens.
18	2. Map tokens to Material 3 color roles. `references/color-roles.md` documents the
19	core role families (primary/secondary/tertiary + surface/onSurface) derived from a seed
20	color. Material 3's full role system is larger — 45 color roles, including a
21	surface-container ramp (lowest → highest: `surfaceContainerLowest`,
22	`surfaceContainerLow`, `surfaceContainer`, `surfaceContainerHigh`,
23	`surfaceContainerHighest` — 5 levels for layering surfaces without shadow), `error`/
24	`onError`/`errorContainer` (kept static, never derived from the dynamic seed, so
25	error states stay legible regardless of theme), and dynamic color: on Android 12+
26	all roles can be generated tonally from a user's wallpaper/seed, not just the design
27	seed. Source: m3.material.io/styles/color/roles,
28	m3.material.io/styles/color/system/how-the-system-works. Gap: `color-roles.md`
29	documents the core families, not the full 45-role/surface-container enumeration — use
30	the fact above until that reference is expanded (out of this pass's exclusive scope).
31	3. Map tokens to shapes. `references/shape-scale.md` (never an arbitrary
32	border-radius). Material 3's full shape scale extends to 32dp, 48dp, and Full
33	(pill) beyond what's currently listed — Expressive defaults buttons to pill (Full)
34	shape unless a product reason calls for a smaller radius. Source:
35	m3.material.io/styles/shape/shape-scale-tokens. Gap: `shape-scale.md` stops at 28dp
36	(Extra Large); reconfirm 32/48/Full on the m3.material.io page above until expanded.
37	4. Apply elevation as tokens, not ad-hoc shadow. 6 levels, 0 → 5, mapping to
38	0 / 1 / 3 / 6 / 8 / 12dp. Elevation is expressed via shadow at each level —
39	the older `surfaceTint`-only approach is deprecated; don't rely on tint alone to
40	convey elevation. Source: m3.material.io/styles/elevation/overview. Gap: no
41	`references/elevation.md` exists yet — these token values are grounded but inlined
42	here pending a dedicated reference file (out of this pass's exclusive scope).
43	5. Pick the window size class from `references/window-size-classes.md` — mock up at
44	the dp width that matches the target device class (phone/foldable/tablet/desktop).
45	6. Build the HTML mockup: a device-frame `<div>` sized in dp-equivalent px, following
46	the 4dp base / 8dp grid throughout.
47	7. Verify touch targets and spacing: 48×48dp minimum touch target, ≥ 8dp spacing
48	between adjacent targets — see `references/touch-targets.md`.
49	8. FAB: pick one of 3 tiers, sized to the screen's primary-action weight — small FAB
50	is deprecated in Material 3 Expressive, don't use it. Source:
51	m3.material.io/components/floating-action-button/overview. Gap: no dedicated FAB
52	reference file yet; the 3 surviving tiers and their exact dp sizes should be reconfirmed
53	on the page above before finalizing a mockup.
54	9. Motion: Material 3 Expressive uses spring-physics-based motion (not fixed
55	duration/easing curves) for its signature feel; the legacy duration/easing-curve tokens
56	still apply where spring motion isn't specified. Source:
57	m3.material.io/styles/motion/overview. Gap: no `references/motion.md` exists yet —
58	note spring vs legacy-easing choice explicitly in the handoff spec until one exists.
59	10. Write the handoff spec per `reference

People who liked this also viewed

6 picks

Type