Clone Website: reconstrua páginas somente com autorização

ANÁLISE EDITORIAL

Recriar uma página com fidelidade visual parece um problema de CSS, mas a parte difícil começa antes do primeiro componente. É preciso saber o que está autorizado, separar conteúdo de aparência, descobrir como cada interação funciona e impedir que uma nova rota apague trabalho existente. A Clone Website transforma essa tarefa em um fluxo de inspeção, especificação por componente, construção isolada e comparação visual.

A Skill vem do repositório JCodesMore/ai-website-cloner-template. Na consulta de 18 de setembro de 2026, o projeto tinha 34.607 estrelas e 5.044 forks. Esses números pertencem ao repositório inteiro, não representam instalações ou resultados da Skill isolada. A versão auditada foi fixada no commit d35c3aa93b9edbcb450f2a44500f763bc4de524c, sob licença MIT.

O que esta Skill faz

O SKILL.md oficial orienta um agente a reconstruir uma ou mais URLs em uma aplicação Next.js. O processo começa com inventário de rotas e diretórios, passa por capturas em diferentes larguras, extração de estilos computados, identificação do modelo de interação e registro de especificações. Só depois distribui componentes para construção e executa a revisão visual.

A palavra “clone” precisa ser lida com cuidado. O arquivo propõe fidelidade de layout, tipografia, espaçamento, animação, conteúdo visível e ativos. Isso não concede direito de copiar um site de terceiros. Nesta curadoria, autorização do proprietário, termos do serviço, robots.txt quando aplicável, licenças dos ativos e limites de coleta são pré-requisitos humanos obrigatórios. Use a Skill em páginas próprias, ambientes de homologação, projetos contratados ou materiais cuja reprodução esteja claramente permitida.

Para quem serve

A Clone Website pode ajudar equipes de frontend, design systems, agências e responsáveis por migração que precisam reconstruir uma interface autorizada com rastreabilidade. Ela é especialmente útil quando uma página antiga será portada para uma base moderna, quando um protótipo aprovado precisa virar código ou quando uma empresa quer preservar a aparência de uma propriedade que controla.

Ela não é indicada para copiar concorrentes, contornar acesso, republicar marcas, capturar áreas autenticadas ou extrair dados pessoais. Também não substitui uma decisão de produto. Para estudar apenas tokens, estrutura e componentes sem reproduzir o site inteiro, o catálogo já oferece a Extract Design. A Clone Website tem escopo maior: ela planeja rotas, ativos, comportamento, construção e comparação final de uma página autorizada.

Origem, adoção e versão

A origem auditada é a pasta .agents/skills/clone-website. O arquivo não declara versão própria. Por isso, esta página usa o commit completo como referência reproduzível. O repositório estava ativo, não arquivado e tinha master como branch padrão na consulta.

O README oficial descreve um template Next.js e compatibilidade com diferentes agentes de código. A adoção observada mostra interesse no projeto completo, mas não prova que qualquer URL possa ser reconstruída com segurança, que todos os sites autorizem coleta ou que a saída passe por revisão jurídica, de acessibilidade e de conteúdo.

Compatibilidade

O fluxo espera um agente capaz de ler Skills em Markdown, acessar arquivos do projeto, operar um navegador automatizado e executar comandos de build. O projeto-base citado pela documentação usa Next.js, Tailwind CSS e componentes shadcn/ui. A Skill também prevê criação de arquivos de pesquisa, capturas, especificações e worktrees para tarefas paralelas.

Compatibilidade não significa execução automática em qualquer cliente. Sem controle de navegador, a própria instrução pede interrupção e esclarecimento. Sem um projeto preparado, o build inicial falha. Sem suporte a agentes paralelos ou worktrees, a equipe pode seguir sequencialmente, desde que preserve isolamento de rotas e arquivos. O pacote do Bastidores não inclui browser, Node.js, Next.js, dependências ou template.

Pré-requisitos

Comece com uma autorização documentada que identifique domínio, páginas, finalidade, período e ativos permitidos. Confirme termos de uso, robots.txt quando relevante, licenças de imagens, fontes, vídeos, ícones e textos. Se o cliente forneceu os materiais, registre a origem e a permissão. Caso algum direito permaneça incerto, substitua o ativo por conteúdo próprio ou interrompa a coleta.

Prepare também um projeto limpo e versionado, uma URL de destino local, navegador automatizado autorizado e comandos de build conhecidos. Faça inventário de rotas existentes antes de editar. Nunca forneça cookies, tokens, credenciais ou sessões ao fluxo. Páginas atrás de login exigem autorização específica e um método seguro, e ainda assim dados pessoais, segredos e conteúdo de terceiros devem permanecer fora do material coletado.

Instalação segura

