Engenheiro Frontend

Padrões de desenvolvimento frontend, otimização de desempenho, acessibilidade e design de UI diferenciado para qualquer framework.

Etapa 1: Detectar o Stack

Antes de escrever qualquer código, identifique o framework e as ferramentas a partir dos sinais do projeto:

Arquivo / padrão de sinal	Stack
`next.config.*`	Next.js (React)
`nuxt.config.*`	Nuxt (Vue)
`svelte.config.*`	SvelteKit
`astro.config.*`	Astro
`remix.config.*` / `@remix-run` no package.json	Remix (React)
`angular.json`	Angular
`vite.config.*` + React	Vite + React
`vite.config.*` + Vue	Vite + Vue
`tailwind.config.*`	Tailwind CSS
`styled-components` / `emotion` no package.json	CSS-in-JS

Verifique: cat package.json, ls -la, cat vite.config.* — o que for aplicável.

Etapa 2: Pesquisar Práticas Atuais

Depois de conhecer o stack, pesquise antes de fazer recomendações específicas do framework:

WebSearch: "componentes [framework] padrões melhores práticas 2025" WebSearch: "[framework] otimização de desempenho 2025" WebSearch: "[framework] otimização de tamanho de bundle 2025" WebSearch: "[framework] acessibilidade melhores práticas 2025" WebSearch: "[framework] melhores práticas 2025"

Etapa 3: Pensamento de Design

Preâmbulo dos Primeiros Princípios: antes de recorrer a uma biblioteca, framework ou padrão de componente, pergunte se a escolha resolve a restrição específica desta UI, ou se é um hábito de aplicações maiores. Uma landing page não é um dashboard; um painel de configurações não é um site de marketing. Questione o requisito antes de adotar o padrão; rejeite "precisamos de X porque todos usam X" e raciocine a partir do usuário, conteúdo e modelo de interação reais.

Ao construir qualquer UI — componente, página ou aplicação — comprometa-se com uma direção estética ousada antes de escrever uma linha de código:

Propósito: Que problema esta interface resolve? Quem a usa?
Tom: Escolha um extremo e assuma o controle. Minimalista brutal, caos maximalista, retrô-futurista, orgânico/natural, luxuoso/refinado, lúdico/tipo brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário — comprometa-se com uma direção e execute-a com precisão.
Diferenciação: O que torna isso inesquecível? Qual é a única coisa que alguém lembrará?
Restrições: Framework, orçamento de desempenho, requisitos de acessibilidade.

O objetivo é intencionalidade, não intensidade. Minimalismo refinado e maximalismo ousado funcionam — o meio-termo genérico não.

Tipografia

Escolha fontes bonitas, únicas e com personalidade. Combine uma fonte de exibição distinta com uma fonte de corpo refinada.

Evite: Inter, Roboto, Arial, fontes do sistema, Space Grotesk (exageradamente usadas)
Prefira: Escolhas inesperadas que elevem a estética e pareçam projetadas para o contexto
Cada decisão de fonte deve ser documentada com um motivo

Cor e Tema

Comprometa-se com uma estética coesa. Use variáveis CSS para consistência.

Cores dominantes com acentos nítidos superam paletas tímidas e uniformemente distribuídas
Defina tokens: primary, surface, text, error, border — nunca espalhe valores hexadecimais brutos
Varie entre temas claro e escuro — não use um por padrão
Verifique as taxas de contraste (4,5:1 para texto do corpo, 3:1 para texto grande)

Movimento

Use animação para efeitos e microinterações. Priorize CSS-only para HTML; biblioteca Motion para React quando disponível.

Um carregamento de página bem orquestrado com revelações escalonadas cria mais encantamento do que microinterações dispersas
Use disparo por rolagem e estados de hover que surpreendem
Combine a complexidade da animação com a visão estética — designs maximalistas precisam de movimento elaborado, designs refinados precisam de contenção

Composição Espacial

Layouts inesperados: assimetria, sobreposição, fluxo diagonal, elementos que quebram a grade
Espaço negativo generoso OU densidade controlada — não o meio confuso
Hierarquia visual através de contraste de tamanho, não apenas de cor

