---
name: Mobile Screens (Figma)
description: Native-feel mobile screen flows on a stock iOS or Android canvas — typically 3–8 screens covering a coherent user journey.
triggers:
  - mobile app
  - mobile screens
  - app design
  - ios screens
  - android screens
  - mobile prototype
cd:
  mode: mobile
  platform: figma-mobile
  scenario: product
  preview: figma_frames
  fidelity: high
  speaker_notes: false
  animations: false
  featured: true
  design_system:
    requires: true
    sections: [palette, type, spacing, components]
  craft:
    requires:
      - typography
      - typography-hierarchy
      - color
      - anti-ai-slop
      - accessibility-baseline
      - state-coverage
      - form-validation
  inputs:
    - user flow (entry → goal in 3–8 steps)
    - platform (iOS / Android / both)
    - key content (real labels, real data)
  parameters:
    - canvas (default iPhone 15 Pro, 393×852)
    - dark_mode (default false)
  outputs:
    primary: figma_frames
    capabilities_required:
      - figma_execute
  default_for:
    - mobile-app
    - mobile-screens
  example_prompt: "4 onboarding screens for a running app — iPhone 15 Pro, light mode"
---

## Flow-first

A mobile skill is about the **sequence**, not individual screens. Before composing anything:

1. Name each screen with the user intent (e.g. `welcome`, `pick-goal`, `permissions`, `home`), not by section.
2. Draw the transition arrows between screens in a single sentence each ("tap Start on welcome → pick-goal"). If a transition needs more than one sentence, the screen boundary is wrong.
3. Only then begin the first screen. Build screens in journey order, not importance order.

A 4-screen flow where each screen has one job beats a 2-screen flow where each tries to do three.

## Canvas & chrome

- Use a real device canvas (iPhone 15 Pro 393×852, Pixel 8 412×915) with the safe-area insets drawn as light guides (not visible in the delivered frame).
- Status bar: platform-accurate height, carrier / signal / battery drawn faithfully. Don't use the auto-generated iOS mockup with fake time `9:41` unless that's the convention you want — pick a consistent time and use it across all screens.
- Home indicator / gesture bar on iOS: present, 5px from bottom.
- Respect one-handed reach: primary CTAs below vertical midline.

## Layout rules

- **One primary action per screen.** Full-width CTA at bottom, accent-colored, label verb-led ("Start", "Continue", "Save").
- **Vertical rhythm.** Between sections: 24 or 32. Between related elements: 12 or 16. Within a row: 8. Pick three values and hold them.
- **Tap targets ≥ 44×44pt.** Applies to icon buttons, chips, list rows. If it's tappable it's 44 minimum.
- **Content before chrome.** Navigation bar gets 44–56pt; body fills the rest. Don't crowd the top with logo + title + avatar + search + filter.
- **Consistent list rows.** One leading slot (avatar/icon), one content stack (title + subtitle), one trailing slot (chevron/value/action). Apply the same pattern across the app.

## Palette discipline

- `color.bg` as screen background. `color.surface` for cards, sheets, modals.
- `color.accent` on the primary CTA and at most one other spot per screen (e.g. the selected tab icon).
- `color.fg` for titles, `color.muted` for body/secondary text. Keep WCAG AA contrast (4.5:1 body, 3:1 large).
- Dark mode: if enabled, do not invert a light palette. Use the bound DS's dark ramp. If the DS lacks one, say so and ask.

## Typography scale

Mobile wants tighter scale than desktop:

- Title large (screen header): 28–34pt, weight 600–700.
- Title medium (section): 20–22pt, weight 600.
- Body: 15–17pt, weight 400.
- Caption / footnote: 12–13pt.

Never more than 4 type sizes on a single screen.

## State coverage

Every interactive screen must show or label at least three states:

1. **Default** — the happy path content.
2. **Empty** — what this screen looks like on first use with no data. Use specific copy ("Your first run starts here"), not "No data".
3. **Loading / error** — a skeleton or inline error, not a full-screen spinner that hides context. Error copy is human: "We couldn't reach the server — check your connection and retry."

If the flow has a form, also show validation states (inline, below field, muted-foreground → error-foreground on invalid).

## Anti-patterns

- Emoji in list rows or tab bars. Use the platform SF Symbols / Material icons, or a monoline icon set in the DS.
- Floating action button (FAB) on a screen that already has a bottom CTA — pick one.
- More than 5 items in a bottom tab bar.
- Skeuomorphic shadows stacking — one soft shadow per elevated surface is enough.
- Mixing iOS and Material conventions on the same screen (big-sur title + floating-action button + Android-style ripple).

## Quality bar

Run `craft_lint` against the concatenated copy of all screens. Cross-screen: re-read the flow — does the user know what to tap next without reading twice? If not, the hierarchy isn't pulling its weight on at least one screen.