O repositório oficial orienta usar o template completo e pedir ao agente que o prepare como projeto independente. Isso inclui clonar código, remover o remoto de origem, instalar dependências e executar verificações. Antes de qualquer comando, confira repositório, commit, scripts do package.json, arquivos de configuração e destino. Não instale o projeto sobre uma aplicação existente sem um plano de migração e backup.

O botão “Baixar pacote auditado” desta página entrega somente a documentação da Skill. Descompacte o ZIP fora de uma pasta ativa e leia clone-website/SKILL.md, clone-website/references/inspection-guide.md, LICENSE e ORIGEM.md. Depois, copie a pasta documental para o local aceito pelo agente. O espelho não instala dependências, não baixa ativos e não executa navegador ou build.

Configuração antes da inspeção

Defina uma URL por vez no primeiro uso. Registre a rota de destino, a largura de desktop, tablet e celular, os estados interativos importantes e o que está fora do escopo. Escolha se a meta é uma reprodução visual para migração, um protótipo navegável ou uma base para redesenho. Essa decisão muda o nível de fidelidade necessário e o tratamento de conteúdo.

A Skill cria chaves derivadas da origem e do caminho para isolar pesquisa, capturas, componentes e ativos. Mantenha essa separação. Se duas páginas compartilham cabeçalho ou tokens, aprove o compartilhamento de forma explícita. Se a rota já existe, pare e decida se ela será atualizada, preservada ou substituída. Não use uma nova URL como justificativa para apagar uma rota anterior.

Primeiro uso

Teste em uma landing page própria e simples. Informe a URL, a autorização e a rota local desejada. Peça primeiro o plano de saída: raiz do aplicativo, chave do site, chave da página, diretórios de pesquisa, capturas, componentes e ativos. Confira colisões antes de permitir qualquer escrita.

Depois, acompanhe a inspeção. O fluxo deve capturar a página em desktop e celular, percorrer rolagem, cliques e estados de hover e registrar estilos computados. Um botão que muda de cor no hover e uma seção que troca conteúdo durante a rolagem exigem implementações diferentes. Se o agente não consegue demonstrar qual evento governa a interface, ele ainda não tem informação suficiente para construir.

Como a inspeção vira especificação

O princípio central é escrever uma especificação antes de delegar um componente. Cada arquivo precisa registrar estrutura, estilos, estados, comportamento, ativos, texto e adaptação responsiva. Valores devem vir do navegador, não de aproximações como “parece um título grande”. A especificação funciona como contrato entre a observação e o código.

O guia de inspeção incluído no pacote organiza o levantamento em cinco blocos: auditoria visual, inventário de componentes, arquitetura de layout, análise técnica e documentação. Ele chama atenção para cores, tipografia, espaçamento, sombras, breakpoints, estados vazios e de erro, bibliotecas de animação, carregamento de fontes e estratégia de imagens. Nem todo item aparecerá em toda página, mas cada ausência deve ser verificada, não presumida.

Estados e interações importam

Uma captura estática não revela cabeçalho que muda após a rolagem, aba acionada por interseção, menu que abre ao foco ou cartão com transição no hover. A Skill exige uma varredura de interação antes da construção. Primeiro role devagar, depois clique e passe o cursor. Para cada mudança, registre gatilho, estado inicial, estado final, duração e técnica provável.

Esse cuidado evita um erro caro: implementar abas por clique quando o original avança pela rolagem. Também impede que um vídeo seja reconstruído como uma falsa interface em HTML ou que uma imagem composta perca camadas sobrepostas. Em páginas próprias, as capturas e medições podem ser comparadas com o código-fonte. Em páginas de terceiros autorizadas, mantenha apenas o mínimo necessário e respeite o escopo contratual.

Construção por componentes

Depois da fundação compartilhada, o fluxo divide a página em componentes pequenos. Uma seção simples pode ir para uma única tarefa. Uma seção com cartões diferentes, estados e animações deve ser quebrada. A recomendação é limitar o tamanho da especificação recebida por cada construtor e validar TypeScript antes de integrar o trabalho.

Paralelismo aumenta velocidade, mas também cria risco de colisão. Por isso, rotas, diretórios e arquivos precisam ser exclusivos. A fundação deve ser construída sequencialmente, e cada worktree deve alterar apenas seu namespace. Após cada integração, execute o build e verifique que rotas anteriores continuam presentes. Uma reprodução fiel que quebra o restante do projeto não está pronta.

Resultado esperado

O resultado esperado é uma página funcional na rota planejada, com componentes separados, ativos autorizados, build aprovado e especificações arquivadas. A entrega deve incluir mapeamento entre URL de origem e rota local, lista de componentes, quantidade de ativos, estado do build e discrepâncias conhecidas. A comparação precisa ser repetida em desktop e celular.

Não espere backend real, autenticação, banco de dados ou integração de produção apenas porque a aparência foi reproduzida. O escopo padrão do arquivo usa dados demonstrativos. SEO e auditoria de acessibilidade também ficam fora do padrão e precisam de trabalho próprio. A página final deve identificar claramente conteúdo provisório, links inativos e funções simuladas.

