peterfei/landing-page-skill

Habilidade de Landing Page

Esta habilidade foi projetada para ser agnóstica em relação ao agente — Claude Code, Codex CLI, Cursor, Trae, OpenClaw, Hermes Agent ou qualquer agente que suporte habilidades baseadas em markdown podem usá-la. Todas as referências a arquivos usam caminhos relativos ao diretório raiz desta habilidade.

Condições de Ativação

Ativar quando a entrada do usuário contiver qualquer uma das seguintes palavras-chave: landing page, landing page, página de produto, página de marketing, design de página inicial, single page website, página de destino.

Limites de Honestidade (Avaliação de Adequação)

Adequado:

1. Landing pages de página única para conversão (coleta de leads, orientação de registro, promoção de compras)
2. Páginas de apresentação de produto/serviço (SaaS, produto único de e-commerce, serviços de consultoria, cursos)
3. Stack tecnológico Next.js 14/15 + Tailwind CSS (fase MVP)
4. Páginas com objetivo de conversão claro (CTA)

Não adequado:

1. Sites com várias páginas ou sistemas de blog (fora do escopo de página única)
2. Aplicações completas que exigem API backend, banco de dados ou autenticação de usuário
3. Interações complexas (colaboração em tempo real, dashboards de visualização de dados, jogos)
4. Plataformas não web (mini-programas, aplicativos nativos, aplicativos de desktop)

Declaração de Limite: Esta habilidade gera código inicial de alta qualidade, que requer ajuste manual nos detalhes do texto e nos ativos da marca. Não promete "perfeição com um clique".

Protocolo de Operação em 5 Fases

Fase 1: Coleta de Requisitos

Confirme as seguintes informações com o usuário em ordem (pule se o usuário já as forneceu):

1. Produto/Serviço: O que é? Qual é a proposta de valor principal?
2. Público-alvo: Quem usará? Quais são seus pontos problemáticos?
3. Objetivo de Conversão: O que você deseja que o usuário faça? (Registrar/Comprar/Baixar/Agendar)
4. Stack Tecnológico: Confirme o uso de Next.js 14/15 + Tailwind CSS
5. Preferência de Estilo de Marca: Escolha entre 6 estilos em references/aesthetic-styles.md
6. Referência de Concorrentes: Existem landing pages de referência que você gosta? (Opcional)

Saída: Documento de resumo de requisitos (lista em Markdown), usado na Fase 2.

Fase 2: Planejamento Estratégico

1. Carregar Modelo de Setor: Selecione um modelo de references/page-templates/ com base no tipo de produto:
   • Produto SaaS → references/page-templates/saas-product.md
   • Produto único de e-commerce → references/page-templates/ecommerce.md
   • Outros → Estrutura genérica (Hero → Recursos → Benefícios → Prova Social → CTA → Rodapé)
2. Selecionar Direção Estética: Escolha um estilo de references/aesthetic-styles.md, confirme a tendência de cores
3. Estrutura de Copy: Use references/copy-formulas/ para planejar:
   • Título do Hero: Fórmula "Resultado + Público + Mecanismo" de references/copy-formulas/hero-headlines.md
   • Texto do CTA: Formato "Verbo + Benefício" de references/copy-formulas/cta-patterns.md
   • Tratamento de Objeções: Modelos de 5 tipos de objeções de references/copy-formulas/objection-handling.md
4. Mapeamento do Framework de Conversão: Mapeie o copy de 7 seções para os 11 elementos do DESIGNNAS (consulte references/conversion-framework.md)

Saída: Documento de estratégia (incluindo seleção de estilo, direção de cores, esboço de copy, tabela de mapeamento de elementos).

Fase 3: Sistema de Design

Gere Tokens de Design com base em references/design-system.md:

1. Token de Tipografia: Fonte Display, Fonte Body, escada de tamanhos de heading
2. Token de Cor: Primary / Secondary / Accent / Neutral / Background / Text (hex + variáveis CSS)
3. Token de Movimento: Animação de PageLoad, animação acionada por Scroll, interação Hover (tipo + duração)
4. Token de Layout: Tipo de Grid, escada de Espaçamento, largura de Seção, regras de layout assimétrico

Saída: Documento de Tokens de Design (pode ser copiado diretamente para tailwind.config.ts).

Fase 4: Geração de Código

Gere o código de acordo com references/tech-adapters/nextjs-tailwind.md:

1. Estrutura do Projeto: app/page.tsx, app/layout.tsx, components/, lib/utils.ts, tailwind.config.ts
2. Componentização: Cada elemento DESIGNNAS como componente independente (HeroSection, FeaturesSection, etc.)
3. Configuração do Tailwind: Estenda os Tokens do sistema de design (colors, fonts, animations)
4. Responsividade: Use breakpoints sm:/md:/lg:/xl:
5. Acessibilidade: HTML semântico, texto alt, contraste, focus-visible

Saída: Código completo e executável do projeto Next.js.

Fase 5: Validação de Qualidade (Garantia de Ciclo Fechado)

5.1 Verificação de Conversão

• Cobertura de 11 elementos: Verificar se inclui Hero, Prova Social, Recursos, Benefícios, Como Funciona, Depoimentos, Preços/CTA, FAQ, Escassez, Rodapé (pelo menos 7)
• Clareza do CTA: O texto do CTA usa o formato "Verbo + Benefício"?
• Título do Hero: Segue a fórmula "Resultado + Público + Mecanismo"?

