# Prelaunch Frontend > Checklist técnico de pré-lançamento para Frontend. Use ao preparar releases de aplicações web, SPAs, sites estáticos ou qualquer interface voltada ao usuário final. Cobre layout, SEO, performance, acessibilidade, resiliência e formulários. - Skill: `paulohfs/prelaunch-frontend` (Agent Skill) - Install (CLI): `npx skillmds@latest add paulohfs/prelaunch-frontend` - Raw SKILL.md: https://api.skillmd.com/api/skills/paulohfs/prelaunch-frontend/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: PauloHFS (https://skillmd.com/u/paulohfs) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/paulohfs/prelaunch-frontend --- # Checklist Técnico de Pré-Lançamento — Frontend Checklist de referência para validação antes de qualquer deploy de frontend para produção. Antes de considerar o lançamento aprovado, verifique cada item aplicável ao projeto. Item não verificado = corrigir ou documentar explicitamente por que não se aplica ao contexto. ## 1. Layout, Responsividade e Cross-Browser ### Responsividade Fluid-Grid - [ ] Testar breakpoints: 320px, 375px, 425px, 768px, 1024px, 1440px+ - [ ] Garantir ausência de scroll horizontal indesejado (`overflow-x: hidden`) - [ ] Áreas de toque em mobile ≥ 48×48px por elemento interativo ### Compatibilidade entre Motores de Renderização - [ ] Validar execução em Blink (Chrome/Edge), Gecko (Firefox) e WebKit (Safari Desktop/iOS) - [ ] Verificar prefixos de propriedades CSS legadas e polyfills quando aplicável ## 2. SEO On-Page e Metadados ### Tags Críticas no `` - [ ] `` único por rota com no máximo 60 caracteres - [ ] `<meta name="description">` única por rota (120–160 caracteres) - [ ] `<link rel="canonical" href="...">` apontando para a URL preferencial - [ ] `<meta name="viewport" content="width=device-width, initial-scale=1.0">` ### Social Graph Tags - [ ] Open Graph: `og:title`, `og:description`, `og:image`, `og:url`, `og:type` - [ ] Twitter Cards: `twitter:card`, `twitter:title`, `twitter:description`, `twitter:image` - [ ] Imagem OG dimensionada em 1200×630px servida via HTTPS ### Hierarquia Semântica - [ ] Apenas uma tag `<h1>` por página - [ ] Estrutura correta de cabeçalhos (`<h2>`, `<h3>`) sem saltos de nível - [ ] Uso de elementos HTML5 semânticos (`<main>`, `<nav>`, `<article>`, `<aside>`, `<footer>`) ## 3. Desempenho e Assets ### Otimização de Imagens - [ ] Uso de formatos modernos (WebP/AVIF) - [ ] Carregamento diferido (`loading="lazy"`) para elementos fora do viewport - [ ] Atributos `width` e `height` explícitos em tags `<img>` para evitar CLS ### Métricas Core Web Vitals - [ ] Largest Contentful Paint (LCP) < 2.5s - [ ] Interaction to Next Paint (INP) < 200ms - [ ] Cumulative Layout Shift (CLS) < 0.1 ### Minificação e Bundling - [ ] Remoção de `console.log`, `debugger` e comentários no build de produção - [ ] Minificação de CSS, JS e HTML - [ ] Estratégia de Code Splitting para carregamento sob demanda de rotas secundárias ### Favicons e PWA Assets - [ ] `favicon.ico`, PNGs (16×16, 32×32) e `apple-touch-icon.png` (180×180) - [ ] Ficheiro `site.webmanifest` validado ## 4. Acessibilidade (a11y — WCAG 2.1 AA) ### Contraste de Cores - [ ] Rácio mínimo 4.5:1 para texto normal, 3:1 para texto grande/elementos de UI ### Atributos ARIA e Alt Text - [ ] `alt` preenchido em imagens informativas (`alt=""` em decorativas) - [ ] `aria-expanded`, `aria-label` e `role` em componentes dinâmicos customizados ### Navegação por Teclado - [ ] Indicador de foco visível (`:focus-visible`) - [ ] Suporte a `Tab`, `Enter` e `Escape` em modais e menus suspensos ## 5. Resiliência, Rastreamento e Formulários ### Validação de Formulários Client-Side - [ ] Feedback visual imediato e acessível para erros de validação - [ ] Proteção contra duplo clique (double submit) no envio - [ ] Links diretos para APIs externas (ex: WhatsApp via `https://wa.me/...`) testados e com `urlencode` ### Tratamento de Rotas Inexistentes - [ ] Página 404 personalizada com atalho de retorno ao fluxo principal ### Analytics, Rastreamento e Consentimento - [ ] Injeção correta de tags de análise (Google Analytics / Tag Manager) - [ ] Banner de consentimento de cookies (LGPD/GDPR) bloqueando scripts até a autorização