deixar-interfaces-mais-polidas

Deixar Interfaces Mais Polidas

Use este skill para os pequenos detalhes de design-engenharia que se acumulam em uma interface mais refinada.

Fonte: resgatado do PR #1659 da comunidade por linus707.

Quando Usar

• O usuário diz que a interface parece estranha, plana, genérica, apertada, instável ou inacabada.
• Você está construindo controles, cards, listas, dashboards, navegação, formulários ou barras de ferramentas.
• Um componente precisa de estados de hover, ativo, foco, entrada, saída, carregamento ou vazio.
• Uma revisão de front-end precisa de recomendações específicas de antes/depois.

Princípios Centrais

Raio Concêntrico

Para superfícies arredondadas aninhadas próximas:

raio externo = raio interno + padding

Se o padding for grande, trate as camadas como superfícies separadas em vez de forçar a matemática. O objetivo é coerência óptica, não adoração de fórmula.

Alinhamento Óptico

O centro geométrico nem sempre é o centro visual. Botões de ícone, triângulos de reprodução, setas, estrelas e ícones assimétricos geralmente precisam de um pequeno ajuste. Corrija o SVG quando possível; caso contrário, ajuste com uma margem ou padding no nível de pixel.

Sombras e Bordas

Use bordas para separação e anéis de foco. Use sombras em camadas quando um card, botão, dropdown ou popover precisar de profundidade. As sombras devem ser sutis e transparentes o suficiente para funcionar em diferentes fundos.

Quebra de Texto

• Use text-wrap: balance em títulos e textos curtos.
• Use text-wrap: pretty em textos de corpo de curto a médio, legendas, descrições e itens de lista.
• Evite ambos em textos longos, código e conteúdo pré-formatado.
• Use font-variant-numeric: tabular-nums para contadores, temporizadores, preços, tabelas e outros números que atualizam.

Suavização de Fonte

No macOS, aplique suavização de fonte antialiased no layout raiz quando o projeto ainda não o fizer:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Contornos de Imagem

Imagens geralmente precisam de um contorno interno sutil para que suas bordas não se misturem com a superfície.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Use contornos alfa neutros (preto ou branco). Não tingir contornos de imagem com a paleta da marca.

Animação (Motion)

Use transições CSS para mudanças de estado interativas, pois elas podem redirecionar quando o usuário muda de intenção no meio do movimento. Reserve keyframes para entradas únicas encenadas ou sequências de carregamento.

Padrões de animação recomendados:

• Entrada: combine opacidade, um pequeno translateY e, opcionalmente, desfoque.
• Saída: mais curta e silenciosa que a entrada, geralmente 150ms.
• Pressionar: scale(0.96) para botões táteis, com uma forma de desabilitar quando o movimento distrai.
• Troca de ícones: cross-fade com opacidade, escala e desfoque, em vez de alternar visibilidade instantaneamente.

Escopo da Transição

Nunca use transition: all. Especifique as propriedades alteradas:

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Use will-change apenas para gagueira no primeiro quadro em propriedades amigáveis ao compositor, como transform, opacity e filter. Nunca use will-change: all.

Áreas de Toque

Controles interativos devem ter pelo menos uma área de toque de 40x40px, idealmente 44x44px quando o layout permitir. Expanda com um pseudo-elemento quando o ícone visível for menor, mas não deixe que áreas de toque expandidas se sobreponham.

Saída da Revisão

Ao revisar uma rodada de polimento de interface, relate mudanças concretas em linhas de antes/depois:

Princípio	Antes	Depois
Raio concêntrico	Mesmo raio no pai e no filho	Raio do pai considera o padding
Números tabulares	Contador se move conforme os dígitos mudam	Contador usa tabular-nums
Escopo da transição	transition: all	Propriedades de transição explícitas

Inclua caminhos de arquivo e propriedades quando não forem óbvios a partir dos trechos. Omita princípios que você verificou, mas não alterou.

Checklist

• Elementos arredondados aninhados estão opticamente coerentes.
• Ícones estão centralizados visualmente.
• Botões, cards e popovers usam bordas ou sombras pelo motivo certo.
• Títulos e textos curtos evitam quebra estranha.
• Números dinâmicos usam numerais tabulares.
• Imagens têm contornos neutros onde necessário.
• Animações de entrada e saída são separadas, sutis e interrompíveis quando apropriado.
• Botões têm estados ativos táteis sem movimento exagerado.
• transition: all e will-change: all estão ausentes.
• Controles pequenos ainda têm áreas de toque utilizáveis.