5.2 Detecção de Anti-padrões (Verifique item por item, consulte references/anti-patterns.md)

#	Regra	Lógica de Detecção	Gravidade
1	Fonte excessivamente usada	Inter/Roboto/Arial como fonte Display	Bloqueante
2	Paleta de cores de modelo	Combinação de gradiente roxo + fundo branco	Bloqueante
3	CTA vago	CTA como Submit/Learn More/Click Here	Bloqueante
4	Falta de prova social	Sem elemento de Prova Social abaixo do Hero	Bloqueante
5	Título do Hero fraco	Começa com Welcome/nome da marca, puramente descritivo	Bloqueante
6	Falta de adaptação mobile	Sem breakpoints responsivos sm:/md:/lg:	Aviso
7	Linha de base de acessibilidade	Falta de alt/aria/HTML semântico	Aviso
8	Falta de SEO básico	Sem meta/title/tags OG	Aviso
9	Risco de desempenho	Imagens grandes não otimizadas, falta lazy load	Aviso
10	Consistência de Token	Cores codificadas/espaçamento não padrão	Aviso

5.3 Ciclo de Correção Automática (Regras Bloqueantes)

Quando as regras bloqueantes (1-5) não são aprovadas, execute automaticamente o ciclo de correção:

1. Para cada regra bloqueante não aprovada, gere código de correção específico
2. Substitua apenas o código da Seção que acionou a regra (não modifique seções não relacionadas)
3. Execute novamente a detecção dessa regra
4. Repita os passos acima, no máximo 3 rodadas
5. Se ainda não for aprovado após 3 rodadas → Relate o motivo da falha e deixe a decisão com o usuário

5.4 Validação de Padrões Positivos (Sugestivo, consulte references/positive-patterns.md)

#	Padrão	Lógica de Detecção
P1	CTA Verbo+Benefício	O texto do CTA corresponde ao formato "Verbo + Benefício específico"
P2	Hero Resultado+Público	O título contém um resultado quantificável + público-alvo
P3	Elemento de prova social	A página inclui ≥1 tipo de prova social
P4	Urgência/Escassez	Presença de elemento de urgência de vagas/tempo/preço

Padrões positivos não acionam correção automática, apenas fornecem sugestões de otimização no relatório.

Saída: Relatório de detecção (tabela Markdown de anti-padrões + padrões positivos) + resumo de correções automáticas (se houver correções).

Fase 5.5: Otimização Iterativa (Opcional)

Após a conclusão da Fase 5, ofereça ao usuário 3 opções:

A) Aceitar — Produza o código completo final do projeto B) Modificar Seção Especificada — O usuário informa a Seção a ser modificada e os requisitos de modificação C) Regenerar Seção Especificada — O usuário especifica a Seção para regenerar do zero

Regras de Iteração:

• Modificação/Regeneração afeta apenas a Seção especificada pelo usuário (granularidade de Seção)
• Após cada modificação, re-detecte as regras de anti-padrão relacionadas àquela Seção
• No máximo 3 rodadas de iteração; após o limite, produza a versão atual
• Cada rodada gera um log de alterações: "Rodada N: Modificadas [Seções], Verificadas Novamente [Regras]"

Índice

Adaptadores de Stack Tecnológico

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

Modelos de Setor

• Página de produto SaaS → references/page-templates/saas-product.md
• Página de produto de e-commerce → references/page-templates/ecommerce.md

Biblioteca de Fórmulas de Copy

• Título do Hero → references/copy-formulas/hero-headlines.md
• Padrões de CTA → references/copy-formulas/cta-patterns.md
• Tratamento de Objeções → references/copy-formulas/objection-handling.md

Referências de Design

• Framework de Conversão → references/conversion-framework.md
• Sistema de Design → references/design-system.md
• Estilos Estéticos → references/aesthetic-styles.md
• Detecção de Anti-padrões → references/anti-patterns.md
• Detecção de Padrões Positivos → references/positive-patterns.md

Notas de Adaptação para Diferentes Ambientes de Agente

Esta habilidade foi projetada para ser agnóstica em relação ao agente, compatível com os seguintes runtimes:

Runtime	Suporte	Notas
Claude Code	Suporte nativo	Recomendado, ativação via /agent ou palavra-chave
Codex CLI	Compatível	Carregue SKILL.md diretamente
Cursor	Compatível	Copie para .cursorrules ou use o Composer
Trae	Compatível	Carregue SKILL.md diretamente
OpenClaw	Compatível	Siga o protocolo skills.sh
Hermes Agent	Compatível	Carregue SKILL.md diretamente
Outros runtimes de habilidade baseados em markdown	Compatível	Qualquer runtime que suporte YAML frontmatter + Markdown

Padrão de Caminhos

Todas as referências a arquivos usam caminhos relativos ao diretório raiz desta habilidade:

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

O agente ou usuário resolve com base no local de instalação, sem depender de nenhum caminho absoluto.

Princípio de Autossuficiência

O SKILL.md contém todas as informações necessárias e pode ser copiado e usado diretamente. Os arquivos em references/ são complementos de conhecimento aprofundado, carregue conforme necessário.

Esta habilidade segue o protocolo aberto Agent Skills.