Website Rebuild (Recriação 1:1 de Sites Premiados)
Recria um site criativo premiado (WebGL / narrativa com scroll / portfólio) usando um método forense para obter uma engenharia independente, executável e com fidelidade verificável. Não é uma imitação "parece com" — é uma portabilidade linha por linha usando o bundle do site original como a única especificação, com portos quantificáveis.
Esta metodologia foi destilada de seis projetos práticos consecutivos (com prazos reduzidos de 6.5 semanas para 1 dia), e posteriormente refinada com 22 recriações completas + 5 resgates de sites mortos e calibrada com testes de limites em 43 sites (a lista completa está em "Sites Verificados" no README do repositório).
Pré-requisitos e Autorização ⛔ Leitura Obrigatória
Esta skill é destinada à recriação fiel para fins de aprendizado e pesquisa, visando estudar as técnicas de implementação de sites criativos premiados. Aplica-se a sites que sejam de sua propriedade, para os quais você tenha autorização, ou que sejam publicamente acessíveis e permitam aprendizado e imitação. Não é uma ferramenta para coletar conteúdo protegido não autorizadamente, contornar controles de acesso ou se apropriar indevidamente do trabalho de terceiros para fins comerciais.
Ao executar, respeite os seguintes limites:
- Respeite as regras do site alvo: cumpra seu
robots.txt, termos de serviço e direitos autorais; mantenha a coleta em baixa frequência, em sessão única, sem impor carga anormal ao site alvo. ⛔robots.txté uma declaração de permissão por caminho, não um interruptor para todo o site — avalie por URL (grupo selecionado → correspondência mais longa → sem correspondência, permite), não julgue "proibido para todo o site" só porque existe alguma linhaDisallow(quase todo site comercial temDisallowpara/cart,/checkout,/admin); as proibições devem ser categorizadas por tipo de ação, apenas proibições contra "coleta" afetam o escopo do espelhamento; proibições contra transações significam apenas "não clique em finalizar compra". ⭐ "Não entendi / não tenho certeza" não é igual a "proibido": em caso de dúvida, reporte ao usuário, não pare nem reduza o escopo. A interpretação está em references/legal-and-deploy.md §0.3. - Não ultrapasse limites protegidos: não colete conteúdo que exija login, paywall ou autorização; esta skill processa apenas recursos anônimos publicamente acessíveis. Se o site alvo proibir explicitamente esse tipo de cópia, pare e informe o usuário — o que é "proibição explícita" está definido nos quatro critérios fixos em
legal-and-deploy.md§0.3.6; qualquer outra incerteza deve ser reportada ao usuário, não resolvida por decisão própria. - Saída privada por padrão: por padrão, sem índice (
noindex), sem implantação pública. Antes de qualquer publicação, é obrigatório realizar uma verificação de direitos autorais de cada ativo e sinalizar de forma proeminente "Recriação não oficial" com a atribuição ao autor original (consulte references/legal-and-deploy.md).
⛔ Decisões legais são do usuário; a skill apenas coleta evidências e as apresenta (três regras, válidas durante todo o processo):
- A decisão é do usuário: a skill coleta fatos (atribuição por ativo, status de licença, detentores de direitos de terceiros, se o site original ainda está ativo, identificadores de terceiros no produto), lista opções e seus respectivos riscos, dá recomendações e justificativas; para qualquer questão sobre "pode ser público / implantado / redistribuído / exibido externamente", a decisão deve ser explicitamente devolvida ao usuário usando a ferramenta
User Input Toolsabaixo; o agente não pode tirar conclusões legais por conta própria e prosseguir. - Na ausência de decisão explícita do usuário, execute o padrão seguro: repositório privado +
noindex+ sem implantação pública + sem redistribuição. Ao escrever para o usuário, explique que esta é uma ação padrão ("não vou publicar isso até você decidir"), não uma conclusão legal do agente — a responsabilidade é totalmente diferente. O agente só pode executar o padrão para o lado conservador; para o lado público, precisa de uma decisão explícita do usuário. - ⛔ Considerações legais não podem reduzir a integridade do espelho ou a cobertura dos portos: o espelho é a base da evidência, e a integridade é uma invariante técnica (os quatro métodos, o porto de fechamento, GAP=0 são todos construídos sobre ela). Deixar de capturar só pode ser por razões técnicas (não é um arquivo / o servidor não fornece / requer autorização ou login / o site original proíbe explicitamente), e tudo deve ser registrado; não crie lacunas com justificativas legais como "não vai ser público de qualquer maneira" ou "não deveria guardar uma cópia extra". Evidência empírica: em um projeto, com a justificativa "a saída nunca será pública", uma classe de ativos foi "registrada, mas não recapturada", resultando em ~60% dos ativos ausentes, enquanto todos os cinco portos permaneciam verdes, escondendo quatro marcos [objectarchive]. Decisões legais afetam como a saída é usada, não se a base de evidências está completa.
Escopo de Aplicação ⛔ Leitura Obrigatória
Cenário principal (Classe A): sites com hospedagem estática de conteúdo, cujo comportamento (animações/interações) está totalmente armazenado em ativos estáticos do cliente — cenas WebGL/Canvas imperativas, timelines GSAP, arquivos de dados assados (GLB/.buf/.riv), bundles minificados ou não ofuscados. A grande maioria dos sites criativos no estilo Awwwards se enquadra aqui.
Suporte condicional (Classe B): o pipeline funciona, mas requer tratamento adicional para cenários específicos (remoção da camada da plataforma Shopify, ativos em buckets de terceiros, snapshots de API em tempo de execução, expansão de payload SSG). A versão atual do guia cobre a maioria dos cenários Classe B; para casos não cobertos, o risco deve ser sinalizado ao usuário.
Recusa explícita (Classes C/D):
- C1 (a partir de v0.3: engenharia reversa reconstrutiva): os componentes do servidor não são baixados, mas sua saída completa (fluxo flight) está inline no HTML de cada página, sendo uma especificação verificável. Rota: flight-decode constrói um sistema de coordenadas → reconstrói um projeto Next.js construível (componentes do cliente traduzidos literalmente como C2; componentes do servidor revertidos da árvore flight para inferências explicitamente registradas) → verify-flight com porto semântico (módulo id bijeção global). Testado com rauchg.com (Next 16/Turbopack): 18/18 rotas semanticamente consistentes, estrutura cega ≈95%/comportamento ≈98% ao comparar com a resposta. ⚠ Para C1, os níveis L2/L3 são mesclados — o primeiro artefato já é "código fonte escrito por humano + portos provando equivalência". Fluxo completo em references/rsc-reconstruction.md.
- C2 (possível, executar como Classe A): ⭐ A implementação é declarativa, mas o código fonte é enviado ao cliente (produtos de compilação de R3F / Theatre / Vue SFC). Testado com um site R3F: dentro do callback
useFrame, o código era imperativo comum (MathUtils.damp(x, y, 7, t)); 18 módulos fatiados e substituídos na página resultaram em CLEAN, todos os 8 canvases funcionando, diferença entre capturas de tela de 99,5%. O fatiador não se importa com o paradigma — ele fatia bytes. O renderizador serve a partir do espelho como uma camada de plataforma. ⛔ O discriminador não é o nome da biblioteca, mas sim "o cliente possui a fonte do comportamento" (scope-and-fingerprint.md§4.0.1). - D: O comportamento está principalmente no servidor (sites CMS, carrinho/estoque de e-commerce, experimentos A/B, personalização) — o cliente não possui um alvo portável e não há base para aceitação determinística.
Classe X (recuperável): sites originais que desapareceram (domínio mudou de dono / plataforma removida / caminho removido / substituído no local), mas o Internet Archive geralmente tem capturas — scripts/wayback-mirror.mjs seleciona um momento coerente a partir do índice CDX usando âncora + janela de tempo e captura os bytes brutos como um espelho padrão (os portos downstream funcionam como estão); lacunas são registradas como fatos consumados em wayback-holes.txt (leitura e fluxo em references/archival-rescue.md). ⭐ A saída da recuperação é um espelho padrão — a Classe X pode percorrer todo o pipeline L3 (testado no first-launch: shell da Estratégia A + porto numérico com 9.856 amostras 100% iguais + dentro da largura de banda de pixel + porto de autocontenção, nenhum porto exigiu mudança semântica). ⛔ "CDX sem cobertura é o único caso realmente impossível" leia por camada de ativo, não por site: os crawlers do IA não executam JS; sites orientados por manifesto/lista podem ter 100% de cobertura de código e 0% de cobertura visual (testado: 157/160 ativos com zero capturas em qualquer época, tela branca sem internet) — no Passo 0, faça primeiro um reconhecimento de cobertura por camada (derivação + consulta de prefixo CDX) para prever a profundidade da recuperação, veja archival-rescue.md §1.9. A taxa de desaparecimento de sites premiados ao longo dos anos é de aproximadamente 29% — esta é a razão pela qual "espelhar imediatamente" é a primeira regra desta skill.
A classificação é determinada pelo reconhecimento de impressão digital no Passo 0; a árvore de decisão completa está em references/scope-and-fingerprint.md. Em caso de recusa, explique o motivo e indique a classe do site; não force a execução.
Ferramentas de Entrada do Usuário
Ao precisar perguntar ao usuário (confirmar escopo, decisão legal, decisão sobre dependências externas): priorize usar a ferramenta de perguntas integrada do runtime atual (ex.: AskUserQuestion); se não houver, produza uma lista numerada de perguntas para o usuário responder com o número. Quando várias perguntas puderem ser combinadas, faça todas de uma vez. Perguntas legais devem seguir o formato de cinco parágrafos em legal-and-deploy.md §0.1: fatos / o que não está claro / opções / riscos de cada opção / recomendação e ação padrão atual.
Constituição (Seis Regras, Válidas Durante Todo o Processo)
As seis regras a seguir são chamadas de "nível constitucional" nos seis projetos de origem; violar qualquer uma delas resultará em bugs em fases posteriores:
- O espelho é sagrado e não pode ser contaminado: os arquivos de disco
mirror/nunca são modificados; toda adaptação de localização (reescrita de CDN, stub de link externo) é feita dinamicamente na camada de serviço ao responder. - O código do site original é o único árbitro; não corrija com base na aparência: cada alteração deve primeiro encontrar o número da linha de origem no bundle/CSS/HTML do espelho antes de ser implementada. Não ajuste visuais, movimento ou interação a olho nu.
- Tudo que o site original tem, deve ter; o que o site original não tem, não faça: não crie CSS/JS compensatórios próprios. É melhor não se parecer primeiro do que inventar regras — patches auto-criados se transformarão em bugs quando os mecanismos forem alinhados.
- Copie bugs, código morto e implementações estranhas sem corrigir: cada implementação estranha no código minificado pode ser o comportamento em si. "Correções bem-intencionadas" de bugs no-op já causaram falhas de transição (evidência empírica em porting-discipline.md).
- Desvios intencionais devem ser registrados: escreva claramente "como o site original faz / como nós fazemos / por que / sob quais condições reconsiderar". Qualquer diferença não registrada é tratada como bug.
- Código e documentação no mesmo commit: cada marco é commitado em par (
Port xxx+Update rebuild plan: xxx), com o log contendo obrigatoriamente saída / aceitação / lições aprendidas / próximo ponto de interrupção (com números de linha).
⭐ Regra 3 no limite de M(n+1): src/ é um derivado explicitamente registrado, não uma afirmação sobre o site original, então renomear, dividir módulos e adicionar comentários em src/ não é "invenção" — a Regra 3 restringe "criar comportamento próprio para fazer parecer", não "tornar o código já provado equivalente legível". Mas dois limites rígidos permanecem: ① Reescritas estruturais são proibidas por padrão (mesclar duplicatas, extrair funções comuns, alterar algoritmos — elas tornam a equivalência indecidível); ② Especulações em comentários devem ser marcadas como tal, não escreva palpites de notas de engenharia reversa como afirmações. port/ e mirror/ ainda não podem ser tocados nem um byte. Veja references/readable-source.md §3.4 e §5 para detalhes.
Fluxo de Trabalho
Lista de Verificação de Progresso
[ ] Passo 0 Reconhecimento de impressão digital e porto de escopo ⛔ (classificar A/B/C/D/X; recusar ou orientar C/D/X, não prosseguir)
[ ] Passo 1 Classificação de início (falsear arquitetura, pontuar dificuldade por item, estimar prazo, confirmar escopo + ponto final L1/L2/L3 com o usuário)
[ ] M0 Espelhamento forense ⛔ (BFS crawler + CDP complemento + livro razão manifest; GAP=0)
[ ] M0.5 Espelho funciona offline ⛔ (zero 404 / zero erros de console / zero links externos; servido por serve.mjs) ← Ponto final L1: arquivo do espelho
[ ] M1 Engenharia reversa para sistema de coordenadas ⛔ (_pretty fixa a versão e expande; engine-notes antes de qualquer código; pilha tecnológica fixada; REBUILD_PLAN criado)
[ ] M2+ Portabilidade rigorosa com rastreamento de origem (avanço por marco de dependência; cortar um caminho ponta a ponta primeiro; teste a frio + porto CLEAN em cada marco)
[ ] M(n-1) Verificação pareada (selecionar tipo de porto pela árvore de decisão em verification-gates.md; corrigir causa raiz, não ajustar parâmetros para achatar)
[ ] M(n) Fechamento ⛔ (revisão a frio / verificação de lista de módulos; coleta de direitos autorais + apresentar ao usuário — obrigatório antes da implantação pública) ← Ponto final L2: recriação como engenharia
[ ] M(n+1) Transformação em código fonte (port/ → src/: dividir módulos, desofuscar renomeando, adicionar comentários, autocontido) ← Ponto final L3: código fonte
⛔ = Porto bloqueante: não prossiga para a próxima fase até que o critério de aceitação seja atendido.
Fluxo
Passo 0 — Reconhecimento de impressão digital e porto de escopo. Carregue references/scope-and-fingerprint.md, execute o protocolo de detecção para a URL fornecida pelo usuário (GET até a granularidade do caminho, identidade da URL final, diff de dupla captura, verificação de espécie/ano, inspeção inicial do bundle), produza a classificação e a justificativa. Continue para classes A/B; pare ou oriente para classes C/D/X após explicar ao usuário.
Passo 1 — Classificação de início. Carregue references/recon-and-rating.md. Primeiro, falseie a hipótese arquitetural (a tabela de dependências pode mentir), pontue a dificuldade por item (assets/3D/rolagem com coreografia/formato proprietário/camada de plataforma), confirme o escopo da recriação (site inteiro ou páginas específicas) e as expectativas com o usuário.
⭐ Na mesma pergunta, deixe o usuário escolher o ponto final (três níveis, com a conclusão da classificação e estimativas de custo por nível, não apenas liste opções):
| Ponto Final | Pergunta Respondida | Termina em | Uso Típico |
|---|---|---|---|
| L1: Arquivo do Espelho | Como ele se parece | M0.5 | Arquivamento, visualização offline (taxa de desaparecimento de sites premiados ~29%) |
| L2: Recriação como Engenharia | O que ele está fazendo | M(n) | Implantável, verificável 1:1 (inclui coleta de direitos autorais e avaliação de implantação) |
| L3: Código Fonte | Como ele é feito | M(n+1) | Pesquisa e aprendizado de técnicas de implementação |
A escada é monotônica; escolher o nível mais baixo não é perda: cada nível é um prefixo do próximo; a disciplina de espelhamento garante que a parte sensível ao tempo seja sempre concluída primeiro — hoje você escolhe L1, e pode atualizar para um nível superior mais tarde (explique isso ao usuário). "Usar para seu próprio projeto" (andaime) não é uma fase desta skill — se o usuário perguntar, aponte para references/beyond-the-rebuild.md para fazer a transição; isso é engenharia dele, a skill termina quando "o código real pode ser lido por humanos".
M0 / M0.5 — Espelhamento forense. Carregue references/mirroring.md. Use scripts/mirror-site.mjs para BFS crawling + scripts/netcapture.mjs para complemento com navegador real, manifest registra sha256 por arquivo, disciplina redirect: manual, decisões sobre dependências externas item por item. scripts/verify-mirror.mjs é o porto do próprio espelho (cinco asserções, executadas antes do porto offline — todos os portos downstream perguntam "consegue renderizar?", e um espelho errado pode fazê-los ficar todos verdes; um HTTP 200 também não é evidência de que "você obteve aquele recurso"). scripts/serve.mjs serve o espelho, verificação offline. Este passo é sempre executado primeiro — o site original pode desaparecer ou ser modificado a qualquer momento; o espelho é a única base de evidência de todo o projeto e o servidor de referência para todas as comparações subsequentes.
M1 — Engenharia reversa para sistema de coordenadas. Carregue references/reverse-engineering.md. ⛔ A primeira ação é determinar a forma do bundle (concatenação plana / empacotamento modular / múltiplos chunks), depois escolher a ferramenta — a tabela de camadas varre declarações de nível superior, mas o número de declarações de nível superior em produtos de empacotamento webpack é 0; os limites e arestas de dependência são dados pelo empacotador (testado: 24.378 linhas → 569 módulos prontos, usando scripts/module-map.mjs). Se o contêiner não for reconhecido, FATAL; é proibido reverter para a tabela de camadas (§0.5). scripts/beautify-bundle.mjs (js-beautify versão 1.15.1 fixa) expande o bundle para _pretty/; a partir de então, os números de linha são o único sistema de coordenadas de rastreamento de origem de todo o projeto. Escreva docs/engine-notes.md primeiro (modelo: assets/templates/engine-notes.md) antes de qualquer código. A pilha tecnológica é inferida do bundle e fixada com versões exatas. Para animações orientadas por dados, primeiro despeje o livro razão numérico. Crie REBUILD_PLAN.md (modelo: assets/templates/rebuild-plan.md).
M2+ — Portabilidade rigorosa com rastreamento de origem. Carregue references/porting-discipline.md e, em seguida, carregue o guia de cenário correspondente de acordo com a tabela de roteamento de ramos. Cada arquivo portado deve ter o intervalo de linhas de origem anotado no cabeçalho; GLSL/números mágicos/dados devem ser extraídos literalmente; ativos de dados devem ser extraídos por script e armazenados, não copiados manualmente.
M(n-1) — Verificação pareada. Carregue references/verification-gates.md e references/determinism.md. A largura da renderização de todo o site usa scripts/sweep-routes.mjs (todas as rotas em um navegador, 0 erros/0 falhas/0 links externos por rota + hooks de interação e coleta por rota); a profundidade de uma única rota usa probe.mjs — ⛔ não crie manualmente um loop que inicia Chrome para cada rota; o custo é contado pelo número de inicializações do navegador, e sondas concorrentes podem coletar órfãs umas das outras. ⚠ Antes de atribuir resíduos, estabeleça a largura de banda de autocomparação (pixelcompare --self, ≥4 vezes por captura de tela, executadas intercaladas) — resíduos sem largura de banda são sempre UNCLASSIFIED, e UNCLASSIFIED é uma falha, não uma aprovação. Seleção do tipo de porto: com SSR/HTML estático, primeiro porto de bytes → congelar fontes de entropia em cenários DOM estáticos com byte-equal → cenários ativos (WebGL/vídeo/fase aleatória) degradar para métricas quantitativas + classificação de ruído → animações orientadas por dados adicionam porto de sonda numérica → porto CLEAN como rede de segurança durante todo o processo. Antes de julgar bugs de temporização, primeiro calibre a sonda (references/environment-traps.md).
M(n) — Fechamento. Revisão a frio: verifique a lista de classes/módulos de nível superior do bundle um a um com seus pontos de aterrissagem (testes funcionais não detectam omissões de blocos inteiros; apenas a verificação da lista pode fazer isso). Carregue references/legal-and-deploy.md para concluir a coleta de direitos autorais e apresentar a decisão ao usuário — antes da decisão do usuário, execute o padrão seguro (privado + noindex + sem implantação); antes de tornar público, é obrigatória a verificação de direitos autorais de cada ativo e a sinalização proeminente de que é uma recriação não oficial.
M(n+1) — Transformação em código fonte. Carregue references/readable-source.md. Até M(n), o artefato já está provado correto, mas ilegível para humanos (testado: 14.271 linhas amontoadas em um arquivo, e aparece 2962 vezes, comentários ocupam 0,2%). Esta fase reescreve port/ como src/: dividir módulos → desofuscar renomeando com segurança de escopo → adicionar comentários segmentados → copiar ativos para autocontenção. ⛔ A granularidade da divisão não é uma escolha livre — a ordem de declaração de scripts planos é a ordem de avaliação; a granularidade é determinada por três restrições rígidas (referências mútuas / ordem de avaliação / vinculações de import não podem ser atribuídas); primeiro produza um plano de divisão para revisão, depois fatie; ao encontrar um módulo gigante, primeiro meça a curva de benefício de "ligação tardia de alguns singletons finais" antes de decidir (testado: 6 ligações reduziram de 11.246 linhas para 1.013 linhas, enquanto trocar o sistema de módulos custaria toda a cadeia de ferramentas para obter a mesma granularidade). ⭐ O julgamento "isso não pode ser feito" é extremamente não confiável — testado duas vezes como estruturalmente impossível, e as duas vezes o verdadeiro culpado era um bug em sua própria ferramenta; primeiro suspeite da ferramenta que o mede, depois do objeto (readable-source.md §3.1–3.1.3). ⛔ Pré-condição não negociável: deve primeiro ter portos totalmente verdes. Refatoração sem árbitro é alteração às cegas; com o árbitro meanAbsDiff 0.00, cada passo pode ser provado — esta é a melhor condição para refatoração e a razão pela qual ela deve vir por último. Todos os portos existentes são reutilizados como estão (o alvo é o artefato de construção de src/, nenhuma tolerância pode ser relaxada), além de adicionar o porto de mapeamento de símbolos e o porto de autocontenção. ⛔ Reescritas estruturais (mesclar duplicatas, extrair funções comuns, alterar algoritmos) são proibidas por padrão — elas degradam o porto de "provar equivalência" para "não detectou não equivalência". ⭐ A Regra 4 ainda é válida nesta fase: agora você entende o código, e o impulso de "isso é claramente um bug" será mais forte do que em qualquer outra fase, e ainda pode ser o comportamento em si.
⭐ Produtos sem contêiner scope-hoisted (Vite/esbuild, sites entregues camada por camada literalmente) seguem outro caminho: não reescrever, fatiar — decomposição concatenada (scripts/census-bundles.mjs produz grafo de chunks e coordenadas → scripts/slice-esm.mjs fatia por declaração em partes nomeadas semanticamente, concatenadas em ordem, byte a byte igual ao original → scripts/verify-reassembly.mjs decide com um porto; quando a equivalência de bytes é estabelecida, todos os vereditos dos portos de tempo de execução são transferidos gratuitamente). O lado da execução não muda; o navegador continua executando o chunk original. Veja readable-source.md §3.0.6 para detalhes.
Tabela de Roteamento de Ramos
Os resultados do reconhecimento do Passo 1 determinam quais guias de cenário carregar (conforme necessário, não carregue tudo):
| Descoberta do Reconhecimento | Carregar |
|---|---|
Next.js App Router / RSC (fluxo flight self.__next_f) — Engenharia reversa reconstrutiva C1 | references/rsc-reconstruction.md |
| WebGL / Canvas (three.js, engine próprio, GLSL) | references/webgl-scenes.md |
| GSAP / dados de animação assados / animações CSS variables / máquina de estados de entrada própria | references/animation-recovery.md |
| Formatos binários proprietários (.buf / .sog / VAT / GLB timeline / .riv) | references/binary-formats.md |
Loja Shopify (impressão digital: cdn/shop, Shopify.theme, cdn.shopify.com) | references/shopify-platform.md |
CMS Sanity (impressão digital: cdn.sanity.io/images/<projectId>/, *.api.sanity.io, payload com _key/_type/_ref) — ⛔ a classificação depende do momento do cozimento do conteúdo, não do nome da biblioteca; ativos auto=format negociam bytes diferentes com base no Accept header | references/sanity-platform.md |
| Seleção de estratégia da camada DOM (obrigatório para todos os sites; branches diferentes para exportação Webflow / página estática única / SSR de framework, além da restrição ortogonal de "DOM ser lido pelo engine 3D como fonte de coordenadas") | references/dom-shell-strategies.md |
| Ativos de grande porte (mídia de centenas de MB / fontes licenciadas) | references/asset-management.md |
| Comportamento anômalo de detecção headless / suspeita de problema de ambiente | references/environment-traps.md |
Resumo dos Passos
| Fase | Ação Chave | Porto de Aceitação Bloqueante | Artefato |
|---|---|---|---|
| Passo 0 | Detecção de impressão digital e classificação | Classificação clara e comunicada ao usuário | Conclusão da classificação e justificativa |
| Passo 1 | Falsear + classificar + confirmar escopo | Confirmação do usuário | Tabela de classificação de dificuldade, consenso de escopo |
| M0/M0.5 | Espelhar + livro razão + funcionar offline | verify-mirror com 5 itens verdes; GAP=0; zero 404 / zero erros / zero links externos | mirror/ (somente leitura), manifest, servidor de referência serve.mjs |
| M1 | Expandir bundle, notas de engenharia reversa, fixar pilha | engine-notes concluído; tabela de versões fixas concluída | _pretty/, docs/engine-notes.md, REBUILD_PLAN.md |
| M2+ | Portabilidade com rastreamento, commits em par de marcos | Teste a frio de cada marco + porto CLEAN verde | Código fonte com anotações de linha, três tabelas de registro atualizadas iterativamente |
| M(n-1) | Verificação pareada | Todos os portos selecionados verdes ou todas as diferenças registradas | Script de verificação + artefato de comparação armazenado (docs/compare/) |
| M(n) | Revisão a frio + coleta de direitos autorais + apresentar ao usuário | Verificação de lista sem lacunas; usuário tomou decisão de implantação (se pendente, manter padrão seguro) | Registro de auditoria, DEPLOY.md |
| M(n+1) | Dividir módulos + desofuscar + comentários + autocontenção | Todos os portos existentes verdes sem relaxar tolerância; porto de símbolo bijetivo sem órfãos; porto de autocontenção (copiar, desconectar da rede, construir) aprovado | src/ (projeto legível), docs/rename-map.json, src/README.md |
Diretório de Scripts
Node 22+, caminhos relativos ao diretório desta skill. Uso e maturidade em scripts/README.md.
⭐⭐ A disciplina de dependências é por fase, não por diretório: antes da transformação em código fonte, todo o pipeline tem zero dependências.
Do Passo 0 a M(n), não instale nada; o projeto de recriação só obtém devDependencies em M(n+1) (renomear com segurança de escopo requer um parser real). scripts/ (zero dependências) e tools/ (permite devDeps) são apenas a projeção desta linha de fase no diretório — scripts de pipeline moram em scripts/, refatoradores da fase de código fonte moram em tools/.
⛔ Nenhum porto pode importar nenhuma ferramenta (verification-gates.md §2.1.2) — o verificador não pode ser o produtor.
⭐ Fases anteriores precisam de um parser real? Monte externamente, não importe. beautify-bundle.mjs (js-beautify) e module-map.mjs (acorn) ambos usam spawn com um npx de versão fixa; o script em si ainda tem zero dependências e ainda pode ser auditado independentemente. ⛔ Não reescreva um tokenizer manual — isso já foi tentado nesta skill; um literal regex com aspas o desviou por 16.177 linhas (F27). A correspondência de parênteses no fluxo de tokens é precisa; a correspondência de parênteses no texto é um palpite sobre strings, regex e comentários.
⚠ Esta linha foi descoberta somente depois de ter sido violada: module-map.mjs dependia de @babel/*, mas morou em scripts/ por oito versões, enquanto o texto original da mesma disciplina estava escrito três linhas acima. Uma regra que está apenas na documentação, sem nada para verificá-la, vai silenciosamente falhar.
| Script | Uso | Fase |
|---|---|---|
scripts/fingerprint.mjs | Implementação multiplataforma do protocolo de detecção de seis passos do Passo 0 (GET verificar vida + cadeia de redirecionamento e identidade do domínio final, diff de dupla captura, espécie/ano, impressão digital HTML de tecnologia, inspeção inicial do bundle; contagem de ocorrências e retry com Referer <1KB internamente; coleta de evidências do CMS Sanity — projectId/dataset/host da API/auto=format/_key, normalização de três grafias, se encontrado, aponta para sanity-platform.md). Coleta apenas evidências, não produz classificação — a classificação ainda segue a árvore de decisão em scope-and-fingerprint.md §3 | Passo 0 (quando não há ferramentas POSIX) |
scripts/mirror-site.mjs | BFS crawler para espelhamento (whitelist de ativos + iteração até ponto fixo; redirect:manual + três contas, com sha256 por arquivo; ⭐ redirects.tsv acumula entre execuções, assim como o manifest — --scope para adicionar páginas já truncou para apenas cabeçalhos, e o porto de payload encontrou 404 em /work). --scope <prefixo> limita a fila de páginas ao caminho alvo (obrigatório quando um micro-site está sob o domínio CMS de uma empresa; ⛔ limita apenas páginas, não ativos). Acumulação de livro razão (--seeds para preencher lacunas não trunca linhas da rodada anterior) + censo fora do host (conta hosts que não segue um a um e alerta — o descarte silencioso já fez 827 referências de mídia desaparecerem enquanto o relatório dizia "57 files saved") | M0 primeira passagem |
scripts/netcapture.mjs | Navegador real CDP para capturar e reconciliar recursos em tempo de execução (CDN deve passar --hosts, caso contrário, observa apenas tráfego de mesma origem e relatará falso GAP=0) | M0 segunda passagem |
scripts/verify-mirror.mjs | Porto do próprio espelho, executado antes do porto offline. Cinco asserções: injetividade do mapeamento / sha256 do livro razão vs. disco / autenticidade (corpo da página de desafio + tipo de declaração vs. número mágico — um 200 não é evidência de "você obteve aquele recurso") / fechamento / amostragem opcional de retorno à fonte. Todos os portos downstream perguntam "consegue renderizar?", e um espelho errado pode fazê-los ficar todos verdes | Antes de fechar M0, após cada recaptura do espelho |
scripts/gapfill-video.mjs | Preenchimento escalonado de mídia HLS/DASH (master → rendition → fragmentos), ponto cego estrutural do crawler estático | M0 (quando há mídia streaming) |
scripts/reconcile-gaps.mjs | Reconciliador de lacunas em tempo de execução: pega as linhas GAP registradas pelo netcapture e a lista completa do conjunto derivado de bytes (ex.: srcset escalonado de next/image — testado 1.078 vs. 217 encontrados pelo navegador) e as adiciona ao espelho uma a uma. ⭐ Escada de headers de requisição (perfil padrão 4xx → retry com perfil simples: o mesmo 403 tem dois remédios opostos, landonorris precisa de Referer, video.twimg odeia Referer) + tolerância a erros por URL + contabilidade em lotes (uma falha não deixa arquivo fora do livro razão). ⛔ O perfil padrão para URLs de imagem envia o Accept de imagem do navegador (lib/negotiate.mjs) — CDNs do tipo auto=format negociam formato com base no Accept, */* obtém bytes de fallback (basement D5: 391 variantes todas em fallback e portos todos verdes); o livro razão registra profile+vary | M0 (sites com muitos recursos em tempo de execução) |
scripts/flight-decode.mjs | Sistema de coordenadas para C1: decodifica o fluxo self.__next_f.push de cada página em uma tabela de referência de módulo (linhas I com nomes exportados = evidência de nomenclatura tier-1 gratuita), pré-carregamentos HL, árvore de elementos desreferenciados + outline JSX. Linhas T são tratadas com base no tamanho da declaração em bytes; linhas :HL com id vazio não podem quebrar a cadeia | M1 (C1) |
scripts/verify-flight.mjs | Porto semântico para C1: árvore flight do artefato de construção ≟ árvore flight do espelho. Parser próprio (⛔ não importa flight-decode — verificador não pode ser o produtor); normalização inclui apenas espaços de nomes de hash de construção que "provam não carregar comportamento" (nomes de chunk / classes de módulo CSS / hash de mídia / pontos de montagem de recursos promovíveis / graus de liberdade de codificação); id de módulo como bijeção global (um-para-muitos é vermelho); itens de registro do site usam --normalize-props (campos de época ISR) e --normalize-class (subárvore renderizada por biblioteca); todas as outras diferenças são vermelhas | M(n-1) (C1) |
scripts/serve.mjs | Servidor estático zero dependências (MIME/Range/reescrita em camada de serviço/reprodução de redirecionamentos), também atua como servidor de referência do site original. --rewrite FROM::TO é uma substituição literal registrada, para coisas que a localização não alcança — o programa original ramifica com base em seu próprio domínio (location.hostname=="x.com" && (CDN=...), o espelho não está naquele domínio, então a ramificação inteira é ignorada). ⛔ Substituições não são "traduções" — a string de substituição é um byte exato injetado no fluxo de resposta; não é normalização nem mapeamento. ⚠ Por causa desta ambiguidade partida, serve.mjs registra cada substituição no manifesto e imprime um aviso no console | M0, usado continuamente |
scripts/sweep-routes.mjs | Varredura de largura de todo o site: navegador real, uma guia por rota, coleta 0 erros/0 falhas/0 links externos + descarga de estado de console + captura de tela por rota. Registra informações de interseção de rota x ativo no manifesto. ⛔ Não importa probe — varredura de largura e sonda de profundidade são ferramentas ortogonais com responsabilidades diferentes (ninguém as confunde, a menos que o mesmo arquivo faça as duas coisas, e então as pessoas confundem) | M(n-1) |
scripts/probe.mjs | Sonda de profundidade de uma única rota: comparação pixel a pixel, livro razão de chamadas de API, porto numérico, exportação de trace de animação | M(n-1) |
scripts/pixelcompare.mjs | Executor de comparação pixel a pixel (suporta --self para autocomparação, que primeiro estabelece largura de banda, depois atribui resíduos). ⚠ Custo: ~3 segundos por quadro de comparação; para o modo de varredura de largura, use sweep-routes.mjs com sua própria coleta de captura de tela | M(n-1) |
scripts/module-map.mjs | Mapeamento de estrutura de módulo de bundle webpack: usa acorn para AST, varredura com ModuleMap para extrair dependências e declarações; relata dependências Ômega (referenciadas mas não declaradas) e módulos Pássaro (declarados mas não referenciados) | M1 |
scripts/beautify-bundle.mjs | js-beautify versão 1.15.1 fixa (especificada com /* beautify */ inline no script para evitar desvio de versão); se falhar, tenta sed como fallback | M1 |
scripts/census-bundles.mjs | Para bundles planos/divididos como Vite/esbuild: percorre a árvore de entrada, constrói grafo de chunks (coordenadas de dependência + coordenadas de declaração), determina granularidade fatiável | M1 |
scripts/slice-esm.mjs | Fatiador de módulo ESM: fatia por declaração de nível superior; saída nomeada semanticamente + script de recombinação que concatena em ordem, produce byte a byte igual ao original (verificado por verify-reassembly.mjs) | M(n+1) (para via de fatiamento) |
scripts/verify-reassembly.mjs | Porto de recombinação: verifica se a saída de slice-esm.mjs após concatenação é byte a byte igual ao arquivo original. ⛔ Não importa slice-esm — verificador não pode ser o produtor | M(n+1) (para via de fatiamento) |
scripts/wayback-mirror.mjs | Crawler do Internet Archive: consulta CDX por âncora de URL + intervalo de tempo, seleciona o mais coerente (menos lacunas dentro da janela), captura bytes brutos id_ como espelho padrão | M0 (Classe X) |
scripts/report.mjs | Gerador de relatório de diferenças: entrada = duas capturas de tela ou duas árvores DOM, saída = diff anotado | M(n-1) |
scripts/screenshot.mjs | Captura de tela de navegador headless (resolução fixa/desativação de aceleração de GPU/hooks de injeção de CSS/unificação de fonte) | M(n-1) |
tools/map-worksheet.mjs | Gerador de planilha de mapeamento de símbolos: escaneia src/, gera esboço de rename-map.json com assinaturas de contexto (escopo de onde o nome é definido + escopo de onde é referenciado) para revisão e preenchimento humano | M(n+1) |
Diretório de Referências
references/ contém guias de procedimentos e modelos. Leia conforme necessário, não tudo de uma vez (siga a tabela de roteamento de ramos). Cada arquivo tem cabeçalho de versão e histórico de alterações; leia apenas a versão atual.
Esta é uma skill de agente para recriação forense de sites. Use com responsabilidade e respeito aos direitos autorais.