# Skill Aula Site Completo

> Inicializa, retoma e integra o fluxo completo da aula em uma pasta local: ambiente, React + Vite, artefatos .aula-site, imagens, build e servidor local. Use somente quando o usuário invocar $skill-aula-site-completo. Não publica, configura domínio ou substitui decisões especializadas sem ler as skills da etapa.

- Skill: `nitroxinteligence/skill-aula-site-completo` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add nitroxinteligence/skill-aula-site-completo`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nitroxinteligence/skill-aula-site-completo/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nitroxinteligence (https://skillmd.com/u/nitroxinteligence)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/nitroxinteligence/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:

```bash
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 é:

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