mobile-mock

name	mobile-mock
description	Mobile UI mockups with correct proportions and touch interactions. Enforces 44px touch targets, proper status bar height, and safe area insets. Use for mobile app screens, responsive mobile layouts, or any prototype intended for phone viewports.
triggers	["mobile mock","phone screen","iOS mock","android mock","mobile UI"]
df	{"mode":"prototype","platform":"mobile","scenario":"design","design_system":{"requires":true}}

Mobile Mock Skill

Viewport and Frame

Output only the screen contents as if filling a 375×812 viewport (or 390×844 for iPhone 14+). The hosting environment provides the device frame, status bar, and home indicator.

Forbidden unless explicitly asked:

• Phone-shaped wrapper divs (bezel, notch, dynamic island)
• iOS status bar icons
• Home indicator bar
• Any explicit phone chrome

Use:

body { max-width: 390px; margin: 0 auto; min-height: 100vh; }

Touch Targets

Every interactive element must be 44×44px minimum. Apply padding to extend small visual elements — don't enlarge the visual itself.

.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Safe Area Insets

• Top: reserve 44–50px for status bar.
• Bottom: reserve 34px for home indicator on notched iPhones.
• Use padding-top: env(safe-area-inset-top, 44px) in real implementations.

Typography Scale

Mobile type scale (base 16px):

• Display: 28–34px, weight 700, tight tracking (−0.02em)
• Headline: 20–24px, weight 600
• Body: 15–16px, weight 400, line-height 1.5
• Caption: 12–13px, weight 400, muted color

Never use type smaller than 12px on mobile.

Interaction Patterns

• No hover-only states. Mobile has no hover. Use :active for press feedback.
• Swipe gestures need visual affordances (drag handles, chevrons).
• Bottom sheets/modals dismissible by swipe-down or background tap.

Spacing System

8px base grid:

• 16px: screen edges
• 12px: card insets
• 8px: between related elements
• 4px: tight pairs

List item height: 48–56px single-line, 64–72px two-line.

Navigation

• Bottom tab bar: 49–56px tall, 3–5 items max.
• Top nav bar: 44–56px tall.
• Avoid hamburger menus — they hide navigation on mobile.