tonatojustin4-sketch/barbershop-landing-page-skill

Habilidade de Landing Page para Barbearia

Ativação explícita

Gatilho principal:

/LANDINGPAGE

Alias:

/LANDINGBARBERIA

Trate comandos sem distinção de maiúsculas/minúsculas.

Exemplos:

• /LANDINGPAGE
• /LANDINGBARBERIA
• /LANDINGPAGE quiero una web para una barbería premium en Quito
• /LANDINGBARBERIA nombre: Black Crown

Quando um desses comandos for invocado:

1. Ative esta skill imediatamente.
2. Entre no Modo de Entrevista de Descoberta.
3. Primeiro, leia a mensagem atual do usuário e o contexto da conversa.
4. Pergunte apenas por informações ausentes.
5. Não inicie a implementação até que o resumo crítico do negócio esteja suficientemente completo.
6. Uma vez completo o resumo, prossiga automaticamente sem perguntar "¿Quieres que empiece?".

Blueprint mestre incluído — obrigatório

Esta skill inclui o blueprint completo de design/conversão original em:

references/master-barbershop-landing-prompt.md

Antes de planejar ou implementar a landing page, leia esse arquivo.

Trate-o como o blueprint base canônico para:

• arquitetura da página,
• estrutura de CRO (Otimização de Taxa de Conversão),
• AIDA,
• TOFU / MOFU / BOFU,
• progressão de conteúdo,
• hero,
• serviços,
• galeria,
• experiência,
• planos,
• antes/depois,
• equipe,
• depoimentos,
• Instagram/prova social,
• localização,
• FAQ,
• CTA final,
• fluxo de agendamento,
• WhatsApp,
• footer,
• comportamento responsivo,
• animações,
• performance,
• acessibilidade,
• SEO local,
• tecnologia recomendada,
• direção fotográfica,
• tom de copywriting,
• distribuição de CTAs.

Não reutilize placeholders fictícios do blueprint quando informações reais do negócio estiverem disponíveis.

O blueprint é um sistema estrutural, não uma fonte de fatos falsos do negócio.

Habilidades de design complementares

Esta skill é a orquestradora.

Antes do design visual/implementação, verifique se estas habilidades complementares já estão disponíveis:

1. Impeccable
2. Taste Skill / design-taste-frontend

Se estiverem ausentes e a execução de shell estiver disponível, instale a partir da raiz do projeto:

npx impeccable install
npx skills add Leonxlnx/taste-skill

Não reinstale se já estiverem presentes.

Se a instalação exigir aprovação, solicite apenas a aprovação necessária no ambiente.

Se a execução de shell não estiver disponível:

• continue usando esta skill,
• aplique os mesmos princípios manualmente,
• nunca afirme que as habilidades foram instaladas.

Separação de papéis

Esta skill é responsável por

• descoberta,
• compreensão do negócio,
• verdade do negócio,
• oferta,
• estratégia de conversão,
• arquitetura da página,
• AIDA,
• TOFU/MOFU/BOFU,
• CRO,
• copy,
• lógica de CTA,
• hierarquia de conteúdo,
• estratégia de ativos,
• requisitos de implementação,
• SEO,
• performance,
• acessibilidade,
• QA.

Taste Skill auxilia com

• direção visual premium,
• decisões de layout não genéricas,
• escala tipográfica,
• ritmo de espaçamento,
• personalidade dos componentes,
• linguagem de movimento,
• bom gosto no frontend.

Impeccable auxilia com

• crítica de UI,
• refinamento,
• hierarquia,
• espaçamento,
• polimento,
• consistência,
• qualidade responsiva,
• apresentação com foco em acessibilidade.

As habilidades complementares podem melhorar a apresentação, mas não devem substituir:

• as informações reais do negócio do usuário,
• restrições de marca,
• metas de conversão,
• restrições legais/éticas,
• conteúdo crítico de agendamento.

Modo de Entrevista de Descoberta

A entrevista deve ser simples para o usuário, embora o sistema interno seja avançado.

Quando pouca informação estiver disponível, faça um questionário compacto agrupado.

Não interrogue com uma pergunta por vez, a menos que apenas um fato crítico esteja faltando.

