---

name: project-briefing description: > Briefing completo para criação de sites institucionais e landing pages com React + Next.js e Tailwind CSS v4. Ativar quando o usuário mencionar: novo projeto, criar site, criar landing page, site institucional, briefing, começar projeto. Conduz perguntas em etapas, aguarda respostas e só executa após briefing completo. NÃO ativar para tarefas isoladas como corrigir bug, revisar código ou ajustar componente existente. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Project Briefing — Sites Institucionais & Landing Pages

Filosofia: Perguntar antes de assumir. Entender antes de criar. Executar só quando o contexto estiver completo. Idioma: Sempre responder em Português do Brasil.

---

🚦 Regra de Ativação

Ativar esta skill quando o usuário mencionar:

• "novo projeto", "criar site", "criar landing page"
• "site institucional", "página de vendas"
• "briefing", "começar projeto", "quero um site"

NÃO ativar para: correção de bugs, revisão de código, ajustes pontuais em projeto já existente.

---

🎯 Fluxo Obrigatório

FASE 1 → Briefing de Negócio       (perguntas 1-5)
FASE 2 → Briefing Visual           (perguntas 6-10)
FASE 3 → Briefing Técnico          (perguntas 11-13)
FASE 4 → Confirmação e Resumo      (mostrar tudo ao usuário)
FASE 5 → Execução                  (só após aprovação)

⚠️ NUNCA pule para execução sem completar todas as fases. ⚠️ Faça no máximo 2 perguntas por mensagem para não sobrecarregar.

---

FASE 1 — Briefing de Negócio

Objetivo: entender o contexto, público e meta do projeto.

Pergunta 1 — Tipo de Projeto

"Que tipo de projeto vamos criar?
1. Site Institucional (apresentar empresa, serviços, contato)
2. Landing Page (foco em conversão, captura de lead ou venda)
3. Ambos (site com página de conversão dedicada)"

Pergunta 2 — Empresa e Segmento

"Me conta sobre a empresa:
- Nome da empresa
- Segmento/nicho (ex: clínica odontológica, academia, advocacia)
- O que ela faz em uma frase"

Pergunta 3 — Público-Alvo

"Quem é o público-alvo principal?
- Faixa etária
- Gênero (se relevante)
- Perfil (ex: mães de 30-45 anos, empresários B2B, jovens universitários)"

Pergunta 4 — Objetivo Principal

"Qual é o objetivo principal do site/página?
1. Gerar leads (formulário, WhatsApp)
2. Vender produto/serviço diretamente
3. Apresentar a empresa e gerar credibilidade
4. Outro (descreva)"

Pergunta 5 — Diferenciais e Tom de Voz

"Quais são os 2-3 principais diferenciais da empresa?
E como ela se comunica com os clientes?
1. Formal e profissional
2. Descontraído e próximo
3. Técnico e especialista
4. Outro"

---

FASE 2 — Briefing Visual

Objetivo: definir identidade visual e estilo antes de qualquer código.

Pergunta 6 — Identidade Visual Existente

"A empresa já tem identidade visual?
1. Sim, tenho logo + cores + fontes definidas (me passa os dados)
2. Tenho só o logo
3. Não tenho nada ainda (vou sugerir)"

Pergunta 7 — Paleta de Cores

"Se já tem cores definidas, me passa os códigos hex.
Se não tem, qual direção prefere?
1. Tons frios (azul, verde, cinza) — transmite confiança/saúde
2. Tons quentes (laranja, vermelho, amarelo) — energia/urgência
3. Tons neutros (preto, branco, bege) — luxo/minimalismo
4. Colorido/vibrante — criatividade/jovem
5. Me surpreenda com base no segmento"

Pergunta 8 — Estilo Visual

"Qual estilo visual combina com a marca?
1. Minimalista e clean — muito espaço em branco, tipografia forte
2. Moderno e bold — cores vibrantes, elementos gráficos
3. Corporativo — sério, profissional, estruturado
4. Orgânico/humanizado — fotos reais, elementos naturais
5. Futurista/tech — gradientes, dark mode, elementos geométricos"

Pergunta 9 — Referências Visuais

"Tem algum site que você gosta do visual e quer como referência?
(pode ser de qualquer segmento, não precisa ser concorrente)

Se não tiver referência, tudo bem — vou criar com base no briefing."

Pergunta 10 — Modo de Cor

"Preferência de tema?
1. Claro (fundo branco/claro)
2. Escuro (fundo preto/escuro)
3. Claro com opção de alternar para escuro"

---

FASE 3 — Briefing Técnico

Objetivo: definir stack, integrações e estrutura de páginas.

Pergunta 11 — Estrutura de Páginas

"Quais páginas/seções o projeto precisa?

Para Site Institucional, o comum é:
- Home, Sobre, Serviços, Portfólio, Depoimentos, Contato

