---
name: mobile-design
description: "Design de interfaces mobile-first e mobile-native — gestos, performance percebida, skeleton screens, padrões iOS HIG / Material 3. Activates: mobile, app, ios, android, responsive mobile."
category: design
keywords: [mobile, ios, android, responsive, gesture, performance]
license: MIT
metadata:
  author: "Funnel Labs I.A — Anthony Nichols & André Cia"
  version: "1.0.0"
  consumed_by: [web-designer]
---

# Mobile Design

Owned por `@web-designer`. Foco em web mobile-first (responsividade) e quando aplicável padrões nativos (HIG iOS, Material 3 Android).

## Princípios

1. **Mobile-first sempre.** Designar mobile e expandir; nunca o contrário.
2. **Touch target mínimo 44×44pt** (iOS HIG) / 48×48dp (Material).
3. **Performance percebida > performance real** — skeleton screens, optimistic UI, transitions < 300ms.
4. **Gesto > tap quando intuitivo** — swipe pra delete, pull-to-refresh.
5. **Safe areas** — notch, dynamic island, home indicator.

## Breakpoints recomendados

- xs: 320px (iPhone SE 1ª gen — caso edge)
- sm: 375px (iPhone padrão)
- md: 414px (iPhone Plus / Pro Max)
- lg: 768px (tablet vertical)
- xl: 1024px+ (desktop)

## Padrões críticos

- **Tab bar** ≤ 5 itens com ícone + label (HIG).
- **Bottom sheet** preferível a modal full-screen pra ações secundárias.
- **Pull-to-refresh** em listas atualizáveis.
- **Form errors inline** (não alert nativo).
- **Auto-focus** no primeiro input em forms.

## Anti-patterns mobile

- ❌ Hover state como interação primária (mobile não tem hover real).
- ❌ Text truncado sem ellipsis ou expansion.
- ❌ Botão CTA fora da safe area.
- ❌ Modal full-screen sem botão de close óbvio.
- ❌ Form com 10+ fields sem progressive disclosure.

## Output

- Figma com frames iPhone + Android.
- Breakpoints documentados.
- Specs touch targets, gestos, skeleton states.
