aj3x/claude-skills

Design: função primeiro, nada desnecessário

Posicionamento

Bom design é o caminho honesto mais curto entre uma pessoa e o que ela está tentando fazer. Forma e função se complementam e, no melhor trabalho, você não consegue distingui-las. A forma segue a função (Sullivan); menos, mas melhor (Rams).

Regra de precedência: quando forma e função entram em conflito, a função vence. Sempre. A beleza é conquistada pela clareza, proporção e ajuste, nunca comprada com usabilidade, velocidade, acessibilidade ou honestidade. Nada desnecessário, nada frívolo: cada elemento deve justificar sua existência por um trabalho que realiza.

Silêncio não é monotonia. O objetivo é um design que desaparece no uso ("ferramentas neutras" de Rams, "supernormal" de Morrison e Fukasawa, "vazio" da Muji), não um design que se anuncia.

Procedimento de decisão

Execute para cada elemento, recurso, escolha de estilo ou animação:

1. A tarefa de quem isso está servindo? Nomeie o usuário e o objetivo em uma frase. Se não conseguir, pare e descubra.
2. Qual trabalho este elemento realiza? (informar, permitir uma ação, agrupar, orientar, fornecer feedback, construir confiança, auxiliar no reconhecimento). Sem trabalho: exclua-o.
3. Pode ser removido, mesclado ou adiado? Tente removê-lo. Se nada for perdido, ele permanece removido. Se uma coisa for perdida, pergunte se um elemento mais simples poderia carregá-la.
4. Isso prejudica alguma tarefa? Verifique velocidade, clareza, taxa de erro, acessibilidade, carga, atenção. Qualquer dano mensurável à função perde para a função, por mais bonito que pareça.
5. A versão mais simples é honesta e completa? Prefira o padrão convencional, a menos que haja uma razão funcional para se desviar (Lei de Jakob).
6. Então refine a forma: alinhamento, espaçamento, ritmo, hierarquia, consistência. O cuidado nesta etapa é minúcia (Rams #8), não decoração.

Quando duas opções funcionam igualmente, escolha aquela com menos partes, menos estados e menos palavras.

Princípios para a prática

A atribuição está em references.md. Parafraseado, não citado.

Princípio	Na prática
Rams: útil	Corte tudo que não serve à tarefa. Recursos, cores, bordas, ícones, texto.
Rams: compreensível	A interface se explica. Rótulos em vez de ícones misteriosos; estado visível; nenhum manual necessário.
Rams: discreto	O chrome recua, o conteúdo lidera. Paleta base neutra, um acento para a ação principal.
Rams: honesto	Sem urgência falsa, progresso falso, afirmações infladas ou controles que fingem. Carregamento mostra estado real.
Rams: duradouro	Evite tendências passageiras (vidro, gradientes por si só, layouts inovadores). Use tipografia, grade e tokens duráveis.
Rams: minucioso	Casos extremos, estados vazio/erro/carregamento, strings longas e pequenos detalhes fazem parte do design.
Rams: o mínimo de design possível	Reduza ao essencial, depois verifique se o essencial está correto.
Lei de Hick	Menos opções agrupadas. Uma ação primária por visualização; divulgação progressiva para o restante.
Lei de Fitts	Alvos frequentes e primários são grandes e próximos de onde o ponteiro/polegar já está. Alvos de toque mínimos de ~44px (piso CSS de 24px conforme WCAG 2.2).
Lei de Jakob	Use padrões familiares (posicionamento de navegação, comportamento de formulários, ícones). A novidade precisa de um retorno funcional.
Lei de Miller / chunking	Não confie em contar 7 itens; agrupe informações em blocos significativos e mantenha o conjunto de trabalho pequeno.
Carga cognitiva	Mostre apenas o que é necessário agora. Não faça as pessoas lembrarem entre telas; carregue o contexto adiante.
Limiar de Doherty	Responda dentro de ~400ms. Além disso, mostre feedback imediato, esqueletos ou atualizações otimistas; nunca bloqueie silenciosamente.
Lei de Tesler	A complexidade é conservada. Absorva-a no sistema (padrões, inferência, automação), não no usuário, a menos que expô-la seja o objetivo.
Lei de Postel	Aceite entrada variada (espaços, formatos, maiúsculas/minúsculas); emita saída consistente e estrita. Valide gentilmente, explique precisamente.
Gestalt: proximidade, região comum, semelhança, conexão	Agrupe por espaçamento antes de bordas, bordas antes de caixas. Espaçamento é a estrutura mais barata. Função semelhante, aparência semelhante.
Efeito estética-usabilidade	O polimento faz as coisas parecerem mais fáceis e compra tolerância, mas pode mascarar falhas reais de usabilidade. Teste com tarefas reais; nunca o use como motivo para lançar um fluxo defeituoso.
Von Restorff	Torne a única coisa importante diferente. Se tudo for enfatizado, nada é.
Posição serial, pico-fim	Coloque itens-chave primeiro/último em listas e fluxos; torne a etapa final e os momentos de erro atenciosos.
Zeigarnik, gradiente de meta	Mostre progresso em tarefas de várias etapas e salve o trabalho parcial.
Tufte: dados-tinta	Em gráficos e tabelas, cada marca deve carregar dados. Remova enfeites gráficos, linhas de grade pesadas, 3D, legendas redundantes; rotule diretamente.
Norman: affordances, signifiers, feedback	Os controles parecem operáveis; cada ação recebe um reconhecimento visível; mapeie controles para efeitos; torne os erros recuperáveis.
Vignelli / Müller-Brockmann	Uma grade, uma escala tipográfica pequena, poucas famílias tipográficas, espaçamento consistente. A restrição cria coerência.
Munari / Aicher	Resolva o problema com os meios mais simples; sistemas em vez de soluções únicas; reutilize componentes em vez de inventar.
Krug	Não faça as pessoas pensarem. Presuma varredura, não leitura. Óbvio vence esperto.
Wroblewski	Formulários: menos campos, rótulos alinhados ao topo, validação inline, padrões sensatos. Mobile-first força prioridades.
Frost (design atômico)	Construa a partir de pequenas partes reutilizáveis com tokens; a consistência vem do sistema, não da vigilância.
Tognazzini	Torne o estado visível, proteja o trabalho do usuário, mantenha as interações reversíveis, favoreça a manipulação direta, mantenha caminhos de teclado.
Ive / Rams ofício	Resolva detalhes até que o objeto pareça inevitável. Honestidade do material sobre ornamento.

Lista de verificação de revisão

Função

• A tarefa principal é concluível rapidamente, com a ação principal inconfundível.
• Cada elemento tem um trabalho nomeável; nada decorativo permanece.
• Cada elemento interativo tem estados hover/focus/active/disabled/loading/error.
• Casos vazio, erro, offline, lento e de conteúdo longo são projetados.
• As ações são reversíveis ou confirmadas proporcionalmente ao risco.
• O texto é simples, específico e orientado para a ação; erros dizem o que aconteceu e como corrigi-lo.
• Padrões familiares usados, a menos que uma razão funcional diga o contrário.

Forma (somente após a função passar)

• Hierarquia clara: um ponto focal por visualização; teste de apertar os olhos passa.
• Grade, escala de espaçamento e escala tipográfica consistentes; poucas famílias e pesos tipográficos.
• A cor é limitada, proposital e nunca é o único veículo de significado.
• Alinhamento e ritmo são exatos; nada está "quase" alinhado.

Honestidade e longevidade

• Sem padrões escuros, escassez falsa ou affordances enganosas.
• Nada depende de uma tendência passageira.

Anti-padrões

• Decoração: gradientes ornamentais, sombras, ilustrações, ícones ao lado de cada etiqueta, bordas em tudo, fundos que reduzem o contraste.
• Movimento gratuito: animação que atrasa uma tarefa, faz loop por atenção ou parallax. O movimento deve explicar uma mudança (origem, hierarquia, estado) e permanecer abaixo de ~200 a 300ms para feedback de UI. Respeite prefers-reduced-motion.
• Padrões escuros: confirmshaming, custos ocultos, opt-ins pré-selecionados, anúncios disfarçados, cancelamento armadilha, importunação, contagens regressivas falsas, botões assimétricos para aceitar/recusar de igual consequência.
• Carne misteriosa: controles apenas com ícone sem etiquetas ou dicas de ferramentas, ações apenas por gesto sem alternativa visível.
• Despejo de escolhas: configurações e opções no lugar de bons padrões.
• Reinvenção: barras de rolagem personalizadas, controles de formulário não padronizados, navegação personalizada por si só.
• Inflação de ênfase: tudo em negrito, colorido ou com badge.
• Estilo sobre conteúdo: projetar o contêiner antes de o conteúdo existir; aprovações de lorem ipsum.
• Esconder com minimalismo: remover etiquetas, affordances ou estados para parecer limpo. Mínimo significa essencial, não ausente.
• Mostruário primeiro: a foto do portfólio parece boa, os estados vazio e erro estão em branco.

Linhas de base (não negociáveis)

Acessibilidade (WCAG 2.2 AA mínimo)

• Contraste de texto 4.5:1 (3:1 para texto grande e limites/ícones de UI).
• Operação completa por teclado, ordem de foco lógica, indicador de foco visível.
• HTML semântico primeiro; ARIA apenas para preencher lacunas. Rótulos para todas as entradas; texto alternativo para imagens significativas.
• Nunca transmita significado apenas pela cor. Suporte zoom de 200% e redimensionamento de texto sem perda.
• Respeite prefers-reduced-motion e prefers-color-scheme. Nenhum conteúdo piscando mais de 3 vezes por segundo.
• Alvos de pelo menos 24x24 px CSS, almeje 44x44 em toque.

Responsivo

• Projete conteúdo primeiro e mobile-first; o layout se adapta ao conteúdo, com breakpoints definidos onde o conteúdo quebra, não em nomes de dispositivos.
• Sem rolagem horizontal na largura de 320px. Unidades relativas, tipo fluido, min()/clamp().
• Texto do corpo ~16px mínimo, comprimento de linha ~45 a 75 caracteres, altura da linha ~1.4 a 1.6.
• Toque e ponteiro funcionam; hover nunca é o único caminho.

Desempenho como design

• Rápido é um recurso: ativos enxutos, sem layout shift, fontes do sistema ou poucas fontes da web, conteúdo significativo antes do aprimoramento.

Quando a forma pode liderar (exceções restritas)

A forma pode assumir a liderança apenas onde serve à função. Cada uso deve nomear a função:

• Reconhecimento: marca, cor ou assinatura visual consistente que ajuda as pessoas a identificar e confiar em um produto.
• Confiança e credibilidade: polimento profissional onde a falta dele sinaliza risco (pagamentos, saúde, segurança).
• Legibilidade e varredura: escala tipográfica, espaço em branco e contraste escolhidos para tornar a leitura e a localização mais fáceis.
• Ajuste emocional à tarefa: tom combinado ao contexto (calmo para médico, lúdico para aprendizado infantil) quando o humor afeta a conclusão ou o conforto.
• Prazer com um trabalho: um único momento breve e ignorável que confirma o sucesso ou ensina um mecanismo (nunca em caminhos frequentes ou bloqueadores).
• Contextos com direção de arte: editorial, marketing, jogos e portfólios onde a experiência em si é o produto. Mesmo lá, navegação, leitura e caminhos de compra permanecem com foco na função.

Se a exceção não puder ser declarada como "isso ajuda o usuário a fazer X", não é uma exceção.

Método de trabalho

1. Escreva o usuário, a tarefa e as restrições em 2 a 3 frases.
2. Conteúdo e estrutura primeiro (hierarquia da informação, fluxo), visuais por último.
3. Use conteúdo real, volumes de dados reais e casos extremos reais.
4. Comece com a solução convencional mais simples; adicione apenas o que um teste ou uma necessidade declarada justificar.
5. Revise com a lista de verificação; exclua antes de adicionar.
6. Ao relatar uma decisão de design, declare a função que ela serve e diga explicitamente se uma opção agradável foi rejeitada porque prejudicava a função.