Mobile Design

Sistema de Design Mobile

Filosofia: Toque em primeiro lugar. Consciente de bateria. Respeitoso com a plataforma. Capaz offline. Princípio Central: Mobile NÃO é um desktop pequeno. PENSE em restrições mobile, PERGUNTE sobre a escolha de plataforma.

🔧 Scripts de Execução

Execute estes para validação (não leia, apenas execute):

🔴 OBRIGATÓRIO: Leia os Arquivos de Referência Antes de Trabalhar!

⛔ NÃO comece o desenvolvimento até ler os arquivos relevantes:

Universal (Sempre Leia)

🧠 mobile-design-thinking.md é PRIORIDADE! Este arquivo garante que a IA pense em vez de usar padrões memorizados.

Específico por Plataforma (Leia Baseado no Alvo)

🔴 Se construir para iOS → Leia platform-ios.md PRIMEIRO! 🔴 Se construir para Android → Leia platform-android.md PRIMEIRO! 🔴 Se cross-platform → Leia AMBOS e aplique lógica condicional por plataforma!

⚠️ CRÍTICO: PERGUNTE ANTES DE ASSUMIR (OBRIGATÓRIO)

PARE! Se a solicitação do usuário for aberta, NÃO padronize para seus favoritos.

Você DEVE Perguntar Se Não Especificado:

⛔ ANTI-PADRÕES MOBILE DE IA (LISTA DE PROIBIÇÕES)

🚫 Estas são tendências padrão de IA que DEVEM ser evitadas!

Pecados de Performance

Pecados de Toque/UX

Pecados de Segurança

Pecados de Arquitetura

📱 Matriz de Decisão de Plataforma

Quando Unificar vs Divergir

                    UNIFICAR (mesmo em ambas)     DIVERGIR (específico de plataforma)
                    ─────────────────────         ──────────────────────────────────
Lógica de Negócio   ✅ Sempre                     -
Camada de Dados     ✅ Sempre                     -
Funcionalidades     ✅ Sempre                     -
Principais
                    
Navegação           -                             ✅ iOS: swipe de borda, Android: botão voltar
Gestos              -                             ✅ Sensação nativa de plataforma
Ícones              -                             ✅ SF Symbols vs Material Icons
Date Pickers        -                             ✅ Pickers nativos se encaixam bem
Modals/Sheets       -                             ✅ iOS: bottom sheet vs Android: dialog
Tipografia          -                             ✅ SF Pro vs Roboto (ou customizado)
Diálogos de Erro    -                             ✅ Convenções de plataforma para alertas

Referência Rápida: Padrões Padrão de Plataforma

🧠 Psicologia de UX Mobile (Referência Rápida)

Lei de Fitts para Toque

Desktop: Cursor é preciso (1px)
Mobile:  Dedo é impreciso (~7mm de área de contato)

→ Alvos de toque DEVEM ser mínimo 44-48px
→ Ações importantes na ZONA DE POLEGAR (inferior da tela)
→ Ações destrutivas LONGE do alcance fácil

Zona de Polegar (Uso com Uma Mão)

┌─────────────────────────────┐
│      DIFÍCIL DE ATINGIR      │ ← Navegação, menu, voltar
│        (alongar)            │
├─────────────────────────────┤
│      OK DE ATINGIR          │ ← Ações secundárias
│       (natural)             │
├─────────────────────────────┤
│      FÁCIL DE ATINGIR        │ ← CTAs primários, tab bar
│    (arco natural do polegar) │ ← Interação de conteúdo principal
└─────────────────────────────┘
        [  HOME  ]

Carga Cognitiva Específica de Mobile

Para mergulho profundo: touch-psychology.md

⚡ Princípios de Performance (Referência Rápida)

Regras Críticas React Native

// ✅ CORRETO: renderItem memoizado + wrapper React.memo
const ListItem = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

const renderItem = useCallback(
  ({ item }: { item: Item }) => <ListItem item={item} />,
  []
);

// ✅ CORRETO: FlatList com todas otimizações
<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}  // ID estável, NÃO índice
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Regras Críticas Flutter

// ✅ CORRETO: construtores const evitam rebuilds
class MyWidget extends StatelessWidget {
  const MyWidget({super.key}); // CONST!

