Brain· Mukutu

QA Mobile

Recurso Em desenvolvimento

QA Mobile / Mobile Responsiveness Audit

Skill de agente que audita a responsividade mobile de um site. Fonte canônica: mukutu-mono/skills/qa-mobile/SKILL.md (padrão agentskills.io). Irmã da qa-figma-webflow — lá o eixo é fidelidade ao Figma; aqui é o comportamento em telas estreitas. Fonte: mukutu-mono.

O que faz / What it does

Renderiza cada página num viewport de celular real (iPhone SE 375×667, Android 360×800), compara com o desktop, e gera um relatório .md de ajustes categorizados por severidade (🔴 Alta / 🟡 Média / 🟢 Baixa), no mesmo formato acionável da qa-figma-webflow (issue por página + issues globais consolidadas uma vez).

Princípio inegociável: validação mobile só vale renderizando mobile. HTML estático (WebFetch) é cego para overflow, quebra de layout e seções ocultas por CSS — nunca substitui a renderização.

Engine de captura (3 níveis) / Capture engine

  1. chrome-devtools-mcp — emulação de dispositivo real (viewport + DPR + touch + UA). Preferido.
  2. claude-in-chrome + resize — janela em 375/360px; media queries disparam o CSS mobile.
  3. Fallback humano — Chrome em modo dispositivo (device toolbar), usuário envia prints.

Smoke-test no início trava o nível que funciona; desce de nível em vez de insistir.

Os 3 eixos / The 3 axes

  • Responsividade dos elementos: overflow horizontal, tabelas/larguras fixas que estouram, alvos de toque < 44×44px, overlay fixo cobrindo o conteúdo.
  • Paridade desktop → mobile: seções presentes no desktop e ausentes/ocultas no mobile, navegação (hambúrguer, links de header/footer).
  • Legibilidade: fonte de corpo < 14px, texto/botão cortado, imagens distorcidas.

Reaproveita invariantes do pool de QA da Julia: #10 starlight-table-mobile-overflow e #25 kanban-behind-fixed-modal.

Relacionado / Related

Fontes / Sources

  • mukutu-mono/skills/qa-mobile/ — SKILL.md + references/{metodologia,detection-snippets,report-templates}.md, criada 2026-07-03.