Não repita perguntas já respondidas.

A. Identidade do negócio

Pergunte sobre:

• nome da barbearia,
• cidade / bairro,
• endereço completo,
• link do Google Maps se disponível,
• horário de funcionamento,
• WhatsApp / telefone,
• email se relevante,
• Instagram,
• TikTok,
• outros perfis sociais.

B. Serviços e preços

Pergunte:

• quais serviços são oferecidos,
• preço exato de cada serviço,
• duração aproximada,
• qual serviço deve ser promovido com mais força,
• combos/pacotes,
• assinaturas,
• promoções para primeira visita,
• ofertas sazonais.

Nunca invente preços quando o negócio é real.

C. Agendamento e conversão

Pergunte:

• como os clientes atualmente agendam,
• WhatsApp / telefone / formulário / plataforma de agendamento / atendimento presencial,
• somente com agendamento, somente presencial, ou ambos,
• CTA principal,
• CTA secundário,
• se o usuário deseja um fluxo de agendamento simulado funcional quando não houver backend.

D. Público e posicionamento

Pergunte:

• cliente ideal,
• faixa etária/segmento se relevante,
• posicionamento premium / urbano / clássico / luxo / streetwear / old-school / familiar / moderno,
• o que torna a barbearia diferente,
• por que os clientes a escolhem,
• objeções comuns,
• disponibilidade de estacionamento,
• experiência do serviço,
• qualquer garantia ou segurança.

E. Identidade da marca

Pergunte:

• logotipo,
• cores,
• tipografia,
• slogan,
• símbolos visuais,
• texturas,
• detalhes característicos,
• personalidade da marca,
• clima desejado.

Exemplos:

• premium,
• masculino,
• editorial,
• cinematográfico,
• industrial,
• clássico,
• minimalista,
• luxo,
• urbano.

F. Ativos visuais reais

Peça ao usuário para compartilhar quando disponível:

• logotipo,
• fotos externas,
• fotos internas,
• fotos dos barbeiros/equipe,
• fotos de clientes,
• fotos de cortes de cabelo,
• trabalhos de barba,
• imagens de antes/depois,
• fotos de produtos,
• fotos de serviços,
• prêmios/certificações.

Priorize ativos reais em vez de imagens de banco de imagens ou geradas.

Nunca apresente pessoas/interiores gerados como equipe real, clientes ou instalações reais.

G. Depoimentos e provas

Pergunte:

• capturas de tela de avaliações,
• Google Reviews,
• depoimentos,
• classificação por estrelas,
• número de avaliações,
• menções na imprensa,
• prova social,
• citações de clientes.

Nunca fabrique depoimentos com aparência real ao construir uma página para um negócio real.

Se não houver avaliações reais disponíveis e o usuário quiser apenas um protótipo:

• marque-as internamente como placeholders,
• estruture-as para substituição posterior,
• não as represente como avaliações verificadas reais.

H. Referências visuais — pergunta obrigatória

Pergunte:

¿Tienes referencias visuales de barberías o sitios web que te gusten?

O usuário pode fornecer:

• sites,
• imagens do Pinterest,
• Behance,
• Dribbble,
• referências do Instagram,
• capturas de tela,
• moodboards,
• fotos de galerias de design,
• fotos de barbearias físicas,
• outras referências de marca.

Quando útil, pergunte o que ele gosta em cada uma:

• hero,
• tipografia,
• paleta,
• fotografia,
• menu,
• cards de serviços,
• preços,
• galeria,
• movimento,
• CTA,
• atmosfera,
• sensação geral.

Regra de referências

Use referências para extrair:

• composição,
• hierarquia,
• ritmo visual,
• densidade espacial,
• relações tipográficas,
• tratamento fotográfico,
• padrões de componentes,
• ideias de movimento,
• relações de cor,
• direção editorial.

Não copie literalmente um site de terceiros.

Não reproduza logotipos de terceiros, copy proprietário, ativos de marca únicos ou obras de arte distintas, a menos que o usuário os possua ou tenha permissão.

Entrevista compacta recomendada

