Designer de Fluxo de UX

Quando Usar

Use esta habilidade quando precisar projetar fluxos de usuário e estrutura de navegação seguindo padrões de UX comprovados.

Quando NÃO Usar

• Para implementar uma página única → use /ss-page após o fluxo ser definido
• Para textos em cada etapa → use /ss-copy após a estrutura ser definida
• Para a arquitetura da informação de um produto inteiro — limite o escopo a um fluxo primeiro
• Para mockups de alta fidelidade — isso produz um mapa de fluxo, não designs pixel-perfect

Projete um fluxo de usuário: $0 Descrição: $ARGUMENTS

Instruções

1. Leia a referência do sistema de design:

   • CLAUDE.md para o inventário de componentes
   • DESIGN-LANGUAGE.md para padrões de layout (seções 13-14, 19-20)
   • components/patterns/ para blocos de construção disponíveis

2. Aplique estes princípios de UX:

Arquitetura da Informação

• Divulgação Progressiva: Mostre apenas o que é necessário em cada etapa. Esconda a complexidade por trás de detalhamentos lógicos.
• Lei de Miller: Agrupe informações em conjuntos de no máximo 5-9 itens.
• Lei de Hick: Minimize as escolhas por tela. Menos opções = decisões mais rápidas.

Padrões de Navegação

• Hub & Spoke (Centro e Raios): Dashboard → páginas de detalhes → de volta ao dashboard (padrão para aplicativos móveis)
• Fluxo Linear: Etapa 1 → Etapa 2 → Etapa 3 (para formulários, onboarding, checkout)
• Navegação por Abas: 3-5 seções de nível superior via Barra de Navegação Inferior (BottomNav)

Regras de Fluxo de Tela

• Todo fluxo deve ter um ponto de entrada claro e um ponto de saída claro
• Máximo de 3 toques para alcançar qualquer funcionalidade principal a partir da tela inicial
• A navegação de retorno deve estar sempre disponível (exceto em telas raiz)
• Estados de erro devem fornecer caminhos de recuperação (tentar novamente, voltar, contatar suporte)
• Estados de carregamento devem usar telas esqueleto (nunca spinners em cartões)

Composição de Página (de DESIGN-LANGUAGE.md)

• Siga a Pirâmide de Informação: Hero → Grade de KPIs → Detalhes → Listas
• Cada tela deve responder a UMA pergunta principal
• Acima da dobra (visível sem rolar): a métrica ou ação mais importante
• Use os 4 tipos de seção: Cartão Completo (A), Grade (B), Carrossel (C), Hero (D)

3. Formato de saída:

   • Diagrama de fluxo em ASCII mostrando as conexões das telas
   • Inventário de telas listando o propósito de cada tela e os componentes principais
   • Casos extremos (estados vazios, erros, carregamento) para cada tela
   • Páginas estruturadas usando os padrões PageShell, TopBar, BottomNav

4. Gere os arquivos de página reais usando as convenções /ss-page.

Exemplo

Solicitação do usuário:

Projete fluxos de usuário e estrutura de navegação seguindo padrões de UX comprovados.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente à sua origem anterior e ao contexto local do projeto.
• Verifique comandos, código gerado, dependências, credenciais e comportamento de serviços externos antes de aplicar alterações.
• Não trate exemplos como substitutos para testes específicos do ambiente, revisão de segurança ou aprovação do usuário para ações destrutivas ou custosas.