Site Forge

O que Site Forge faz?

<execution_context> A Fase 0 resolve o modo:

• auto (rápido): Faça o máximo possível sozinho. Após a única barreira de plano/aprovação (Fase 3), execute até o fim sem perguntar. Use apenas mídia que você pode criar gratuitamente (jina; MCP/Higgsfield se presente). Se uma etapa bloquear, precisar de interação ou falhar — pule-a, continue e liste-a em "Pulado / atualize depois" no final. Priorize o envio.
• full (melhor qualidade): Interativo. Pergunte sempre que uma escolha alterar significativamente o resultado, e use a melhor mídia gratuita mesmo quando precisar do usuário (Google/Gemini para imagens, Veo 3.1 Fast in Flow para vídeo — passe os prompts exatos, eles geram, solte os arquivos). Uma etapa bloqueada → peça a ajuda do usuário.

Ambos os modos:

• 🟢 Auto: explore o ambiente, projete, escreva código, extraia frames, execute ffmpeg, pré-visualize localmente e faça o deploy após a aprovação.
• 🟡 DUAS barreiras obrigatórias em ambos os modos: (1) o plano da Fase 3 antes de construir, e (2) o próprio deploy — pergunte imediatamente antes de cada deploy, toda vez. Aprovação para um deploy nunca é aprovação para o próximo. O padrão é pré-visualização local.
• 🔴 Nunca: invente credenciais/chaves falsas; publique alegações que o usuário sinalizou como não verificadas sem um aviso; insira os segredos do usuário em formulários. </execution_context>

0. Escolha o PERFIL antes de qualquer outra coisa. Leia references/design-profiles.md e declare-o em uma linha: "Perfil: creative-portfolio. Teto de tamanho de exibição flexível, proibição de serifa, piso de scrim, móveis de conversão. Piso de artesanato inalterado." O padrão é local-service; creative-portfolio cobre fotógrafos, designers e artistas; personal-agency é o de Adam. O perfil decide quais das regras estéticas de Adam estão em vigor — o piso de artesanato nunca se flexiona, então corpo de 16px, contraste 4,5:1, toques de 44px, movimento reduzido, esquema, as dezesseis tags sociais e os cabeçalhos de segurança se aplicam independentemente do que a descrição ou um site de referência fizer. Errar isso produz um site de comércio vestindo as fotografias de um portfólio.

1. Leia references/page-composition.md primeiro (é a diferença entre uma página que parece projetada e uma que parece vazia), depois invoque frontend-design antes de qualquer marcação (instalada → use-a; senão leia references/frontend-design.md — a habilidade completa, incluída na íntegra, então você obtém suas orientações completas mesmo offline).

2. Invoque design-taste-frontend. Declare sua leitura de design em uma linha ("Lendo isto como: <tipo de página> para <público>, com uma linguagem …") e defina os três dials. Use os padrões e predefinições da habilidade de gosto. A única exceção: seu desbloqueio de movimento perpétuo em MOTION_INTENSITY > 5 permanece desligado — sem pulsação, brilho, flutuação, máquina de escrever ou loops infinitos. Pule sua seção de pilha React/Tailwind em builds estáticos.

3. Impeccable já está em execução: seu gancho dispara em cada gravação. Seus comandos são a barreira da Fase 7.

Em seguida, use references/aesthetics.md como auxiliar de tema/tipo/derivação de layout. Este é o portão anti-sujeira e a maior alavanca de qualidade. Comprometa-se com uma direção ousada e específica para a descrição:

• Uma estética clara, executada com precisão; uma combinação de fontes distinta (nunca Inter/Roboto/Arial); uma paleta coesa como variáveis CSS.
• A estrutura — quais seções, qual hierarquia, o único momento memorável — derivado da descrição. Não reutilize a forma do último site.
• Quais capacidades se encaixam e quais deixar de fora (veja o mapa de Referências). Uma descrição simples pode não usar nenhum dos efeitos pesados; uma flagship pode usar vários. Escreva uma breve descrição de design de 3–5 linhas para levar ao plano.

O gancho do Impeccable dispara em cada gravação. Resolva suas descobertas conforme aparecem, não em uma pilha no final — cada uma é corrigida ou explicitamente classificada como um falso positivo com uma razão declarada. Nunca suprima uma regra inline para evitar corrigi-la; supressão precisa da confirmação de Adam. Após ~6 edições ele fica quieto para evitar ruído, é por isso que a auditoria da Fase 7 é uma barreira rígida separada.

