ricarossetto/grandma-proof

À prova de vovó

Imagine a Vovó Rosa: 70 anos, pouca escolaridade, visão de perto fraca, com medo de que um clique errado quebre tudo. Se ela consegue usar a tela sozinha, todo mundo consegue.

Este skill tem duas metades. A primeira rege o que você constrói (regras 1 a 4). A segunda rege como você trabalha (regras 5 a 7). Ambas se aplicam ao mesmo tempo.

Para quem você constrói

Antes de projetar qualquer tela, pense nestas quatro pessoas. A tela deve funcionar para todas as quatro.

Pessoa	Como ela é	O que ela precisa da tela
Vovó Rosa, 70	Não tem certeza onde está clicando, se perde, tem medo de erros	Letras grandes, botões grandes, um único caminho, sempre uma forma de voltar
Sr. José	Pouca escolaridade, lê devagar, não é fluente no idioma do aplicativo	Palavras do dia a dia, frases curtas, ícones acompanhados de texto
Kaíque, 17	Cresceu no TikTok, desiste em 3 segundos se algo trava ou confunde	Resposta instantânea ao toque, sem menus dentro de menus, fluido
Bia, caloura	Nunca precisou de um "sistema" antes e agora precisa fazer algo complexo	Uma tela acolhedora que diz o próximo passo; erros que não assustam nem culpam

Nenhum deles lê manual. Nenhum sabe o que significa "painel", "módulo", "sincronizar" ou "sessão expirada".

Parte A — O que você constrói

1. Simplicidade

O alvo é uma tela fácil, não uma tela vazia. Remover demais também confunde.

• Uma tela, uma tarefa. Cada tela tem uma ação principal, visível sem rolagem. Outras ações parecem mais discretas.
• Menos botões. Conte os cliques da tarefa mais comum e tente remover um. Ações raras vão para um menu "Mais"; ações não utilizadas desaparecem.
• Menos texto. Corte qualquer texto cuja remoção não deixe ninguém perdido. Títulos com até 5 palavras. Frases com até 12 palavras.
• Mantenha o que guia. Mantenha sempre: onde estou, o que faço agora, como volto. Botões com ícone apenas para os universais (fechar, voltar, pesquisar).
• Pergunte só o necessário. Um campo que o sistema pode descobrir não é uma pergunta. Formulários longos viram etapas curtas com "Passo 2 de 4".
• Escolha por ela. Pré-selecione a opção mais comum. Configurações avançadas ficam ocultas até que alguém as procure.

2. Vovó

Palavras

• Use a palavra que ela usa em casa: "entrar", não "autenticar"; "salvar", não "persistir"; "excluir", não "remover registro".
• Sem siglas ou termos técnicos na tela. Se um termo for inevitável, explique-o em uma frase curta na primeira vez.
• O botão diz o que acontece: "Enviar pedido", "Excluir foto". Nunca um "OK", "Confirmar" ou "Clique aqui" genérico.
• Mesmo nome para a mesma coisa em todas as telas.

Tamanho e leitura

• Texto do corpo com pelo menos 16 px; prefira 18 px. Contraste de no mínimo 4,5 para 1.
• Tudo que é clicável tem pelo menos 48 × 48 px com 8 px de folga do vizinho.
• Nunca sinalize apenas com cor. Adicione um ícone ou uma palavra.

Não se perder

• Cada tela mostra onde a pessoa está e tem um "Voltar" no mesmo lugar.
• Mudanças de tela usam uma transição curta (150 a 250 ms) que mostra de onde você veio e para onde foi. Nada pula, pisca ou se move sozinho.
• Após cada ação, a tela responde imediatamente: "Salvo", "Enviado". Se levar mais de 1 segundo, mostre que está funcionando.
• Nada funciona apenas por um gesto oculto (deslizar, pressionar longamente, toque duplo). Um botão visível sempre faz a mesma coisa.

Sem medo de erros

• Ações podem ser desfeitas. Onde não podem, pergunte primeiro com ambas as saídas escritas por extenso: "Excluir foto" e "Manter foto".
• Mensagens de erro dizem o que aconteceu e o que fazer, sem culpa: "Não foi possível encontrar esse número. Verifique os dígitos e tente novamente."
• Telas vazias dizem o próximo passo: "Você ainda não tem pedidos. Toque em Novo pedido para começar."
• Nunca apague o que ela digitou por causa de um erro.

3. Alinhamento

IA tende a gerar botões tortos, caixas de tamanhos diferentes e texto colado em botões. Não entregue isso.

• Mesma linha. Botões em um grupo compartilham uma linha de base e uma altura.
• Mesmo tamanho. Botões em um grupo compartilham altura, raio de canto, fonte e espaçamento. Se as larguras variarem muito, iguale à maior.
• Mesma proporção. Cartões e caixas em uma lista compartilham largura e altura da linha. Texto longo é truncado com reticências; não estica a caixa.
• Uma régua. Todo espaçamento vem de uma escala (4, 8, 12, 16, 24, 32, 48 px). Sem valores avulsos como 13 px ou 22 px.
• Um destaque. Um botão primário por tela. Os demais usam o estilo secundário, sempre o mesmo.
• Botões mantêm distância do texto. Pelo menos 24 px entre um botão e qualquer bloco de texto. Não empilhe uma frase logo acima ou abaixo de um botão.
• Botões não têm legendas. Não coloque texto na tela para explicar um botão. Se um botão precisa de explicação, seu rótulo é ruim: mude o rótulo. Explicação extra vai na dica mostrada ao passar o mouse (title ou tooltip, além de aria-label para leitores de tela).
• Verifique medindo. Depois de construir, abra a tela, tire um print e compare alturas, larguras e espaços. Ler o código não é suficiente.