Quando /LANDINGPAGE for chamado sem contexto suficiente, pergunte algo próximo a:

1. ¿Cómo se llama la barbería y dónde está ubicada?
2. ¿Qué servicios ofrece y qué precio tiene cada uno?
3. ¿Cuál es el servicio o paquete que más quieres vender?
4. ¿Cuál es el horario?
5. ¿Cómo quieres que la gente reserve?
6. ¿Cuál es tu WhatsApp, teléfono y redes?
7. ¿A qué tipo de cliente quieres atraer?
8. ¿Qué hace diferente a tu barbería?
9. ¿Qué colores, tipografías, logo y estilo visual usan?
10. ¿Puedes compartir fotos del local, barberos, clientes y trabajos?
11. ¿Tienes reseñas o screenshots de comentarios reales?
12. ¿Tienes promociones, paquetes o membresías?
13. ¿Tienes referencias visuales de webs, Pinterest, Behance, Dribbble o screenshots que te gusten?
14. ¿Hay algo que NO quieres que aparezca en la web?

Não mencione metodologia interna a menos que o usuário pergunte.

Preenchimento progressivo

Após cada resposta do usuário:

• marque os campos conhecidos internamente,
• pergunte apenas por informações críticas ausentes,
• não reinicie o questionário,
• não repita perguntas já respondidas.

Quando houver informações suficientes, prossiga automaticamente para a execução.

Resumo Interno do Negócio + Marca

Antes de projetar, construa um resumo estruturado interno:

business:
  name:
  category: barbershop
  city:
  neighborhood:
  address:
  maps_url:
  hours:
  phone:
  whatsapp:
  email:
  social:

conversion:
  primary_goal: booking
  primary_cta:
  secondary_cta:
  booking_channel:

audience:
  ideal_customer:
  positioning:
  objections:

brand:
  logo:
  colors:
  typography:
  slogan:
  visual_signatures:
  personality:

services:
  - name:
    description:
    price:
    duration:
    priority:

offers:
  packages:
  memberships:
  promotions:

assets:
  local_photos:
  team_photos:
  client_photos:
  haircut_photos:
  before_after:
  reviews:

references:
  - source:
    liked_for:

technical:
  current_stack:
  booking_backend:
  analytics:

Isso é interno a menos que o usuário peça para ver.

Adaptação do blueprint

Após o resumo do negócio estar pronto:

1. Leia references/master-barbershop-landing-prompt.md.
2. Extraia o sistema estratégico/de página completo.
3. Substitua todos os valores fictícios por dados reais do usuário quando disponíveis.
4. Remova seções irrelevantes.
5. Adicione seções específicas do negócio quando útil.
6. Preserve a jornada de conversão:
   • impacto,
   • proposta de valor,
   • serviços,
   • prova do trabalho,
   • benefícios,
   • experiência,
   • preços,
   • depoimentos,
   • equipe,
   • localização,
   • objeções,
   • agendamento.
7. Não exponha os rótulos AIDA/TOFU/MOFU/BOFU na interface do usuário.

Funil padrão

TOFU / Atenção

Típico:

• cabeçalho,
• hero,
• prova visual,
• diferencial chave,
• primeiro CTA.

MOFU / Interesse + Desejo

Típico:

• serviços,
• galeria,
• experiência,
• diferenciação,
• equipe,
• preços,
• antes/depois,
• prova social.

BOFU / Ação

Típico:

• avaliações,
• localização,
• FAQ,
• agendamento,
• WhatsApp,
• CTA final.

Adapte essa ordem quando o negócio ou as referências justificarem uma sequência melhor.

Copywriting

Tom:

• confiante,
• masculino,
• direto,
• elegante,
• premium.

Prefira:

• títulos curtos,
• linguagem concreta de serviços,
• relevância local,
• provas,
• diferenciação real,
• verbos fortes.

Evite:

• copy genérica de IA,
• clichês vagos de luxo,
• "Bem-vindo à nossa barbearia",
• superlativos não justificados,
• parágrafos longos.

Direção visual

Direção visual base do blueprint incluído:

• premium,
• masculino,
• editorial,
• moderno,
• urbano,
• sofisticado,
• cinematográfico,
• minimalista,
• exclusivo sem ser pretensioso.

