clawic/skills

Regras de Desenvolvimento de Websites

Desempenho

• Imagens são a causa #1 de sites lentos — use WebP/AVIF, carregamento preguiçoso (lazy-load) para conteúdo abaixo da dobra e defina largura/altura explícitas para evitar deslocamento de layout
• CSS que bloqueia a renderização atrasa a primeira pintura — inclua CSS crítico inline no <head> e adie o restante
• Scripts de terceiros (analytics, widgets de chat) geralmente adicionam 500ms+ — carregue-os com async ou defer e audite regularmente
• Fontes causam flash de texto invisível (FOIT) — use font-display: swap e pré-carregue fontes críticas
• Meça com Lighthouse no modo anônimo — extensões distorcem os resultados

Mobile First

• Comece o CSS com estilos mobile e adicione complexidade com media queries min-width — é mais fácil escalar para cima do que reduzir
• Alvos de toque precisam de no mínimo 44x44px — dedos são imprecisos, botões pequenos frustram os usuários
• Teste em dispositivos reais, não apenas no DevTools do navegador — a simulação de limitação perde o jank do mundo real
• Rolagem horizontal é um erro crítico — teste cada página com largura mínima de 320px
• A meta tag viewport é obrigatória: <meta name="viewport" content="width=device-width, initial-scale=1">

Acessibilidade

• Cada <img> precisa de texto alt — alt="" para imagens decorativas, texto descritivo para imagens significativas
• Taxa de contraste de cor mínima de 4,5:1 para texto do corpo — use o verificador de contraste WebAIM
• Campos de formulário devem ter elementos <label> associados — placeholders sozinhos não são acessíveis
• A navegação por teclado deve funcionar — teste cada elemento interativo com a tecla Tab
• Leitores de tela anunciam a hierarquia de títulos — use H1-H6 em ordem lógica, nunca pule níveis

Estrutura HTML

• Apenas um <h1> por página — é o título da página, não uma ferramenta de estilo
• Use elementos semânticos: <nav>, <main>, <article>, <aside>, <footer> — eles comunicam estrutura para navegadores e tecnologia assistiva
• <button> para ações, <a> para navegação — não use divs com manipuladores de clique
• Links externos devem ter rel="noopener" — previne vulnerabilidade de segurança com target="_blank"
• Valide o HTML — marcação quebrada causa renderização imprevisível entre navegadores

Padrões CSS

• Evite !important — quebra a cascata e torna a depuração dolorosa. Corrija a especificidade
• Use unidades relativas (rem, em, %) em vez de px fixo para texto — respeita as preferências de tamanho de fonte do usuário
• Propriedades personalizadas CSS (variáveis) reduzem repetição — defina cores e espaçamento uma vez, use em todos os lugares
• Flexbox para layouts 1D, Grid para 2D — não force um a fazer o trabalho do outro
• Teste sem o CSS carregado — o conteúdo ainda deve ser legível em HTML puro

Erros Comuns

• Favicon ausente causa spam 404 nos logs do servidor — sempre inclua um, mesmo que seja um PNG simples
• Não definir <html lang="pt"> quebra a pronúncia do leitor de tela
• Links com http:// hardcoded quebram em sites HTTPS — use // relativo ao protocolo ou sempre https://
• Assumir que JavaScript está disponível — o conteúdo principal deve funcionar sem JS (aprimoramento progressivo)
• Esquecer estilos de impressão — adicione @media print para páginas que os usuários possam imprimir (recibos, artigos)

Antes do Lançamento

• Teste se todos os formulários realmente enviam — formulários de contato quebrados perdem leads silenciosamente
• Verifique se a página 404 existe e é útil — a página 404 padrão do servidor parece pouco profissional
• Verifique as prévias de compartilhamento social com tags Open Graph — teste nos depuradores do Facebook/Twitter
• Envie o sitemap para o Google Search Console — acelera a indexação
• Configure monitoramento de tempo de atividade — saiba quando seu site cair antes que os usuários digam