Para Landing Page, o comum é:
- Hero, Benefícios, Como Funciona, Prova Social, FAQ, CTA Final

Me confirma o que precisa ou ajusta conforme necessário."

Pergunta 12 — Integrações

"Vai precisar de alguma integração?
1. Formulário de contato (qual destino? email, CRM?)
2. WhatsApp (botão flutuante, CTA direto)
3. Google Analytics / Tag Manager
4. Pixel do Facebook/Instagram
5. Outras integrações (descreva)"

Pergunta 13 — Conteúdo

"O conteúdo (textos e imagens) já está pronto?
1. Sim, tenho tudo pronto
2. Tenho parte do conteúdo
3. Não tenho nada (vou precisar de sugestões de copy)

Para imagens:
1. Tenho fotos profissionais da empresa
2. Vou usar banco de imagens (Unsplash, Pexels)
3. Vou usar ícones/ilustrações"

---

FASE 4 — Confirmação e Resumo

Após coletar todas as respostas, montar e apresentar o resumo completo:

## 📋 Resumo do Briefing

**PROJETO**
- Tipo: [Site Institucional / Landing Page / Ambos]
- Empresa: [Nome] — [Segmento]
- Objetivo: [Objetivo principal]

**PÚBLICO**
- Perfil: [Descrição do público]
- Tom de voz: [Formal/Descontraído/etc]
- Diferenciais: [Lista dos diferenciais]

**VISUAL**
- Paleta: [Cores definidas ou direção escolhida]
- Estilo: [Minimalista/Bold/Corporativo/etc]
- Modo: [Claro/Escuro/Ambos]
- Referência: [Site de referência ou "sem referência"]

**TÉCNICO**
- Stack: React + Next.js + Tailwind CSS v4
- Páginas/Seções: [Lista das seções]
- Integrações: [Lista das integrações]
- Conteúdo: [Status do conteúdo]

---
✅ Posso começar a execução com base nesse briefing?
Se quiser ajustar algo, me diga agora antes de começarmos.

⚠️ Aguardar confirmação do usuário antes de prosseguir.

---

FASE 5 — Execução

Só iniciar após o usuário confirmar o briefing.

Ordem de Execução

1. CONFIG     → Configurar @theme no Tailwind com tokens da marca
2. ESTRUTURA  → Criar estrutura de pastas e arquivos Next.js
3. LAYOUT     → Criar componentes base (Header, Footer, Layout)
4. SEÇÕES     → Criar cada seção na ordem definida no briefing
5. SEO        → Aplicar meta tags, title, schema markup correto
6. REVISÃO    → Checar responsividade, acessibilidade e clean code

Princípios de Execução

Design:

• Aplicar regra 60-30-10 para cores
• Mobile-first obrigatório
• Usar container queries para componentes reutilizáveis
• Evitar: bento grid genérico, hero split padrão, glassmorphism sem propósito, dark + neon como padrão

Tailwind v4:

• Configuração via @theme no CSS, não tailwind.config.js
• Tokens semânticos: --color-primary, --color-surface, etc.
• Usar OKLCH para cores quando possível
• Nunca usar @apply excessivamente

Next.js:

• App Router (não Pages Router)
• Server Components por padrão, Client Components só quando necessário
• next/image para todas as imagens
• next/font para fontes
• next/form para formulários GET (busca/filtro)

SEO:

• metadata exportado em cada page.tsx
• Um único H1 por página
• Hierarquia correta H2 → H6
• Alt text em todas as imagens
• Schema markup adequado ao tipo de página

Código:

• Componentes with responsabilidade única
• Props tipadas com TypeScript
• Nomear variáveis de forma descritiva
• Sem código duplicado

---

⚠️ Anti-Patterns a Evitar

| Proibido | Alternativa | |----------|-------------| | Começar a codar sem briefing completo | Completar todas as fases primeiro | | Assumir cores sem perguntar | Sempre perguntar ou apresentar opções | | Gerar layout genérico de SaaS | Adaptar ao segmento e público | | Purple/violet como cor padrão | Escolher com base no briefing | | Mesh gradients / aurora backgrounds | Apenas se o estilo pedir | | tailwind.config.js no v4 | Usar @theme no CSS | | Pages Router | App Router | | <img> direto | next/image |

---

📁 Estrutura de Arquivos Gerada

projeto/
├── app/
│   ├── layout.tsx          # Layout raiz com metadata base
│   ├── page.tsx            # Home
│   ├── globals.css         # @theme Tailwind + variáveis
│   └── [outras páginas]/
├── components/
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── Footer.tsx
│   └── sections/
│       ├── Hero.tsx
│       ├── About.tsx
│       └── [outras seções]/
├── public/
│   └── images/
└── lib/
    └── metadata.ts         # Helpers de SEO

---

Lembre-se: Um bom briefing evita retrabalho. Cada pergunta tem um propósito. Só execute quando tiver certeza do contexto.