# Skill Aula Wireframe

> Lê a copy aprovada e cria um wireframe React + Vite funcional, monocromático, responsivo e navegável para uma landing page. Use somente quando o usuário invocar $skill-aula-wireframe. Não cria a identidade visual final nem gera imagens.

- Skill: `nitroxinteligence/skill-aula-wireframe` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add nitroxinteligence/skill-aula-wireframe`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nitroxinteligence/skill-aula-wireframe/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-wireframe

---


# Skill Aula Wireframe

Converta a copy aprovada em uma página funcional de baixa fidelidade. O wireframe deve permitir avaliar ordem, hierarquia, largura, ritmo, colunas, componentes e navegação sem distrair com identidade visual.

## Preparação obrigatória

1. Leia `references/contrato-projeto.md`.
2. Leia `.aula-site/briefing.md`, `.aula-site/copy.md` e `.aula-site/status.json`.
3. Se `copy.md` não existir ou não explicar produto, público, ação primária e seções, pare sem inventar conteúdo e encaminhe para `$skill-aula-copy`.
4. Leia `references/ambiente-react-vite.md` e verifique a pasta antes de criar o projeto.
5. Marque `wireframe` como `in_progress`.

## Ambiente e scaffold

Se ainda não houver projeto React + Vite:

1. verifique Node.js e npm;
2. trate ausência ou versão incompatível conforme a referência;
3. confirme que a pasta está segura para scaffold;
4. execute, sem pedir que o aluno digite comandos:

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

Não execute scaffold por cima de um projeto existente. Em projeto já criado, preserve o package manager, os scripts e os arquivos funcionais.

## Planejamento do wireframe

Leia `references/estrutura-wireframe.md` e crie `.aula-site/wireframe.md` antes de alterar o visual. Registre:

- ordem e `id` de cada seção;
- função da seção na decisão do visitante;
- conteúdo vindo de `copy.md`;
- estrutura de desktop e colapso mobile;
- componente ou padrão escolhido;
- CTA e âncora;
- slot de imagem com proporção e descrição, quando necessário;
- pontos ainda pendentes.

Faça perguntas somente quando duas estruturas plausíveis mudarem materialmente a leitura. Para um iniciante, apresente no máximo duas opções concretas e uma recomendação curta.

## Implementação

Crie uma página realmente executável em React com CSS nativo e poucas dependências.

### Estrutura recomendada

```text
src/
  components/
    Header.jsx
    WhatsAppButton.jsx
  sections/
    Hero.jsx
    ...uma seção por responsabilidade...
  data/
    pageContent.js
  styles/
    tokens.css
    global.css
  App.jsx
  main.jsx
```

Adapte a quantidade de arquivos ao tamanho real da página. Não crie abstrações vazias.

### Regras de baixa fidelidade

- Paleta exclusiva de branco, preto e cinzas neutros.
- Uma fonte de sistema neutra; não escolha tipografia de marca.
- Sem gradientes, texturas, sombras decorativas, glassmorphism ou animações cenográficas.
- Imagens ainda não geradas viram blocos cinza identificados, com proporção reservada e texto `[GERAR IMAGEM: ...]`.
- Diferencie hierarquia por tamanho, peso, alinhamento, largura e espaço, não por cor de marca.
- Use componentes semanticamente adequados: `header`, `nav`, `main`, `section`, `footer`, botões e links reais.
- Use um único `h1` e uma ordem de headings coerente.
- Todos os links de navegação apontam para `id`s existentes.
- O CTA principal usa o rótulo e o destino definidos na copy.
- Crie o botão fixo de WhatsApp somente com número real aprovado. Se faltar, renderize um placeholder visual não clicável e registre a pendência crítica.
- Todo layout de várias colunas tem comportamento mobile explícito abaixo de 768 px.
- Não use texto lorem ipsum nem reduza a copy para caber.

## Verificação

1. Execute `npm run build`.
2. Execute `npm run lint` quando o script existir; corrija erros, não force supressões.
3. Inicie o servidor local e informe a URL.
4. Inspecione, quando as ferramentas permitirem, aproximadamente em 390 px, 768 px e 1440 px.
5. Corrija overflow horizontal, headings quebrados, CTA escondido, navegação sem destino e blocos que se sobrepõem.
6. Não aplique o design final mesmo que o wireframe pareça “simples demais”. Essa separação é intencional.

## Entrega

Atualize `.aula-site/wireframe.md` com arquivos implementados e decisões finais. Marque `wireframe` como `complete`, `current_stage` como `design_direction` e `next_action` como:

```text
$skill-aula-design Proponha três direções visuais distintas para este wireframe.
```

Encerre com a URL local, os arquivos alterados e qualquer pendência factual. Não explique código ao aluno salvo se ele perguntar.