subhannaeem/wp-build-complete-website

Construir um site WordPress completo

Uma descrição para dentro, um tema de blocos pronto para fora. Esta skill executa as outras skills wp-* em ordem. Cada portão deve terminar antes do próximo começar.

Portão 0: Brief (parada obrigatória)

A partir da descrição do usuário, escreva SITE_BRIEF.md com:

• Propósito e público-alvo, tom da marca, cores e fontes (sugira padrões se nenhum for fornecido).
• Lista de páginas (padrão: Home, Sobre, Serviços ou Produtos, Blog, Contato).
• Funcionalidades (formulário de contato, blog, galeria, loja). Apenas o que o usuário solicitou.
• Suposições, numeradas, cada uma com seu valor padrão.

Mostre-o ao usuário e peça que ele aceite, rejeite ou aconselhe. Pare e aguarde.

Portão 1: Configuração do projeto

1. Trabalhe em uma nova pasta (o nome escolhido pelo usuário). Nunca toque nos arquivos de um site existente.
2. Crie um tema de blocos: style.css, theme.json, templates/, parts/ (cabeçalho, rodapé), patterns/, assets/, functions.php.
3. Use blocos e padrões principais do WordPress. Sem construtor de páginas, sem framework CSS.
4. Teste local opcional: WordPress Playground ou wp-env se disponível.

Portão 2: Sistema de design (wp-responsive-fluid-design)

Defina cores, escala tipográfica fluida e tokens de espaçamento em theme.json. Construa cabeçalho, rodapé, navegação e um menu móvel. Todos os valores vindos dos tokens.

Portão 3: Páginas e conteúdo

Crie templates e padrões para cada página do brief. Use texto de placeholder claro (não lorem ipsum quando o propósito é conhecido) e imagens com texto alt. Use HTML semântico: um h1 por página.

Portão 4: Movimento (wp-animated-block-theme)

Adicione efeitos de revelação ao rolar, hover e transição de página com CSS primeiro, depois a Interactivity API. Tudo respeita prefers-reduced-motion; o conteúdo permanece visível sem JS. Use wp-gsap-lottie-integration apenas se um efeito solicitado precisar dele.

Portão 5: Verificações

1. wp-motion-performance-audit: corrija itens Altos (animação que causa layout, mudança de layout, scripts pesados).
2. wp-accessible-ui-review: corrija itens Altos (foco, contraste, rótulos, cabeçalhos).
3. Verifique em 360, 768, 1024 e 1440 px: sem rolagem horizontal.
4. Valide: php -l nos arquivos PHP, validade JSON em theme.json.

Portão 6: Entrega

Escreva um README.md curto na pasta do tema: como instalar (zipar e fazer upload), como editar páginas e o que não foi verificado (Lighthouse ao vivo, dispositivos reais, leitor de tela, hospedagem). Não afirme mais do que foi executado. Não faça deploy, push ou commit a menos que o usuário peça.

Regras

• Nenhum segredo, chave de API ou caminho absoluto local em qualquer arquivo.
• Adicione apenas plugins que o usuário aprovou; prefira nenhum.
• Use conteúdo placeholder genérico; nunca dados pessoais ou de cliente reais.
• Mantenha cada alteração rastreável ao brief.