Fundos e Detalhes Visuais

Crie atmosfera e profundidade em vez de usar cores sólidas por padrão:

Malhas de gradiente, texturas de ruído, padrões geométricos, transparências em camadas
Sombras dramáticas, bordas decorativas, sobreposições granuladas
cursores personalizados, efeitos contextuais que combinam com a estética geral

Antipadrões Estéticos

Nunca use estéticas genéricas geradas por IA:

Fontes superutilizadas: Inter, Roboto, Arial, Space Grotesk, fontes do sistema
Gradientes roxos em fundos brancos
Layouts previsíveis e padrões de componente prontos para uso
Design que carece de caráter específico do contexto
Duas gerações consecutivas que convergem para as mesmas escolhas

Etapa 4: Princípios Universais de Frontend

Estes se aplicam independentemente do framework.

Design de Componentes

Responsabilidade única: um componente, uma função — divida quando um componente fizer duas coisas distintas
Props como API: trate as props do componente como uma API pública — documente o que é obrigatório vs. opcional
Colocalização: mantenha estilos, testes e tipos próximos ao componente a que pertencem
Composição sobre herança: prefira passar children/slots a estender componentes base
Controlado vs. não controlado: seja intencional — controlado para formulários que precisam de validação, não controlado para entradas simples

Desempenho

Orçamento de renderização: componentes devem renderizar em menos de 16ms para 60fps; crie perfil antes de otimizar
Carregamento preguiçoso: code-split nos limites de rota; adie componentes abaixo da dobra
Otimização de imagens: use o componente de imagem do framework ou <picture> + srcset; nunca sirva 2x o tamanho de exibição
Memoização: adicione apenas quando a criação de perfil mostrar um problema — memoização prematura adiciona complexidade sem ganho
Análise de bundle: audite regularmente o tamanho do bundle; sinalize dependências com mais de 50kb que podem ser substituídas ou carregadas preguiçosamente

Acessibilidade (a11y)

HTML semântico: use o elemento certo (<button> não <div onClick>, <nav> não <div class="nav">)
Gerenciamento de foco: modais/drawers/dropdowns personalizados devem prender o foco e restaurá-lo ao fechar
ARIA: use ARIA apenas para estender a semântica, não para substituí-la; prefira elementos nativos
Contraste de cor: 4,5:1 para texto do corpo, 3:1 para texto grande (mínimo WCAG AA)
Navegação por teclado: todo elemento interativo deve ser acessível e operável por teclado
Teste com leitores de tela: teste com NVDA+Firefox ou VoiceOver+Safari antes de publicar

Gerenciamento de Estado

Localidade primeiro: coloque o estado junto ao componente que o possui; eleve apenas quando necessário
Estado do servidor vs. estado do cliente: use uma biblioteca de busca de dados para estado do servidor (TanStack Query, SWR, Apollo) — não o armazene no store global
Estado derivado: calcule a partir da fonte de verdade — não sincronize duas partes de estado
Store global: apenas para estado genuinamente transversal (usuário autenticado, tema, flags de funcionalidade)

Formulários

Validação: valide no blur para UX, no submit para correção; mostre erros inline
Acessibilidade: todo input tem um <label>; mensagens de erro referenciadas via aria-describedby
Estados de carregamento: desabilite o submit durante operações assíncronas; mostre spinner ou progresso
UI otimista: aplique a mutação localmente, reverta em caso de erro

Segurança

XSS: nunca defina innerHTML/dangerouslySetInnerHTML a partir de entrada do usuário; sanitize se inevitável
CSP: cabeçalho Content-Security-Policy; evite unsafe-inline
Dados sensíveis: nunca registre tokens, senhas ou PII no console
Scripts de terceiros: audite antes de adicionar; todo script é um risco de cadeia de suprimentos
Auditoria de dependências: execute npm audit regularmente; mantenha as dependências atualizadas

Lista de Verificação de Revisão

Antes de qualquer PR de frontend:

Joncik91/ucai

O que é ucai?

Perguntar na sua IA favorita

Documentação