Página única vs. várias páginas. Uma página única é enviada como um único index.html. Uma descrição com públicos distintos ou profundidade real (um site de negócios com seções de paciente / médico / preços / sobre, um site de marketing com uma página de Ciência) merece um conjunto multipágina — arquivos *.html separados compartilhando um mesmo chrome. Sem etapa de build, os blocos compartilhados são copiados manualmente, então deriva é um bug real: mantenha o <head> (incl. o trecho de tema sem FOUC), nav, footer e tags <script> idênticos byte a byte em todas as páginas, e verifique por hash antes do deploy — uma página que diverge silenciosamente (fontes diferentes, uma alternância ausente, um link quebrado) é a falha clássica. Dê a cada página seu próprio canonical/og:url auto-referencial + <title>/descrição, emita um sitemap.xml + robots.txt, e noindex quaisquer páginas de mockup privadas/de aplicativo. Se a contagem de páginas ou o tamanho dos blocos compartilhados tornar a cópia manual frágil, uma pequena etapa de inclusão (concatenação Node, ou Eleventy/Astro) é uma troca justa — mas apenas quando a descrição justificar; padrão é sem build.

Em seguida, três portões mecânicos, todos já pegaram defeitos reais enviados:

python3 <skill>/scripts/audit-seo.py        # SEO, SEO local, segurança. exit 1 em ALTO
python3 <skill>/scripts/check-crops.py      # object-fit:cover descartando o assunto
python3 <skill>/scripts/colour-system.py    # um tratamento por fotografia, em todo o site

E clique em cada elemento interativo em um navegador real, afirmando uma mudança de estado. Um FAQ, uma barra de filtros e um painel de mapa já foram enviados com marcação completa, CSS completo e nenhum manipulador: nada parece quebrado no código-fonte. Use document.elementFromPoint no centro do próprio controle, não .click(), que pula o teste de hit e passa em um controle que está completamente enterrado.

Se algo parecer instável, RASTREIE-O, não amostre-o. performance_start_trace em seguida, role, depois performance_analyze_insight("ForcedReflow") nomeia a função offensora por arquivo e linha. A amostragem de taxa de quadros tem mais ou menos dez pontos de variância e fará você ir atrás da coisa errada. Veja scroll-performance.md.

Portão da pilha de design — rígido, antes do deploy, sem exceções:

1. /impeccable critique (revisão de UX) depois /impeccable audit (a11y, perf, responsivo).
2. Cada descoberta corrigida, ou classificada como falso positivo com uma razão declarada. Nunca suprimir inline. Supressão precisa da confirmação de Adam.
3. Execute a lista de verificação pré-voo da própria habilidade de gosto (sua Seção 14).
4. Grep no CSS por animações infinite e box-shadow tingido, e neutralize ambos. Isso pega a única configuração da habilidade de gosto que deliberadamente substituímos.

O padrão é LOCAL. Visualize com python3 -m http.server 8080 no diretório de build e itere lá. Não faça deploy a menos que o usuário peça naquele momento — uma URL ao vivo só se justifica para um cliente pagante ou uma demonstração agendada, e cada deploy custa créditos Netlify (38 deploys em um site exauriram uma cota mensal e forçaram uma atualização paga). Agrupe cada correção pendente em UM deploy por rodada de revisão.

O QA móvel é adiado para o primeiro deploy real — não pode ser feito localmente e o navegador de automação não pode emular uma viewport móvel real. Planeje uma passagem móvel dedicada no momento da demonstração, em vez de fingir que foi verificada antes.

NUNCA faça deploy da raiz do projeto. .netlifyignore NÃO é honrado por netlify deploy --dir, e fazer deploy de uma raiz uma vez publicou o ENDEREÇO RESIDENCIAL de um cliente e uma SENHA de rastreador em toda a frota. Construa um diretório de publicação explícito e verifique a superfície ao vivo, toda vez:

python3 scripts/make-dist.py .        # publica apenas arquivos web, retém .py/.md/package.json
netlify deploy --prod --dir dist
scripts/verify-published.sh <host> [nome-da-rua-do-proprietário]   # deve imprimir "limpo"; saída não zero = vazamento

Quando o usuário aprovar, faça o deploy com scripts/deploy-netlify.sh (references/deploy.md) — Netlify é a única coisa instalada no final; habilite Forms (ignore_html_forms) + o gancho de notificação se houver um formulário. Em seguida, configure o Cloudflare Web Analytics por padrão (o usuário geralmente o quer): peça um token beacon para o hostname implantado, injete o snippet antes </body> sem SRI (Cloudflare o rotaciona — a exceção documentada), e reimplante. No modo auto, apresente-o como um item "precisa do usuário" com o hostname exato. Detalhes em references/deploy.md. Relate a URL ao vivo, o que foi usado e (no modo auto) a lista de Pulados / atualizar depois.

Mapa de referência

…

[truncado para tradução]