Mas o branding e as referências reais do usuário têm precedência.

Evite:

• estética de template SaaS,
• gradientes azuis/roxos tecnológicos,
• cards excessivamente arredondados,
• ilustrações de desenho animado,
• ícones excessivos,
• clichês baratos de barbearia,
• poluição visual.

Estratégia de ativos

Prioridade:

1. Ativos reais fornecidos pelo usuário.
2. Ativos de marca do usuário.
3. Referências fornecidas pelo usuário como inspiração.
4. Imagens geradas decorativas/conceituais.
5. Ativos de banco de imagens apenas se necessário.

Se houver geração nativa de imagens:

• use-as para imagens decorativas ou conceituais de suporte quando útil,
• não fabrique clientes reais, membros da equipe, avaliações ou instalações reais.

Implementação técnica

Requisito de frontend dinâmico

Esta skill deve criar um frontend interativo real, não um mockup estático.

Ordem de implementação preferida:

1. Se o projeto existente já usa Next.js

   • mantenha Next.js,
   • preserve a arquitetura atual quando razoável,
   • construa a landing dentro do projeto existente.

2. Se o projeto existente já usa React

   • mantenha React quando a migração for desnecessária,
   • preserve as convenções de roteamento/build,
   • adicione a landing como componentes React prontos para produção.

3. Se nenhum projeto frontend existir

   • crie um novo projeto Next.js usando:
     • Next.js
     • React
     • TypeScript
     • Tailwind CSS
   • use o App Router a menos que o contexto do projeto exija outro.

Bibliotecas de suporte padrão quando úteis:

• Framer Motion para movimento/interações premium,
• Lucide React para ícones de UI sutis.

Não adicione dependências sem um propósito claro.

Interatividade necessária

A página deve incluir comportamento interativo real onde relevante, como:

• navegação fixa/translúcida,
• sobreposição de menu mobile em tela cheia ou animada,
• navegação suave entre seções,
• galeria/lightbox,
• comparação antes/depois,
• carrossel de depoimentos/deslize,
• acordeão de FAQ,
• modal/drawer de agendamento,
• interface de agendamento em várias etapas,
• CTA fixo mobile responsivo,
• estados de hover/foco,
• suporte a movimento reduzido.

Não implemente interações falsas que parecem clicáveis mas não fazem nada.

Arquitetura de componentes

Componentize de forma limpa. Componentes típicos:

• Navbar
• MobileMenu
• Hero
• ValueProposition
• Services
• Gallery
• Experience
• Pricing
• BeforeAfter
• Barbers
• Testimonials
• SocialProof
• Location
• FAQ
• BookingModal
• FloatingWhatsApp
• MobileStickyCTA
• Footer

Adapte os componentes ao negócio real. Não crie seções não utilizadas apenas porque existem no blueprint de referência.

Inspeção do projeto

Antes de codificar:

• inspecione a raiz do projeto,
• detecte o gerenciador de pacotes,
• inspecione package.json,
• detecte convenções Next.js/React/Tailwind,
• identifique sistema de design/componentes existentes,
• preserve convenções úteis,
• evite reescritas destrutivas.

Se o projeto estiver vazio, inicialize o frontend em vez de produzir apenas trechos HTML.

Sistema de agendamento

Se não houver backend:

• crie uma UI de agendamento simulada funcional,
• suporte seleção de serviço,
• seleção de barbeiro,
• data,
• hora,
• detalhes do cliente,
• estado de confirmação.

Nunca afirme falsamente que um agendamento foi armazenado remotamente se não houver backend.

Se houver um backend/integração real:

• use a arquitetura existente,
• preserve a lógica real de disponibilidade,
• valide estados de sucesso/falha.

WhatsApp

Se o WhatsApp for usado:

• crie um CTA de agendamento claro,
• pré-preencha uma mensagem útil quando apropriado,
• otimize para mobile,
• não invente o número de telefone.

Mapas

Quando uma URL/endereço do Maps existir:

• exiba o endereço real,
• link para direções,
• incorpore um mapa quando adequado.

SEO local

Pr...