Design System

App Surfaces - Mobile Embed

Overview
Review paths

Mobile Embed

Mobile app framing, list states, and visual handoffs should be reviewed as a first-class surface, not as a desktop afterthought.

Mobile Embed

Mobile app framing is its own surface test, not a desktop shell squeezed into a narrower width.

What it is for

Make mobile framing deliberate instead of assuming the desktop shell will collapse cleanly.

Use when

You are checking touch density, first viewport hierarchy, or list-to-canvas transitions.

Do not use when

You are only validating desktop surfaces and assuming mobile parity.

Related patterns

Examples & Recipes · Navigation & Shells

Escalation path

Inline card → mobile list state → mobile visual surface or fullscreen handoff.

Developer details

Start from these files when you need to trace the live implementation.

tmp/reference Claude MCP mobile components benchmark

Phone shell

New chat state

9:41
Mobile app
Context-aware onboarding and a thread-native app shell.
Recent project drafts
Ask app

List state

Loading and results states should be comparable side by side.

Map / canvas state

App surfaces can switch from list to visual canvas without a new nav bucket.

Visual surface
KnearMe | Service Portfolio Platform