Arnie936/site-incrível

Site Incrível

Padrões

• O idioma do site é inglês, a menos que o usuário solicite explicitamente outro idioma. Isso inclui navegação, cabeçalhos, corpo do texto, botões, formulários, validação e mensagens de sucesso, texto alternativo, rótulos de acessibilidade, metadados e downloads gerados. Defina <html lang="en"> (ou a tag regional correspondente, como en-GB, quando o mercado-alvo assim o exigir). Preserve nomes próprios.
• Gere e edite imagens rasterizadas com a ferramenta integrada image_gen do Codex por padrão. Siga a skill de imagegen disponível e o schema atual da ferramenta. Nenhuma chave de API de imagem externa é necessária. Use os assets fornecidos quando apropriado.
• Para vídeos gerados, a API oficial do Higgsfield é o padrão e kie.ai é a segunda opção. Respeite a escolha do usuário; caso contrário, use COOL_WEBSITE_VIDEO_PROVIDER (padrão higgsfield). Higgsfield usa o fluxo de trabalho REST em references/higgsfield-api.md; KIE usa scripts/kie.mjs shot. Se o usuário ainda não tiver uma conta Higgsfield, aponte-o para https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus para se inscrever. Configure apenas o provedor selecionado usando .env.example. Nunca mude de provedor silenciosamente nem use nenhum deles como substituto para geração de imagens.
• Todo o controle do navegador e verificação visual usam o navegador integrado através de mcp__cua_repl.
• Ofereça SEO opcional baseado em DataForSEO imediatamente após a primeira rodada de entrevista, antes de definir a estrutura da página, escrever o texto ou gerar assets. Siga references/seo-dataforseo.md quando escolhido. Mantenha HTML semântico básico e metadados mesmo quando a pesquisa for recusada.
• Site Incrível é o nome da skill, não a marca do cliente. Não adicione branding da skill, créditos do criador, nomes de marca de amostra ou alegações de aprovação a um site. Mantenha o arquivo LICENSE fornecido com cópias do mecanismo/software.

A rolagem é o único input que todo visitante já sabe usar. Esta skill a trata como uma linha do tempo: a roda é um scrubber, a página é um filme com texto real sobreposto, e cada seção se comporta de forma diferente o suficiente para que o visitante continue rolando para descobrir o que a próxima faz.

O que você produz: um resumo da entrevista, uma gramática de página, um mapa da jornada do cliente, uma curva de emoção com um pico projetado, uma pontuação de rolagem, um movimento característico, assets gerados, página(s) HTML real(is) em um piso de design orientado por tokens, e uma tira de screenshots provando que a página se sustenta em cada posição de rolagem.

O que isso não é

Não é "gerar um flythrough e colocar texto em cima." Essa abordagem produz um dispositivo aplicado a uma página inteira, e todo site construído dessa forma é reconhecível de relance: o mesmo diorama de claymation, o mesmo texto centralizado, o mesmo contador 01 / 06, o mesmo incentivo "role para explorar". Cinco seções que se comportam de forma idêntica são uma seção mostrada cinco vezes.

Quatro regras decorrem disso, e são a espinha dorsal desta skill:

1. Variedade é o produto. Uma página usa pelo menos quatro famílias de dispositivos e nunca o mesmo dispositivo duas vezes seguidas. Leia references/devices.md.
2. O mundo é fotográfico, a menos que a marca seja genuinamente ilustrada. Diorama de clay poli-baixo macio e fosco é proibido como padrão. Leia references/worlds.md.
3. Sem cadeia contínua. Um único voo de câmera ininterrupto é a coisa mais cara e mais frágil que você pode construir, e existe apenas para esconder cortes entre cenas. Varie o dispositivo e o corte desaparece de graça, porque o visitante não está assistindo a um filme. Encadeie apenas quando o briefing for literalmente "uma jornada contínua".
4. Um mundo diferente não é uma página diferente. O kit de dispositivos varia a aparência de uma página. A estrutura é um eixo separado e precisa ser decidida deliberadamente, ou cada construção herda o mesmo esqueleto. As primeiras quatro construções fizeram exatamente isso. Leia references/uniqueness.md.

Composição do herói

Camadas dimensionais são um requisito básico para um herói de marketing premium. Planeje planos de fundo, assunto, primeiro plano e atmosfera que se movem de forma independente antes de solicitar assets. Um único fundo bonito com fades de texto não satisfaz essa preferência. A profundidade deve vir de separação visível, oclusão e diferenças controladas no movimento, enquanto o título permanece legível e a cena conta uma história clara.

Leia references/hero-depth.md antes de planejar o herói ou gerar seus assets. Ele cobre placas limpas, recortes alfa genuínos, âncoras de contato compartilhadas, tipografia entre planos, coreografia de rolagem contida, direção de arte mobile e aceitação visual. Use a composição que se adequa à gramática escolhida; não repita uma cena de exemplo ou imponha pinning em uma gramática que o proíbe. Respeite direções estáticas ou mais simples explícitas e mantenha a profundidade na composição estática quando o movimento for reduzido.

