Prompt-contêiner para pedir uma cena da máquina ao agente (curso Frontends com Vibecoding, 25/09/2026)
=====================================================================================================

Regra da casa: o pedido reúne, na mesma mensagem e nesta ordem, assunto, arquivo de sistema,
restrições pelo nome, componentes, cenário fixo, dado com fonte e crítica com print. Nada de
"faça uma animação legal": o agente converge para a média da web quando falta direção.

--------------------------------------------------------------------------------------
BLOCO 1: o pedido
--------------------------------------------------------------------------------------
Assunto: construa a cena "<nome da cena>" para a página <URL ou rota>, como componente
React de cliente, dentro do bloco de laboratório que já existe no repositório.

Leia antes de escrever: DESIGN.md (tokens de cor e tipografia), docs/FRONTEND_PLAYBOOK.md
(seção 4, animação à prova de falha; seção 11, bibliotecas homologadas) e a ficha de cena
anexa (ficha-de-cena-da-maquina.txt, bloco "<nome da cena>").

Restrições pelo nome:
- cor só por token do tema (var(--text), var(--bg-white), var(--course-accent)); nada de hex fixo no CSS
- estado base visível no HTML do servidor; nada depende de JavaScript para aparecer
- prefers-reduced-motion: reduce desliga todo movimento automático e mantém um botão de avançar
- alvo de toque de 44 px, foco visível, uma única região role="status"
- sem rede a terceiro, sem CDN, dado de demonstração dentro do módulo
- biblioteca: <a do campo biblioteca da ficha>; nenhuma outra sem justificativa escrita

Componentes: use o invólucro CourseLiveLab (id do laboratório, título, resumo e texto de
reserva) e exporte `meta` com biblioteca, pacote, versão, docsUrl, trecho de 10 a 25 linhas
e três pontos em "observar".

Cenário fixo: <descreva o roteiro quadro a quadro da ficha, com os números e o rótulo
"cenário ilustrativo" onde não houver fonte>.

Dado com fonte: <valor, fonte, data e URL do campo dado_real; o rótulo "medido" ou
"anunciado" aparece na tela ao lado do número>.

Entrega: código, um parágrafo dizendo o que ficou de fora e por quê, e um print da cena nos
dois temas em 390 px e em 1280 px de largura.

--------------------------------------------------------------------------------------
BLOCO 2: a crítica com print (segunda passada, sempre)
--------------------------------------------------------------------------------------
Abra a cena que você entregou, nos dois temas, com o script desligado e com movimento reduzido
ativo. Para cada estado, anexe um print e responda em uma linha:
1. Sem JavaScript a figura estática conta a mesma história? O que falta?
2. Com movimento reduzido, alguma coisa se move sozinha? Onde?
3. O tempo de parede na leitura é o do mais lento ou a soma? Prove com o número exibido.
4. Qual o pior quadro em ms ao disparar a cena? Houve quadro longo acima de 50 ms?
5. Que texto está abaixo de 13 px ou abaixo de 4,5:1 de contraste? Corrija antes de devolver.
Depois da crítica, entregue a versão corrigida e a lista das cinco respostas.

--------------------------------------------------------------------------------------
BLOCO 3: o critério de pronto que quem aprova aplica
--------------------------------------------------------------------------------------
- a ficha de cena está preenchida e o código a cita pelo nome
- os três estados (sem script, movimento reduzido, sem WebGL ou sem API) foram vistos em print
- o peso antes do clique é zero ou está declarado no botão
- nenhum número aparece sem fonte, data e rótulo
- o vídeo de 30 s do celular mais fraco da equipe rodando a cena está anexado