Name: larsderidder/theredbeard-pi-agent
Author: Community

Regras de Desenvolvimento de Websites

Performance

Imagens são a causa nº 1 de sites lentos — use WebP/AVIF, carregamento preguiçoso (lazy-load) abaixo da dobra e defina largura/altura explícitas para evitar mudança de layout
CSS que bloqueia a renderização atrasa a primeira pintura — coloque CSS crítico inline no <head>, adie o restante
Scripts de terceiros (analytics, widgets de chat) frequentemente adicionam 500ms+ — carregue-os com async ou defer, 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 resultados

Comece o CSS com estilos mobile, adicione complexidade com media queries min-width — é mais fácil escalar para cima do que cortar
Alvos de toque precisam de mínimo 44x44px — dedos são imprecisos, botões pequenos frustram usuários
Teste em dispositivos reais, não apenas no DevTools do navegador — a simulação de throttling perde o jank do mundo real
Rolagem horizontal é um bug 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">

Cada <img> precisa de texto alt — alt="" vazio para imagens decorativas, texto descritivo para as significativas
Taxa de contraste de cores mínima de 4.5:1 para texto do corpo — use o verificador de contraste WebAIM
Entradas de formulário devem ter elementos <label> associados — apenas placeholders 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 cabeçalhos — use H1-H6 em ordem lógica, nunca pule níveis

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

Evite !important — quebra a cascata e dificulta a depuração. 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çamentos 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

Favicon ausente causa spam de 404 nos logs do servidor — sempre inclua um, mesmo um PNG simples
Não definir <html lang="pt"> quebra a pronúncia do leitor de tela
Links http:// fixos quebram em sites HTTPS — use // relativo ao protocolo ou sempre https://
Presumir 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 podem imprimir (recibos, artigos)

URLs canônicas devem corresponder à URL real que o servidor serve — uma incompatibilidade (ex.: barra final vs sem barra final) confunde o Google e pode impedir a indexação
Cada página de conteúdo precisa de pelo menos um link interno apontando para ela — páginas apenas em um sitemap, mas sem páginas de referência, são despriorizadas pelo rastreador do Google
Filtros de conteúdo em templates podem excluir silenciosamente páginas da navegação — verifique se todas as páginas são acessíveis seguindo links a partir da página inicial, não apenas verificando o sitemap
"Descoberto - atualmente não indexado" no Search Console geralmente significa falta de links internos, não um bloqueio técnico — corrija a vinculação primeiro antes de solicitar indexação

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 amadora
Verifique as pré-visualizações 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 uptime — saiba quando seu site ficar offline antes que os usuários avisem