Padrão de design e entrega

Leia references/design-standard.md antes de planejar um site de marketing. Ele cobre pesquisa de marca, camadas visuais independentes, interações úteis, composição mobile e verificações finais no navegador. Esses princípios guiam uma página personalizada; não são um template de página fixo.

Passo 0: O briefing e a autoridade criativa

Estabeleça o briefing antes de gerar qualquer coisa. Reutilize respostas e assets já fornecidos. Quando o usuário delegar explicitamente a direção criativa (por exemplo, "use seu julgamento" ou "quero sair do seu caminho"), escreva um briefing "Autoral sob delegação criativa explícita" e prossiga. Cubra os oito tópicos abaixo, distinga evidências de suposições e não invente citações do usuário ou force outro ponto de verificação de entrevista/aprovação.

Caso contrário, entreviste para as decisões faltantes. Faça perguntas reais, registre as respostas e evite inferir uma marca inteira a partir do seu nome.

Inclua a oferta, o público, a ação principal do visitante e o site/domínio existente na primeira rodada quando desconhecidos. Trate os oito tópicos de design abaixo como uma lista de cobertura; agrupe tópicos relacionados e faça no máximo três perguntas curtas por rodada. Após as primeiras respostas, ofereça o Passo 0a antes de perguntar mais detalhes de design. Reutilize fatos em todo o design e nas entrevistas de SEO.

A skill é um instrumento de alcance, não um estilo de casa. O humano traz a intenção e quaisquer assets que possui; a entrevista é onde isso se transforma no tipo certo de página: um mundo ininterrupto, cenas distintas, capítulos impressos, uma superfície viva. A skill pode fazer qualquer um deles. A entrevista decide qual.

Cubra estes oito tópicos sem forçar todas as oito perguntas em uma única passagem:

1. Vibe em três a cinco palavras, mais até três referências de qualquer mídia. Um filme, uma capa de álbum, uma loja, uma revista, um jogo. Não "sites que você gosta": nomear sites é como uma página acaba parecendo um site existente.
2. A jornada de rolagem, seção por seção, nas palavras deles. O que o visitante deve ver primeiro, o que vem depois, qual é a última coisa. A sequência deles, não um menu que você ofereceu.
3. A curva de energia. Onde deve parecer calmo, onde deve parecer intenso. Uma página que é alta o tempo todo é tão plana quanto uma que é silenciosa o tempo todo.
4. Como alguém deve se sentir ao rolar, etapa por etapa, e qual é o ÚNICO momento que devem lembrar? Energia é volume. Isso é emoção, e os dois não se alinham: em uma página alta, o ato silencioso pode ser o mais intenso. A resposta etapa por etapa se torna a curva de emoção, o único momento se torna o pico. Ambos são necessários no BRIEF.md. Veja references/feel.md.
5. Uma coisa que este site deve fazer que nenhum site que eles viram faz. Esta é a semente do movimento característico. Pressione por uma resposta real; "ser memorável" não é uma.
6. O quão longe do premium-mínimo eles querem ir. Ofereça o intervalo em uniqueness.md §5: brutalista, maximalista, lúdico, retrô, denso, editorial, premium-mínimo. A resposta deles governa a família estética, não o seu gosto.
7. Um mundo ininterrupto ou cenas distintas? A página inteira deve parecer um lugar contínuo pelo qual a rolagem voa (worldflight, veja references/worldflight.md), ou como cenas, capítulos ou cortes separados? Esta é a maior bifurcação estrutural única, e é a decisão deles, não um dispositivo que você escolhe depois. Ofereça ambos claramente; nenhum é o padrão.
8. Quais assets eles já possuem? Filmagens, fotos, fotos de produtos, um kit de marca, clipes deles mesmos. Assets reais ancoram o mundo e reduzem o custo de geração; a resposta decide o que é classificado e codificado versus gerado. "Nada" é uma resposta válida e significa um mundo totalmente gerado.

Escreva as respostas em <workspace>/builds/<name>/BRIEF.md antes de qualquer planejamento de ato, nas palavras deles, não parafraseadas em prosa de marketing. Tudo a jusante lê a partir desse arquivo.

O BRIEF.md deve conter, no mínimo:

• Os oito tópicos, com respostas textuais do usuário onde fornecidas e decisões autorais claramente rotuladas onde delegadas.
• A curva de emoção. Uma linha por ato: a emoção, depois o que na tela a causa. Escrita antes de os atos existirem, adicionada à medida que a pontuação é preenchida.
• O pico. O único momento, escrito como a frase que um visitante diria a um amigo, mais em qual ato ele vive.
• A frase "conte a alguém" completa. "É o site onde ___", preenchida com uma experiência, não um nome de dispositivo.
• Qualquer silêncio autoral, para que a verificação possa distingui-lo de rolagem morta.

