🎨 cs-frontend-engineer — Frontend Engineer Review

Auditoria técnica e estratégica pela ótica cs-frontend-engineer — Frontend Engineer Review. Achados classificados por severidade, plano de ação e matriz de decisão.

Veredito: PWA configurado, design system shadcn/ui e lazy loading corretos, mas sem CSP, sem métricas reais de LCP e user-scalable=no quebra acessibilidade.

O frontend tem boas práticas de bundle splitting (26 lazy routes), PWA com workbox (vite.config.ts:16-51), OG tags completas e structured data JSON-LD. Problemas críticos: meta viewport com user-scalable=no (viola WCAG 1.4.4), sem Content-Security-Policy (detectado em produção), sem métricas de Core Web Vitals instrumentadas.

PWA

Service Worker via VitePWA

Rotas lazy-loaded

AUSENTE

Content-Security-Policy

VIOLA

WCAG 1.4.4 (user-scalable=no)

Instrumentação CWV

Dimensões Analisadas

Pontuação por área de análise.

Performance & Bundle

Lazy loading em todas as rotas. Geist font via @fontsource-variable. Sem análise de bundle size automatizada.

1 achados

Acessibilidade

user-scalable=no no viewport viola WCAG. Sem auditoria de contraste ou ARIA documentada.

2 achados

Segurança Frontend

CSP ausente em produção. Sem Permissions-Policy. XSS-Protection desabilitado (OK no Chrome moderno).

2 achados

SEO & Meta

OG tags completas, Twitter cards, 3 JSON-LD schemas (SoftwareApp, Organization, WebSite), canonical correto.

1 achados

🔎 Achados (5)

0 crítico(s) · 2 alto(s) · 0 bloqueante(s). Clique para expandir.

user-scalable=no — violação WCAG 1.4.4 (Reflow)AltaEsforço baixoWCAG 2.1 / Accessibility

O que é: index.html:5: 'maximum-scale=1.0, user-scalable=no'. Impede que usuários com baixa visão façam zoom no browser. Viola WCAG 1.4.4 e pode causar rejeição em auditorias de acessibilidade.

Onde: index.html:5

Impacto: Usuários com deficiência visual não conseguem usar o app. Possível barreira legal em contexto de saúde (CFM recomenda acessibilidade).

✅ Correção: Remover 'user-scalable=no' e 'maximum-scale=1.0'. O PWA pode usar 'viewport-fit=cover' se necessário para notch.

Content-Security-Policy ausente — XSS sem defesa de headersAltaEsforço medioOWASP A05 / Security Misconfiguration

O que é: Headers HTTP de produção não incluem Content-Security-Policy nem Permissions-Policy. O servidor usa helmet.js (server.ts:5-import) mas os headers da landing estática (Vercel Edge) não passam pelo Express.

Onde: vercel.json (ausência de headers config) + headers HTTP produção

Impacto: XSS sem barreira de headers. Scripts injetados podem exfiltrar dados de prontuário.

✅ Correção: Adicionar em vercel.json: {"headers": [{"source": "/(.*)", "headers": [{"key": "Content-Security-Policy", "value": "default-src 'self'; script-src 'self' 'unsafe-inline' https://apis.google.com; ..."}]}]}

og:image aponta para pwa-512.png — não é imagem de Open Graph idealMédiaEsforço baixoSocial Media Optimization

O que é: index.html:26: og:image é 'pwa-512.png' (512x512px quadrado). O ideal para Open Graph é 1200x630px landscape. Facebook/LinkedIn exibem a imagem recortada ou com barras.

Onde: index.html:26-28

Impacto: Preview de link no WhatsApp/LinkedIn com imagem mal enquadrada. Reduz CTR em compartilhamentos.

✅ Correção: Criar public/og-image.jpg 1200x630px com logo + slogan. Atualizar og:image e og:image:width/height.

Sem instrumentação de Core Web VitalsMédiaEsforço baixoWeb Vitals / Performance Budget

O que é: src/main.tsx não inicializa nenhuma biblioteca de CWV (web-vitals, Vercel Analytics, etc.). LCP, FID/INP e CLS são desconhecidos.

Onde: src/main.tsx

Impacto: Impossível saber se o LCP está dentro do target de 2.5s. Ranking SEO pode ser prejudicado por CWV ruins.

✅ Correção: Adicionar 'vercel-analytics' (0 config no Vercel) ou 'web-vitals' + envio para GA4 custom event.

PWA manifest sem screenshots — instalação sem previewBaixaEsforço baixoPWA Best Practices

O que é: vite.config.ts:24-51 define o manifest do PWA sem campo 'screenshots'. Chrome mostra preview da app antes de instalar se screenshots estiverem definidas — melhora conversão de instalação.

Onde: vite.config.ts:24-51

Impacto: Menor taxa de instalação PWA. Oportunidade perdida de engajamento mobile.

✅ Correção: Adicionar screenshots ao manifest: [{src: 'screenshot-mobile.png', sizes: '390x844', type: 'image/png', form_factor: 'narrow'}]

📋 Plano de Ação

Cronograma de implementação recomendado.

Remover user-scalable=no (30min)

index.html:5 — remover maximum-scale e user-scalable. Testar no iOS/Android.

a11y
30min · CRÍTICO

CSP no vercel.json (2h)

Adicionar Content-Security-Policy e Permissions-Policy nos headers Vercel

seguranca
2h · CRÍTICO

OG image 1200x630 (1h)

Criar imagem de Open Graph correta e atualizar meta tags

seo
1h

Vercel Analytics (15min)

npm install @vercel/analytics + inicializar em main.tsx

performance
15min

Matriz de Decisão

Critério	Fonte	Status	Bloqueante
Acessibilidade WCAG	cs-frontend-engineer	user-scalable=no viola 1.4.4	não
CSP / Segurança Headers	cs-frontend-engineer	CSP ausente na landing	não
PWA Setup	cs-frontend-engineer	VitePWA + workbox corretos	não
SEO Meta Tags	cs-frontend-engineer	OG + JSON-LD presentes	não
Core Web Vitals	cs-frontend-engineer	Sem instrumentação	não