  @override
  Widget build(BuildContext context) {
    return const Column( // CONST!
      children: [
        Text('Conteúdo estático'),
        MyConstantWidget(),
      ],
    );
  }
}

// ✅ CORRETO: State direcionado com ValueListenableBuilder
ValueListenableBuilder<int>(
  valueListenable: counter,
  builder: (context, value, child) => Text('$value'),
  child: const ExpensiveWidget(), // Não vai rebuildar!
)

Performance de Animação

Acelerado por GPU (RÁPIDO):     Limitado por CPU (LENTO):
├── transform                   ├── width, height
├── opacity                     ├── top, left, right, bottom
└── (use APENAS estes)          ├── margin, padding
                                └── (EVITE animar estes)

Para guia completo: mobile-performance.md

📝 CHECKPOINT (OBRIGATÓRIO Antes de Qualquer Trabalho Mobile)

Antes de escrever QUALQUER código mobile, você DEVE completar este checkpoint:

🧠 CHECKPOINT:

Plataforma: [ iOS / Android / Ambas ]
Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]
Arquivos Lidos: [ Liste os arquivos de skill que você leu ]

3 Princípios que Vou Aplicar:
1. _______________
2. _______________
3. _______________

Anti-Padrões que Vou Evitar:
1. _______________
2. _______________

Exemplo:

🧠 CHECKPOINT:

Plataforma: iOS + Android (Cross-platform)
Framework:  React Native + Expo
Arquivos Lidos: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md

3 Princípios que Vou Aplicar:
1. FlatList com React.memo + useCallback para todas listas
2. Alvos de toque 48px, zona de polegar para CTAs primários
3. Navegação específica por plataforma (swipe de borda iOS, botão voltar Android)

Anti-Padrões que Vou Evitar:
1. ScrollView para listas → FlatList
2. renderItem inline → Memoizado
3. AsyncStorage para tokens → SecureStore

🔴 Não consegue preencher o checkpoint? → VOLTE E LEIA OS ARQUIVOS DE SKILL.

🔧 Árvore de Decisão de Framework

O QUE VOCÊ ESTÁ CONSTRUINDO?
        │
        ├── Precisa de atualizações OTA + iteração rápida + team web
        │   └── ✅ React Native + Expo
        │
        ├── Precisa de UI pixel-perfect customizado + crítico de performance
        │   └── ✅ Flutter
        │
        ├── Funcionalidades nativas profundas + foco em plataforma única
        │   ├── Apenas iOS → SwiftUI
        │   └── Apenas Android → Kotlin + Jetpack Compose
        │
        ├── Codebase RN existente + novas funcionalidades
        │   └── ✅ React Native (bare workflow)
        │
        └── Enterprise + codebase Flutter existente
            └── ✅ Flutter

Para árvores de decisão completas: decision-trees.md

📋 Checklist Pré-Desenvolvimento

Antes de Começar QUALQUER Projeto Mobile

• Plataforma confirmada? (iOS / Android / Ambas)
• Framework escolhido? (RN / Flutter / Nativo)
• Padrão de navegação decidido? (Tabs / Stack / Drawer)
• State management selecionado? (Zustand / Redux / Riverpod / BLoC)
• Requisitos offline conhecidos?
• Deep linking planejado desde o dia um?
• Dispositivos alvo definidos? (Telefone / Tablet / Ambos)

Antes de Cada Tela

• Alvos de toque ≥ 44-48px?
• CTA primária na zona de polegar?
• Estado de carregamento existe?
• Estado de erro com retry existe?
• Tratamento offline considerado?
• Convenções de plataforma seguidas?

Antes do Release

• console.log removido?
• SecureStore para dados sensíveis?
• SSL pinning habilitado?
• Listas otimizadas (memo, keyExtractor)?
• Limpeza de memória no unmount?
• Testado em devices de baixo desempenho?
• Labels de acessibilidade em todos elementos interativos?

📚 Arquivos de Referência

Para orientação mais profunda em áreas específicas:

Lembre-se: Usuários mobile são impacientes, constantemente interrompidos, e usam dedos imprecisos em telas pequenas. Design para as PIORES condições: rede ruim, uma mão, sol brilhante, bateria baixa. Se funciona lá, funciona em qualquer lugar.