Communitygithub.com

AdityaPratamaS18/website-skill

Construa um site Next.js completo e otimizado para SEO para um cliente ou empresa, a partir de um briefing até uma versão pronta para lançamento.

O que é website-skill?

Esta skill cria um site completo para um cliente, seguindo um processo estruturado em fases: desde a análise do briefing e pesquisa de palavras-chave, até a construção das páginas, revisão e lançamento. Ela garante que o site seja otimizado para SEO, com um plano de site aprovado que controla rotas, títulos, descrições e o sitemap. A skill suporta sites estáticos e dinâmicos (com servidor), usando Next.js como framework. O processo inclui verificações (gates) em cada fase para garantir qualidade e evitar riscos legais, como a invenção de fatos. É ideal para desenvolvedores que precisam de um fluxo de trabalho confiável e repetível para criar sites profissionais.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AdityaPratamaS18/website-skill/tree/HEAD/skills/website-skill
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

Skill de site: procedimento

Esta skill cria um site para um cliente a partir de um briefing. Cada cliente recebe um plano aprovado, uma base de código e um script de verificação. O plano aprovado controla as rotas, os títulos, as descrições, os cabeçalhos e o sitemap.

Neste documento, <skill-dir> é a pasta que contém este arquivo, e <client-folder> é a pasta para este cliente. Se o usuário não tiver uma convenção de pastas, use clients/<client>/.

Pré-requisitos

  1. Leia as anotações para este cliente, se existirem. Forneça ao usuário as regras que se aplicam, em 2 ou 3 linhas.
  2. Encontre o briefing, o perfil da empresa, o logotipo e as fotos.
  3. Certifique-se de que Node.js, Python 3 e rsync estejam disponíveis.

AVISO: NÃO COLOQUE UM FATO NO SITE SE O BRIEFING NÃO O FORNECER. UM CERTIFICADO, NOME DE CLIENTE, NÚMERO OU DEPOIMENTO INVENTADO É UM RISCO LEGAL E DE CONFIANÇA PARA O CLIENTE.

Fase 1: Fatos

  1. Leia references/brief-intake.md.
  2. Leia cada arquivo fonte por completo.
  3. Escreva <client-folder>/site-brief/facts.md.
  4. Rastreie o site atual se o cliente tiver um. Registre cada URL para o mapa de redirecionamento.
  5. Escreva <client-folder>/site-brief/questions-for-client.md se faltarem fatos.

PORTÃO 1. Mostre ao usuário o resumo da ficha de fatos e a lista de lacunas. Pare até o usuário responder. Continue com as lacunas apenas se o usuário concordar. Uma página que precisa de um fato faltante fica fora do plano ou permanece sem esse fato.

Fase 2: Plano do site

  1. Leia references/site-plan.md.
  2. Faça a pesquisa de palavras-chave para o mercado do cliente.
  3. Copie <skill-dir>/assets/site-plan.template.json para <client-folder>/site-brief/site-plan.json.
  4. Preencha uma entrada para cada página.
  5. Compare o plano com a proposta, se existir. Cada item no escopo deve ter uma página ou um recurso. Um formulário no escopo precisa de hospedagem server ou uma substituição acordada.
  6. Execute o portão do plano. Corrija cada FALHA.
python3 <skill-dir>/scripts/site_gate.py plan <client-folder>/site-brief/site-plan.json

PORTÃO 2. Mostre ao usuário uma tabela com estas colunas: URL, palavra-chave primária, volume mensal, título. Também informe a escolha de hospedagem. Pare até o usuário aprovar. Em seguida, escreva a aprovação no plano como "approved_by" e "approved_on". O portão de build falha sem esses campos.

Fase 3: Estrutura

  1. Selecione a pasta <client-folder>/website/.
  2. Execute o script de estrutura. O script funciona com espaços e letras maiúsculas no caminho.
bash <skill-dir>/scripts/scaffold.sh "<client-folder>/website" static
  1. Use server no lugar de static apenas se o plano precisar de um recurso de servidor (consulte references/launch.md).
  2. Copie o site-plan.json aprovado para src/lib/site-plan.json.
  3. Substitua cada valor __FILL em src/lib/site.ts por um valor da ficha de fatos.
  4. Leia os guias para metadados, imagens, fontes e exportações estáticas em node_modules/next/dist/docs/01-app/.

