Fidelidade ao DOM Móvel

O que Fidelidade ao DOM Móvel faz?

Use este skill antes de escrever a composição. A fonte da verdade é o site real em um viewport móvel, não uma captura de tela estática.

Fluxo de Trabalho

1. Abra a URL em um navegador com viewport móvel.
2. Defina um ponto de quebra de referência, geralmente 390x844, 393x852, 414x896 ou próximo.
3. Inspecione as seções do DOM que aparecerão no vídeo.
4. Extraia texto, href, src, alt, classes principais, papéis e estados interativos.
5. Mapeie as coordenadas de clique somente após confirmar que o componente está visível.
6. Liste os estados relevantes: antes do clique, após o clique, após a rolagem, carrinho, checkout ou confirmação.

MCP DevTools / Console

Quando o MCP DevTools estiver disponível, use-o para consultar o DOM real através do console. Exemplos de dados a extrair:

const el = document.querySelector("SECTION_SELECTOR");
const rect = el.getBoundingClientRect();
({
  text: el.innerText,
  rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
  classes: el.className,
  images: [...el.querySelectorAll("img")].map((img) => ({
    src: img.currentSrc || img.src,
    alt: img.alt,
    width: img.naturalWidth,
    height: img.naturalHeight,
  })),
  links: [...el.querySelectorAll("a")].map((a) => ({
    text: a.innerText,
    href: a.href,
    classes: a.className,
  })),
});

Para validar um clique:

const target = document.querySelector("TARGET_SELECTOR");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });

Use esses valores para definir o tempo e a posição do cursor na composição.

O que Capturar

• Nomes exatos dos produtos.
• Benefícios exatamente como aparecem.
• Preços e condições.
• Botões e CTAs.
• Imagens principais.
• Cartões do carrossel.
• Seletores estáveis para validação de cliques.

Regras

• Não invente textos se o DOM fornecer o conteúdo.
• Não clique em componentes antes que eles apareçam na linha do tempo.
• Não use capturas de tela como única fonte de estrutura.
• Não publique instantâneos, cookies, logs ou arquivos de inspeção.
• Se o site usar carregamento preguiçoso, aguarde as imagens carregarem antes de extrair src.

Entrega Esperada

Produza um mapa curto:

Cena: Carrossel de produtos
Seletor: .rf-cards-scroller-platter
Visível em: 2.0s
Ação: rolagem horizontal
Alvo do clique: link do cartão, centro x/y após o cartão retornar ao centro
Texto necessário: ...
Imagens necessárias: ...

Use este mapa para orientar a composição do HyperFrames.

Critérios de Fidelidade

Considere a seção fiel somente quando:

• o texto corresponde ao DOM original;
• as imagens são as mesmas ou equivalentes permitidos;
• o espaçamento segue a hierarquia móvel;
• cartões, botões e rótulos usam a mesma ordem visual;
• o clique ocorre dentro da caixa delimitadora do componente real;
• o componente é renderizado antes da ação do cursor.