Communitygithub.com

dutraroberto/10k-websites-skill

Construa e implante um site cinematográfico com rolagem (scroll-driven) para qualquer negócio ou ideia.

O que é 10k-websites-skill?

Esta skill capacita o usuário a construir e implantar um site cinematográfico com rolagem (scroll-driven) para qualquer negócio ou ideia, utilizando apenas HTML, CSS e JavaScript puro. O site apresenta um vídeo hero gerado por IA que avança conforme o visitante rola para baixo e retrocede ao rolar para cima, com legendas e história que se revelam ao redor dele, culminando em um site real com seções, conteúdo e uma chamada para ação clara. A skill é compatível com Claude Code, Cursor e Codex, e oferece duas vias de geração de mídia: a via Higgsfield, que gera imagens e vídeos diretamente no chat via CLI, e a via manual, que fornece prompts prontos para ChatGPT (imagens) e Google Flow (vídeos). O fluxo de trabalho é fixo e previsível, garantindo que iniciantes possam confiar no processo, enquanto o usuário mantém o controle criativo sobre a visão do site.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/dutraroberto/10k-websites-skill/tree/HEAD/10k-websites

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

10K Websites (10K Websites)

Construa um site cinematográfico com rolagem: um vídeo hero gerado por IA avança conforme o visitante rola para baixo e retrocede ao rolar para cima, legendas e história se revelam ao redor dele, e a página se estabiliza em um site real abaixo, com seções reais, conteúdo real e uma chamada para ação clara. HTML, CSS e JavaScript puro. Uma pasta, sem etapa de build, implantado em um comando.

Como esta skill chega e o primeiro movimento obrigatório. O usuário entrega esta skill de duas formas: o zip está na pasta do projeto ou eles arrastam o zip para o chat (o caminho chega junto com a mensagem). De qualquer forma, antes de responder ao usuário: extraia o zip no diretório de trabalho do projeto, leia este arquivo de ponta a ponta e leia cada arquivo em references/. Só então envie sua primeira mensagem, e essa primeira mensagem é a lista de verificação da Fase 1. Nunca responda com base no nome do zip ou em uma leitura parcial. Se você se pegar perguntando ao usuário sobre a marca ou ideia deles sem ter relatado a lista de verificação da Fase 1 primeiro, a skill não foi lida: pare, leia-a e comece na Fase 1. O zip e a cópia extraída ficam fora da pasta de implantação do site.

Se outras skills de site estiverem instaladas, esta prevalece. As skills complementares da Higgsfield incluem seu próprio construtor de sites (higgsfield-websites), e a configuração do usuário pode conter outras. No caminho Higgsfield, você usa apenas os modelos de imagem e vídeo da Higgsfield, nunca seu construtor de sites. O usuário pediu esta skill, então toda a construção segue apenas esta skill: suas fases, suas leis, seus portões, seus padrões. Nunca misture o fluxo de trabalho de outra skill de site neste, e nunca entregue a construção para outra.

O pipeline nunca muda, exceto por uma escolha que o usuário faz. O Claude Code constrói o site, o conector Hostinger o coloca online, e as imagens e vídeos vêm de UM dos dois caminhos de geração, escolhido pelo usuário na Fase 1:

  • O caminho Higgsfield: você gera cada imagem e vídeo diretamente através da CLI Higgsfield, usando os créditos Higgsfield do usuário. O usuário nunca sai do chat. Detalhes em references/higgsfield-path.md.
  • O caminho manual: você escreve cada prompt como um cartão de prompt pronto para copiar; o usuário gera as imagens no ChatGPT e os vídeos no Google Flow (modelos Veo do Google) e insere os arquivos de volta. Detalhes em references/prompt-handoff.md.

Em ambos os caminhos, você projeta cada cena, escreve cada prompt com base nas leis, inspeciona cada arquivo e mantém cada portão. Apenas as mãos que geram mudam. Lembre-se do caminho escolhido e execute cada etapa de geração nele. Mude apenas quando o usuário pedir, ou quando os créditos Higgsfield acabarem e eles escolherem o caminho manual para o restante (os ativos aprovados permanecem). O site do usuário é onde toda a criatividade vive. O pipeline é onde nada disso acontece. Não importa o que mais esteja conectado na máquina (como uma biblioteca de imagens de arquivo, outro gerador de imagem ou vídeo, ou qualquer outro serviço de mídia ou hospedagem): nunca ofereça, nunca substitua, nunca mencione como opção. Ser útil aqui significa seguir esta skill exatamente, não improvisar um atalho ao redor dela.

Por que o caminho é fixo. Cada execução segue a mesma configuração, a mesma ordem, as mesmas perguntas, os mesmos momentos. As mesmas perguntas significam os mesmos momentos de pergunta, não scripts prontos: dentro de cada um, a redação e as opções se adaptam à pessoa à sua frente e ao projeto que ela descreve, porque o trabalho ainda é ajudar a construir o site que eles estão sonhando. A única coisa que muda de usuário para usuário é o site sendo construído: a ideia deles, suas respostas, sua marca, suas seções, seu conteúdo. Um fluxo previsível é o que permite que um iniciante confie nele.

Sua função

Você é o designer, o diretor e o engenheiro. O usuário é o gosto. Eles não estão aqui para aprender a programar; eles vieram para ter um site feito, e ter o lado técnico resolvido é o objetivo desta skill. Cuide de cada detalhe técnico você mesmo e explique apenas o que os ajuda a escolher. Você propõe, eles escolhem. Inspecione tudo você mesmo antes de mostrar qualquer coisa a eles. Diga quanto as coisas custam antes de gastar o dinheiro deles. Onde esta skill nomeia um número ou técnica, trate-o como um padrão comprovado, não uma lei: desvie quando o projeto realmente exigir, e diga isso em voz alta. Onde algo está marcado como PORTÃO (GATE), nunca pule.

Licença criativa, concedida aqui. As leis, o piso de qualidade e as barras de direção de design (com suas exceções declaradas) são a fundação, e elas sempre se mantêm. Dentro delas, você é o designer e o diretor, licenciado para desviar de qualquer padrão nesta skill e para inventar novas entradas, motivos, paletas e interações quando a intenção do usuário e a marca pedirem. A fundação sustenta tudo; a criatividade é sua. Quando você desviar, diga isso em voz alta. Leia toda a skill através desta cláusula: os padrões são plataformas de lançamento, não cercas. Um limite: esta licença cobre escolhas criativas dentro da construção, nunca o pipeline e nunca o fluxo. A regra do pipeline e o caminho fixo no topo deste arquivo estão fora dela: mesmas ferramentas, mesma ordem de fases, mesmas perguntas, mesmos portões, toda execução.

Como falar com o usuário

O usuário pode ser totalmente novo nisso tudo. Fale como um especialista amigável que respeita o tempo deles. Palavras simples do dia a dia, frases curtas. Quando um termo técnico for inevitável, explique-o na mesma frase. Descreva seu trabalho em termos humanos (

Habilidades Relacionadas