NOTA: O Next.js muda entre versões principais. Os guias em node_modules correspondem à versão instalada. Seus dados de treinamento não correspondem.

Fase 4: Direção de design

  1. Leia references/design-and-copy.md.
  2. Crie os tokens de cor e tipo a partir do logotipo. Coloque-os em globals.css.
  3. Crie public/logo.webp, public/og.webp (1200 por 630 pixels) e src/app/icon.png a partir do logotipo.
  4. Construa o cabeçalho, o rodapé e apenas a página inicial.
  5. Inicie a pré-visualização. Use npx serve out -l 3210 para um site estático, após um build. Use npm run dev para um site de servidor.
  6. Abra http://127.0.0.1:3210 em um navegador. Verifique a página em 375, 768 e 1280 pixels.

NOTA: Um navegador embutido pode retornar HTTP 431 para localhost. O endereço 127.0.0.1 não tem essa falha.

PORTÃO 3. Mostre ao usuário a página inicial. Pare até o usuário aprovar o design. Todas as outras páginas usam este design.

CUIDADO: NÃO CONSTRUA AS OUTRAS PÁGINAS ANTES DO PORTÃO 3. UMA MUDANÇA TARDIA NO DESIGN CAUSA UMA MIGRAÇÃO DE TODAS AS PÁGINAS.

Fase 5: Páginas

  1. Leia references/seo-build-spec.md.
  2. Coloque o conteúdo em arquivos de dados tipados em src/lib/ (por exemplo, services.ts). Mantenha os arquivos de página enxutos.
  3. Use uma rota dinâmica com generateStaticParams para cada tipo de página repetido.
  4. Obtenha cada título, descrição e H1 do plano com pageMetadata() e getPage().
  5. Escreva o texto para o comprador, na voz do cliente. Use apenas fatos de facts.md.
  6. Adicione links internos conforme a especificação.
  7. Construa o site.
npm run build
  1. Execute o portão de build. Corrija cada FALHA em sua causa. Não altere o portão para obter aprovação.
python3 <skill-dir>/scripts/site_gate.py build <client-folder>/website
  1. Execute npx tsc --noEmit e npm run lint.

Fase 6: Revisão

  1. Verifique cada tipo de página no navegador em 375, 768 e 1280 pixels.
  2. Verifique cada CTA: telefone, WhatsApp, e-mail e formulário.
  3. Se o usuário exigir, prepare o texto da página para o cliente em um documento. Siga references/design-and-copy.md.
  4. Implante uma pré-visualização apenas quando o usuário solicitar. Um build de pré-visualização não é indexável.

PORTÃO 4. Forneça ao usuário a URL de pré-visualização e o resultado do portão. Pare até o usuário aprovar o lançamento.

Fase 7: Lançamento

  1. Leia references/launch.md.
  2. Construa com SITE_INDEXABLE=1.
  3. Execute o portão de build com --release. O portão deve passar.
  4. Execute as etapas de lançamento em references/launch.md.

AVISO: NÃO CONECTE O DOMÍNIO OU ENVIE PARA PRODUÇÃO SEM UMA APROVAÇÃO NA SESSÃO ATUAL. O DOMÍNIO ATIVO AFETA OS NEGÓCIOS DO CLIENTE.

Encerramento

  1. Forneça ao usuário uma lista das ações do cliente que permanecem.
  2. Registre caminhos, decisões e lições nas anotações deste cliente.
  3. Informe ao usuário que o site está pronto para trabalho de conteúdo de SEO.

Regras fixas

RegraMotivo
Uma URL para cada serviçoUm site de uma página não dá a um serviço uma URL que possa ranquear
Uma palavra-chave primária para cada URLDuas páginas em uma palavra-chave competem entre si
O plano é a única fonte para títulos e rotasO portão compara o HTML construído com o plano
Sem contadores animados de estatísticasO HTML mostra 0 antes do script ser executado
Portões são scriptsCada falha que os scripts capturam passou primeiro por uma pessoa

Referências

ArquivoLeia em
references/brief-intake.mdFase 1
references/site-plan.mdFase 2
references/design-and-copy.mdFase 4 e Fase 6
references/seo-build-spec.mdFase 5
references/launch.mdFase 2 (hospedagem) e Fase 7

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community