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.