references/feel.md é a especificação para todos os quatro.

Se o humano estiver genuinamente inacessível e a execução for totalmente autônoma, escreva o BRIEF.md você mesmo: responda a todas as oito perguntas na voz da marca, marque o arquivo Autoral, não entrevistado no topo e diga isso no relatório final. Um briefing autoral sem delegação é um fallback. A delegação explícita acima é um fluxo de trabalho normal suportado e não requer que o humano esteja inacessível.

Passo 0a: Escolha antecipada de SEO

Após as primeiras respostas da entrevista, pergunte (no idioma do usuário): "Devo também otimizar o site para o Google? Com o DataForSEO, posso verificar termos de pesquisa relevantes e concorrentes e alimentar os resultados diretamente na estrutura e no texto da página." Ofereça: "Sim, com DataForSEO", "Apenas o básico técnico", "Depois". Pule esta pergunta se o usuário já escolheu SEO. A delegação criativa por si só não autoriza a instalação de um serviço externo ou o gasto de crédito de API.

Para sim, siga seo-dataforseo.md: complete a coleta de informações focada, conecte ou ofereça a instalação do MCP, estabeleça o orçamento de pesquisa, pesquise o mercado escolhido e, em seguida, use as descobertas ao longo da construção. Leia dataforseo-setup.md apenas para orientação de configuração/auth e crédito. Um URL de servidor sozinho é suficiente para identificar a conexão remota; a autorização da conta ainda precisa ser concluída.

Registre SEO: ativado | apenas-básico | adiado | bloqueado no BRIEF.md, mais o mercado-alvo e o orçamento se ativado. Para apenas-básico ou adiado, continue sem instalação do MCP ou pesquisa paga. Se a conexão estiver bloqueada, continue o trabalho independente de design e técnico; marque as decisões de palavra-chave como provisórias. Não apresente pesquisa DataForSEO pendente como concluída.

Bootstrap

Ambiente, não uma etapa do trabalho. Faça isso depois que a entrevista for respondida e antes do Passo 1.

Execute o preflight em vez de verificar manualmente. Ele conhece os modos de falha que, de outra forma, aparecem mais tarde como erros enganosos, principalmente um ffmpeg sem certas bibliotecas que relata um filtro ausente como um erro de sintaxe no seu comando:

node <skill>/scripts/doctor.mjs

Ele relata Node, uma construção completa do ffmpeg, a chave de API opcional e o workspace resolvido. Adicione --video apenas quando a geração de vídeo estiver planejada. Falhas obrigatórias saem com código de erro diferente de zero. O controle do navegador e a verificação usam o navegador integrado do Codex através de mcp__cua_repl; nenhum pacote separado de automação de navegador ou executável de navegador local é necessário para esta skill.

O workspace

As construções e o registro de impressões digitais vivem em um diretório, e ele é resolvido, nunca assumido:

node <skill>/scripts/workspace.mjs --ensure     # exibe o caminho, cria-o, prepara o registro

Ordem de resolução, a primeira correspondência vence:

1. COOL_WEBSITE_HOME
2. o .cool-website.json mais próximo subindo a partir do cwd, { "workspace": "..." }
3. <raiz-do-projeto>/cool-website, onde a raiz do projeto é o ancestral mais próximo que contém um .git

Portanto, uma pasta de construção é <workspace>/builds/<name>/ e o registro é <workspace>/FINGERPRINTS.md. O registro começa vazio: o portão existe para impedir que você se repita, então sua primeira construção não tem nada a limpar.

Se você já mantém construções em outro lugar, coloque um .cool-website.json na raiz do seu projeto apontando para ele e nada se move.

O resto

1. Imagens usam o modelo de imagem integrado; nenhuma chave externa é necessária. Para vídeos gerados, copie .env.example para a raiz do projeto do site como .env, preencha apenas o provedor escolhido e execute doctor.mjs --video. --provider higgsfield|kie substitui o provedor configurado para esta verificação. Higgsfield (padrão) usa HF_API_KEY_ID mais HF_API_KEY_SECRET e seu Console para saldo/preços; novas contas se inscrevem em https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus. KIE usa KIE_AI_API_KEY e scripts/kie.mjs probe. Siga references/assets.md. Registre provedor, modelo e orçamento autorizado no BRIEF.md. A filmagem fornecida não precisa de chamada de API.
2. Um kit de marca, se existir (cores, logotipo, tipo, fotos de produtos existentes). Se a marca tiver uma pasta neste repositório, leia-a antes de gerar qualquer coisa e obedeça às suas regras rígidas. Uma marca que proíbe números inventados significa sem contadores de estatísticas, por mais bons que pareçam.

Copie engine/cool-website.js, engine/cool-website.css e LICENSE para a pasta de construção. Nunca edite o mecanismo por projeto; ele é th