4. Sem cara de IA

Leia references/ai-tells.md antes de criar uma página inicial, tela de boas-vindas ou qualquer texto promocional. Resumindo:

• A "página inicial GPT" é proibida: um bloco gigante centralizado de texto com uma frase impactante e uma palavra em itálico, um selo acima, dois botões abaixo e três cartões com ícones logo depois.
• Reflexos proibidos: gradientes roxos ou azul-violeta, brilho neon, vidro fosco, texto gradiente, emoji no lugar de ícones, sombras coloridas, cartões dentro de cartões.
• Prova inventada proibida: números, depoimentos, logotipos de clientes ou avaliações que não existem.
• Discurso de vendas proibido: "Transforme", "Eleve", "Revolucione", "sem esforço", "Não é X. É Y."
• Em vez disso: mostre o produto real, diga em palavras simples o que ele faz e coloque a ação principal perto do topo.

O teste: se o bloco pudesse ser colado no site de outro produto sem alterações, é genérico. Refine com o conteúdo deste produto.

Parte B — Como você trabalha

5. Fale simplesmente

A pessoa do outro lado pode não ser programadora, mesmo que use uma palavra técnica. Usar um termo não prova que ela domina o assunto.

• Comece pelo resultado: o que mudou e o que a pessoa faz agora.
• Frases curtas, palavras comuns. Termos técnicos apenas quando necessário, com algumas palavras de explicação ao lado.
• Não despeje nomes de arquivos, comandos ou código a menos que seja solicitado. Se a pessoa precisar executar algo, dê passos numerados.
• Diga claramente o que funcionou, o que não funcionou e o que está faltando.
• Se a pessoa pedir o detalhe técnico, então dê-o por completo.

6. Divida o trabalho com subagentes

Subagentes aceleram o trabalho e melhoram o resultado. Use-os sempre que a tarefa tiver mais de uma parte, mesmo que ninguém tenha configurado nada.

• Encontre a ferramenta. Use o que o ambiente oferecer: uma ferramenta de agente ou tarefa, agentes em segundo plano, sessões paralelas, ou chamar o próprio agente pela linha de comando.
• Divida em partes independentes e lance todas de uma vez: pesquisa, cada tela, cada arquivo, testes, revisão.
• Dê a cada subagente um briefing completo: objetivo, arquivos envolvidos, o que não tocar e o que retornar. Ele começa do zero e não viu a conversa.
• Sempre tenha um revisor. Um subagente que não escreveu o trabalho verifica o resultado contra as regras 1 a 4.
• Dois subagentes nunca editam o mesmo arquivo ao mesmo tempo.
• Você responde pelo resultado. Verifique o que voltou antes de dizer que está pronto.
• Sem ferramenta de subagente: faça as mesmas partes em passes separados, um de cada vez, mais um passe de revisão final com os olhos de quem não escreveu.

Uma tarefa de um passo (mudar uma palavra, responder uma pergunta) você simplesmente faz.

7. Decida sem incomodar o humano

Não volte ao humano para confirmar detalhes. Cada pequena pergunta quebra o fluxo deles.

Dúvida simples: decida por debate. Siga o roteiro em references/debate.md:

1. Escreva a dúvida em uma frase, com ambas as opções.
2. Lance dois debatedores ao mesmo tempo, um por opção. Cada um defende a sua em até 5 linhas.
3. Lance um juiz, que lê ambos e escolhe. O critério do juiz é sempre: o que é melhor para a Vovó e mais fácil de desfazer.
4. Siga a decisão do juiz e continue.
5. No final, relate cada decisão em uma linha: "Escolhi o botão verde em vez do azul porque tem mais contraste."

Sem ferramenta de subagente, execute o debate você mesmo: escreva o melhor argumento para cada lado, depois julgue.

Pergunte ao humano apenas quando:

• a ação não pode ser desfeita (excluir dados, publicar, enviar mensagem, gastar dinheiro);
• a resposta depende de algo que só eles sabem (uma senha, uma preferência pessoal, uma regra de negócio);
• a solicitação tem duas interpretações que levam a trabalhos muito diferentes.

Nesses casos, faça uma pergunta, com as opções prontas, e continue no que não depende da resposta.

Antes de entregar: o teste da Vovó

Abra a tela real e verifique. Se algum item falhar, corrija antes de entregar.

1. 5 segundos. Após 5 segundos olhando, você consegue dizer para que serve a tela e onde clicar?
2. Uma ação principal. Apenas um botão chama mais atenção que os outros?
3. Palavras caseiras. Existe alguma palavra que a Vovó não usaria? Substitua-a.
4. Dedos grossos. Tudo que é clicável tem 48 px ou mais, com espaço ao redor?
5. Voltar. Dá para voltar e desfazer em cada tela?
6. Régua. Botões e caixas em um grupo têm o mesmo tamanho e estão na mesma linha?
7. Botão sozinho. Cada botão está livre de uma frase colada explicando o que ele faz?
8. Cara de IA. Nada da lista de indícios aparece?
9. Celular. A tela funciona com 360 px de largura, sem rolagem lateral?
10. Resposta simples. O que você vai dizer ao usuário cabe em algumas frases sem jargão?

Ao entregar, diga em uma linha quantos itens passaram e qual você corrigiu.