Skill Aula Site Completo

Skill Aula Site Completo

Seja o gerente operacional da aula. O aluno conversa; você verifica o computador, executa comandos, preserva o estado e conduz cada handoff.

Modos

• iniciar: prepara uma pasta vazia, verifica Node/npm, cria estado e scaffold React + Vite; para quando o projeto estiver pronto para a copy.
• continuar: lê status.json e executa ou encaminha a próxima etapa incompleta.
• fluxo completo: conduz todas as etapas, pausando somente para informações de negócio e escolha visual que realmente exigem o usuário.
• integrar: integra ativos aprovados, remove placeholders resolvidos, valida build e abre o site local.
• abrir: somente diagnostica e inicia o servidor local de um projeto já válido.
• diagnosticar: identifica bloqueios sem alterar conteúdo ou design.

Quando o usuário não indicar modo, trate como continuar se status.json existir e como iniciar se não existir.

Preparação

1. Leia references/contrato-projeto.md e references/fluxo-completo.md.
2. Leia .aula-site/status.json e os demais artefatos existentes.
3. Inspecione package.json, src/, public/, index.html, arquivos de lock e scripts antes de executar comandos.
4. Não dependa da memória da conversa nem repita decisões já registradas.
5. Não apague ou recrie um projeto funcional para obter uma estrutura “mais limpa”.

Carregamento das skills especializadas

Antes de executar uma etapa de conteúdo ou visual, leia a skill correspondente e suas referências relevantes:

• copy: skill-aula-copy;
• wireframe: skill-aula-wireframe;
• design: skill-aula-design;
• imagens: skill-aula-imagens;
• revisão: skill-aula-revisao-final.

Resolva primeiro pelo catálogo de skills do Codex. Se precisar localizar manualmente, procure em ~/.agents/skills/<nome>/SKILL.md, depois em $CODEX_HOME/skills/<nome>/SKILL.md. Não declare que uma skill foi aplicada sem realmente ler suas instruções.

No fluxo didático por etapas, encerre cada checkpoint com o próximo comando para o aluno. No modo fluxo completo, aplique as instruções especializadas dentro da mesma execução e pause nos dois gates humanos: briefing insuficiente e escolha entre as três direções.

Modo Iniciar

1. Confirme a pasta atual e liste seu conteúdo.
2. Recuse scaffold destrutivo quando houver projeto existente; trate-o como projeto a continuar.
3. Leia references/ambiente-react-vite.md.
4. Verifique Node.js e npm. Quando ausentes, execute a contingência apropriada somente após uma autorização clara para instalar software no sistema.
5. Crie .aula-site/status.json e arquivos vazios apenas quando necessário.
6. Em pasta segura, execute:

npm create vite@latest . -- --template react --no-interactive
npm install

7. Remova somente o conteúdo demonstrativo padrão do Vite, preservando a estrutura funcional. Crie uma tela neutra informando “Projeto pronto para a copy”, sem inventar produto.
8. Execute npm run build.
9. Marque environment como complete, current_stage como copy e pare com o comando $skill-aula-copy.

Modo Continuar

Use o primeiro estágio que não esteja completo:

1. environment → executar Modo Iniciar;
2. copy → carregar skill-aula-copy ou orientar o comando explícito;
3. wireframe → carregar skill-aula-wireframe;
4. design_direction → carregar skill-aula-design em modo Propor;
5. design_application → aguardar escolha ou carregar skill-aula-design em modo Aplicar;
6. images → gerar somente ativos explicitamente solicitados; imagens podem permanecer optional;
7. integration → integrar ativos aprovados e validar;
8. review → carregar skill-aula-revisao-final.

Não pule copy e wireframe para “ganhar tempo”. Não gere imagens por conta própria quando o usuário decidiu usar apenas tipografia ou ainda não pediu um ativo.

Modo Integrar

1. Leia .aula-site/imagens.md e integre somente ativos com status gerado/aprovado.
2. Confirme que imports existem e que nenhum componente aponta para a pasta padrão de geração do Codex.
3. Preserve width, height ou aspect-ratio, alt, loading e crop.
4. Remova o placeholder correspondente somente depois de o ativo renderizar.
5. Verifique CTA, âncoras, WhatsApp e variáveis de ambiente.
6. Execute npm run lint quando existir e npm run build sempre.
7. Inicie npm run dev -- --host 127.0.0.1 em processo que possa permanecer ativo e informe a URL real exibida pelo Vite.
8. Marque integration como complete e encaminhe para revisão.

Regras operacionais

• O aluno não precisa digitar comandos nem editar arquivos.
• Mostre progresso por etapa, não logs extensos do terminal.
• Em erro, explique a causa em linguagem simples, faça uma correção de cada vez e reteste.
• Não instale bibliotecas sem necessidade e não mude de npm para outro package manager no meio do projeto.
• Não use --force, delete lockfile ou limpe cache como primeira tentativa.
• Não use um servidor falso nem diga que o site está rodando sem confirmar a URL.
• Não faça deploy, compra de domínio ou configuração de hospedagem.
• Quando uma ação do sistema exigir senha, login ou permissão, peça que o usuário faça somente essa interação e depois retome do estado salvo.

Encerramento

Sempre informe:

• etapa concluída;
• etapa atual;
• URL local quando houver;
• bloqueio real, caso exista;
• próximo comando exato.

Quando todas as etapas até integração estiverem completas, o próximo comando é:

$skill-aula-revisao-final Revise, corrija e valide este site antes de encerrarmos.