Permissões e riscos

O maior risco é confundir possibilidade técnica com permissão. Texto, fotografia, ilustração, vídeo, fonte, marca e aparência comercial podem ter proteções e contratos distintos. Um site público não é automaticamente livre para reprodução. Não contorne bloqueios, não acesse áreas autenticadas sem escopo explícito e não reutilize materiais cuja licença não permita.

Há também risco de privacidade e segurança. O navegador pode encontrar identificadores, parâmetros, formulários, respostas de API ou conteúdo personalizado. Não grave cookies, tokens, cabeçalhos de autenticação, dados pessoais ou chaves em especificações. Prefira um ambiente de demonstração sanitizado. Revise scripts de download, nomes de arquivos e diretórios antes de executar. A Skill original não traz gates explícitos de autorização, robots.txt, copyright ou credenciais, então esses controles precisam ser adicionados pela equipe.

Como revisar a fidelidade sem copiar além do necessário

Compare geometria, hierarquia, comportamento e responsividade, mas substitua ativos quando a licença exigir. Uma migração autorizada pode usar originais fornecidos pelo proprietário. Um exercício de aprendizado deve usar texto, imagens, nomes e marcas próprios. Se o objetivo é estudar um padrão, extraia a regra e não o conteúdo.

Use capturas lado a lado para localizar diferenças, não para declarar identidade legal ou técnica. Verifique seção por seção, em larguras iguais. Quando houver divergência, determine se a especificação estava errada ou se a implementação ignorou um valor correto. Corrija a causa e repita a comparação. Preserve uma lista de lacunas em vez de esconder aproximações.

Erros comuns e como corrigir

A rota existente foi sobrescrita. Restaure o backup e refaça o plano de saída com namespace exclusivo. A página parece correta apenas em desktop. Repita inspeção em tablet e celular, registre breakpoints reais e reavalie cada componente. A interação foi implementada pelo evento errado. Volte à varredura, observe primeiro a rolagem e só depois teste clique e hover.

Faltam imagens ou camadas. Inspecione img, vídeo, SVG e imagens de fundo dentro de cada contêiner. O build quebra após integrar agentes. Reduza o escopo, isole arquivos e valide após cada merge. O site-alvo contém material sem licença clara. Pare o download e use ativos próprios. O agente pede sessão ou credencial. Não forneça; revise o escopo e prepare um ambiente autorizado sem segredo.

Versão, licença e pacote auditado

O pacote foi fixado no commit d35c3aa93b9edbcb450f2a44500f763bc4de524c. O repositório declara licença MIT. O ZIP local contém quatro arquivos: clone-website/SKILL.md, clone-website/references/inspection-guide.md, LICENSE e ORIGEM.md. Seu SHA-256 é 35b677b81243b40b8d9c9381563cca5eba5081c6426b3a1e6bfb7cae4627f464.

A licença permite redistribuir o software e sua documentação com o aviso preservado. Ela não concede direitos sobre páginas, marcas, conteúdo ou ativos encontrados durante uma execução. O download próprio do Bastidores é separado do botão que abre a origem oficial. Compare o commit antes de substituir arquivos e leia o registro de origem antes de ativar a Skill.

Limites do pacote local

O espelho é estritamente documental. Ele não inclui template Next.js, código da aplicação, scripts de download, dependências, node_modules, imagens, vídeos, fontes, capturas, conteúdo de sites de terceiros, chaves, tokens, cookies, sessões ou credenciais. O ZIP não executa nada sozinho e não cria uma página.

A curadoria confirmou repositório, commit, licença, arquivo principal, referência exigida e escopo. Não executou uma reprodução de site de terceiro nem um benchmark de fidelidade. O hash garante os bytes do pacote hospedado, não autorização, conformidade jurídica ou segurança de uma execução futura. Qualquer uso precisa repetir os gates para a URL escolhida.

Checklist antes de usar

• Documente autorização, domínio, páginas, finalidade, período e ativos permitidos.
• Confira termos, robots.txt quando aplicável, licenças, marcas e privacidade.
• Use projeto versionado, inventarie rotas e aprove o plano de saída antes de escrever.
• Nunca forneça cookies, tokens, credenciais, sessões ou dados pessoais ao fluxo.
• Escreva uma especificação por componente antes de construir ou delegar.
• Valide build, rotas preservadas, desktop, celular, estados e discrepâncias conhecidas.

Fontes oficiais consultadas

• Repositório oficial JCodesMore/ai-website-cloner-template, consultado em 18/09/2026.
• SKILL.md no commit auditado, consultado em 18/09/2026.
• Guia oficial de inspeção referenciado pela Skill, consultado em 18/09/2026.
• README oficial com arquitetura e instalação, consultado em 18/09/2026.
• Licença MIT preservada no repositório, consultada em 18/09/2026.