replica-build (construção de réplica)

replica-build

Lê replica/recon.md, replica/architecture.md, replica/design/. Atualiza replica/features.csv (a coluna clone) e mantém replica/build-log.md.

As regras

• Sala limpa. Cada linha de código é escrita aqui, a partir do mapa de reconhecimento e das especificações. Nunca cole o HTML, CSS, JavaScript, SVGs ou imagens originais, nunca carregue nada do domínio ou CDN original, nunca "veja a fonte e adapte".
• Suas palavras. Escreva cada rótulo, botão, estado vazio e e-mail do zero. Corresponder ao que um botão faz é paridade. Corresponder à sua frase é cópia.
• Tokens apenas. Nenhum valor hex ou pixel bruto em componentes. Se um valor estiver faltando, adicione-o aos tokens.

Etapa 1: o esqueleto

Roteamento para cada tela do inventário (páginas provisórias são aceitáveis), o layout (nav, cabeçalho, barra lateral), tokens integrados, os primitivos do replica-design e dados de semente para que as telas tenham algo real para mostrar. Commit.

Etapa 2: a fatia vertical

O ciclo principal do mapa de reconhecimento, ponta a ponta, antes de qualquer outra coisa. Para um aplicativo de reserva: criar um tipo de evento, abrir a página pública, reservar um horário, vê-lo no painel. Feio é aceitável. Funcionar é o que importa. Se o replica-backend ainda não foi executado, use os dados de semente e uma camada de dados falsa com as mesmas assinaturas de função, para que a troca pela real não altere o código da tela.

Etapa 3: tela por tela

Trabalhe na ordem de architecture.md. Para cada tela:

1. Leia sua linha no mapa de reconhecimento: propósito, componentes, estados, quais fluxos passam por ela.
2. Olhe a captura de tela de referência para layout e hierarquia. Não para pixels.
3. Construa-a com os primitivos. Dados reais da camada de dados.
4. Cada estado: vazio, carregando (esqueletos, não spinners, se o original fizer), preenchido, erro, sem permissão, conteúdo longo (um nome de 60 caracteres), largura móvel.
5. Básicos, sempre: HTML semântico, rótulos em entradas, acessível por teclado, foco visível, imagens com texto alternativo.
6. Marque as linhas correspondentes em features.csv como yes ou partial (com uma nota).
7. Capture a tela na mesma janela de visualização da referência, em replica/clone-screens/S07.png para o replica-diff.
8. Um commit por tela: build: S07 página de reserva.

Definição de concluído, por tela

• cada estado do mapa de reconhecimento, mais vazio, erro e carregamento
• funciona com 390px e 1440px de largura
• apenas teclado: consegue completar o fluxo
• sem erros no console
• nenhum texto copiado do original
• features.csv atualizado
• captura de tela salva para diferença

Etapa 4: o registro de construção

replica/build-log.md, uma linha por tela: ID, data, concluído ou parcial, o que está faltando, o que foi mais difícil do que o esperado. Quando uma funcionalidade for maior do que parecia, diga no registro e no chat. Não entregue silenciosamente metade dela.

Quando você estiver travado em como algo funciona

Volte ao original como usuário: leia seu artigo de ajuda, assista à sua demonstração pública, use a própria conta do usuário. Não investigue seu código ou chamadas de rede. Depois construa sua própria versão do comportamento.

Saída

Telas construídas, a matriz de funcionalidades atualizada, capturas de tela salvas e um resumo: telas concluídas do total, itens obrigatórios concluídos do total, o que vem a seguir. Depois /replica-backend se a camada de dados ainda for falsa, senão /replica-test.