LandingRabbit/landingrabbit-skills

Skill de Formato de Página LandingRabbit

Propósito

Use esta skill quando um usuário estiver escrevendo conteúdo de landing page no Claude/ChatGPT/Gemini e quiser:

• Usar o serviço LLM de sua preferência para brainstorming e criação de conteúdo e, posteriormente, trazer esse conteúdo para o LandingRabbit.
• Obter o texto em um formato markdown que o LandingRabbit possa analisar de forma confiável e transformar em uma página.
• Usar apenas tipos de seção e campos de conteúdo suportados pelo LandingRabbit, para que os usuários possam importar facilmente sua estrutura de página pronta e o texto do conteúdo para o LandingRabbit.

Tarefa passo a passo

Sua tarefa é ler o conteúdo de landing page pronto do usuário e formatá-lo no Markdown Pronto para LandingRabbit.

1. Se ainda não foi discutido no chat, peça ao usuário para fornecer um texto de conteúdo pronto para uma landing page (ex.: homepage, landing page de anúncios, página de inscrição em newsletter, página de isca digital, página de preços, etc.)
2. Revise o texto do conteúdo planejado e a estrutura da página
3. Peça mais informações ao usuário se você não tiver certeza sobre qualquer parte do conteúdo e qual tipo de seção no LandingRabbit se encaixaria melhor para cada parte do plano
4. Combine o conteúdo com as seções e itens de conteúdo disponíveis
5. Forneça sua resposta em markdown pronto para LandingRabbit seguindo os exemplos de resposta

Instruções importantes

• Forneça sua resposta como um único documento que seja fácil de copiar e colar no LandingRabbit
• Evite fazer alterações no texto do usuário e na ordem das seções
• Compartilhe apenas o markdown pronto para LandingRabbit com os tipos de seção e layouts sugeridos. Não adicione comentários ou explicações extras em sua resposta
• Os exemplos nesta skill servem apenas para mostrar a estrutura suportada. Preserve o conteúdo e o tom de voz do usuário
• Você não precisa usar todas as seções e itens de conteúdo disponíveis. Respeite o conteúdo pronto do usuário
• Use --- apenas entre seções na resposta final, nunca dentro de blocos de conteúdo de seção
• Nunca invente nenhuma das configurações de layout opcionais. Consulte as instruções do usuário e peça orientação quando necessário.
• Se o usuário estiver planejando uma postagem de blog, documento de ajuda ou qualquer outra página que seja um formato de artigo padrão, você pode usar uma única seção Custom com markdown.
• Não produza linhas apenas com URL (ex.: /schedule-a-call, https://...) como texto normal; mantenha URLs apenas dentro de links markdown [texto](url)

Seções disponíveis

• hero: A seção principal com a proposta de valor de abertura e ação de conversão primária na maioria das páginas.
• trustedBy: Seção de prova social para logotipos e conteúdo de credibilidade.
• collection: Blocos estruturados de como funciona, benefícios e listas de serviços/recursos com itens repetíveis. Esses são os layouts mais típicos em qualquer landing page.
• testimonials: Citações de prova do cliente
• pricing: Uma única oferta de serviço ou tabela de comparação de planos de preços
• steps: Processo, checklist, sequência de ações/resultados ou problemas que os clientes enfrentam. Usado apenas para listas e declarações claras e simples, não para descrever algo mais complexo que exija vários itens repetíveis.
• comparison: Comparação de contraste antes/depois ou atual/futuro. Por exemplo, mostrando como o cliente se sentia antes e depois de adquirir o serviço.
• faq: Seção de perguntas e respostas para lidar com objeções.
• cta: Seção de conversão focada, geralmente perto do final, mas às vezes também entre o conteúdo da página.
• custom: Conteúdo misto de forma livre (títulos, blocos de texto, imagem, incorporação, CTA). Tipicamente usado para seções como "Sobre nós", declarações simples (ex.: H2 e bloco de texto) ou conteúdo de página de artigo completo
• tabs: Abas clicáveis, cada uma alternando seu próprio cartão de conteúdo. Por exemplo, uma aba por público ou caso de uso.
• feed: Lista dinâmica de postagens de uma coleção do workspace (somente configuração). Mostra, por exemplo, as postagens mais recentes do blog e artigos de notícias em uma homepage.

Formato de resposta para seções

Forneça o tipo de seção em sua resposta (ex.: Section type: hero), e quando solicitado pelo usuário, configurações de layout específicas da seção.

Para cada seção, use a estrutura nativa do markdown assim:

• Eyebrow: [eyebrow]: ...
• Ícone (para itens collection + boxes-icons): [icon]: ... (deixe vazio quando o usuário deve escolher ícones na interface)
• Smallprint: [smallprint]: ...
• Título da seção ou item: #, ##, ###
• Descrição/corpo: parágrafos markdown simples
• Links CTA: um por linha (cada um em sua própria linha), ex.: [CTA Primário](url) [CTA Secundário](url)
• Imagens: ![Alt](url)
• Incorporações/formulários/widgets: blocos html cercados

Em hero, cta e collection (layout alternado), os usuários podem adicionar:

• Uma grade de caixas que mostram, por exemplo, conquistas da empresa ou detalhes sobre o serviço. Comece com uma linha [boxes], depois um título + parágrafo por caixa (### em hero/cta, #### dentro de um item de coleção alternada).
  • campos: [eyebrow]: ... (opcional), título (o cabeçalho ###/####), descrição (parágrafo), links CTA (um por linha)
• Um depoimento de um cliente ou parceiro satisfeito, apoiando o texto da seção e dando credibilidade. Comece com uma linha [testimonial].
  • campos: citação (primeira linha), nome, cargo, empresa

(Em collection, [boxes] e [testimonial] aplicam-se apenas quando suggestedLayout: alternate.)

Use --- entre seções.

Listas com Marcadores em Descrições

Em qualquer campo de descrição ou subtítulo, comece uma linha com um destes marcadores para adicionar uma lista com marcadores estilizada:

• ✅ Texto - sucesso (marca de verificação verde); benefícios, recursos, resultados positivos
• ✓ Texto - sucesso (marca de verificação simples legada); benefícios, recursos, resultados positivos
• ☑ Texto - verificação (marca de verificação simples); checklists, "o que está incluído"
• ❌ Texto (ou ✗) - destrutivo (X vermelho); problemas, pontos de dor, itens negativos
• ⭐ Texto - estrela; destaques, itens em destaque
• → Texto (ou ➡️) - seta; fluxos direcionais, "próximo passo"
• - Texto (ou *, •) - marcador padrão (ponto); listas neutras
• :palavra: Texto - um ícone personalizado por uma palavra, ex.: :foguete: Construa mais rápido. A palavra é resolvida para um ícone correspondente se houver uma correspondência confiante; caso contrário, renderiza como um ponto simples.

Misture tipos de marcadores e parágrafos regulares no mesmo campo. Linhas consecutivas com o mesmo marcador tornam-se uma lista.

Exemplo - descrição hero com marcadores de sucesso:

# Título da sua página

✅ Páginas no ar em 5 min
✅ Amado por mais de 200 equipes
✅ Compatível com GDPR

[Comece agora](/signup)

Layout Sugerido

Para seções que suportam múltiplos layouts, adicione suggestedLayout: em sua própria linha antes do conteúdo da seção.

---

Hero

• horizontal (padrão) - texto à esquerda, mídia à direita
• horizontal-reversed - mídia à esquerda, texto à direita
• vertical - texto centralizado, sem mídia ou mídia abaixo

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• mediaVisibility: all | desktop | mobile | none — mostrar ou ocultar a mídia hero por dispositivo (none a oculta)
• imageFit: fill | free-ratio — como a mídia hero preenche seu espaço

---

Steps

stepDecoration controla o ícone exibido ao lado de cada item. Adicione-o antes do conteúdo da seção.

• number (padrão) - numerado; use para etapas de processo sequenciais
• none - sem ícone; use para listas de conteúdo simples
• check - marca de verificação; use para checklists de recursos e listas "o que está incluído"
• star - estrela; use para destaques e conquistas notáveis
• arrow - seta; use para fluxos direcionais e sequências de "próximo passo"
• success - círculo preenchido com verificação; use para benefícios e resultados positivos
• destructive - círculo preenchido com X; use para problemas e pontos de dor

Se as linhas dos itens steps já começarem com marcadores emoji (por exemplo 😩, ✅, 🚀), defina stepDecoration: none. Se stepDecoration não for none, remova os marcadores emoji/ícone iniciais das linhas steps.

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• mediaVisibility: all | desktop | mobile | none — mostrar ou ocultar a mídia da seção por dispositivo
• imageFit: fill | free-ratio — como a mídia da seção preenche seu espaço
• mediaPosition: left | right — de que lado da lista a mídia fica
• stepIcon: <uma palavra descritiva ou nome exato de ícone em CamelCase> — ícone personalizado ao lado de cada etapa (substitui stepDecoration)

---

Tabs

• top (padrão) - faixa de abas acima do cartão
• left - faixa de abas em uma coluna à esquerda do cartão
• right - faixa de abas em uma coluna à direita do cartão

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• cardStyle: stacked | split — cartão como uma única pilha, ou mídia em sua própria coluna (apenas layout top)
• mediaSide: left | right — de que lado a coluna de mídia está (layout top com cardStyle: split)
• tabContentMode: expand | show-all — se apenas a aba ativa mostra sua descrição, ou todas mostram (apenas layouts left/right)
• autoplay: <segundos> | off — avanço automático das abas
• autoplayProgress: on | off — barra de progresso em movimento em cada aba
• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• imageFit: fill | free-ratio — como a mídia do cartão preenche seu espaço

---

Collection

• alternate - blocos de benefícios narrativos (cada item: título + parágrafo, lados alternados) → Por exemplo, Benefícios, Propostas de valor, Soluções, "Por que nos escolher", Exemplos de estudos de caso e Histórias de clientes
• boxes - grade de recursos com imagens por item → Por exemplo, Serviços, Recursos, Integrações, Capacidades técnicas
• boxes-text - grade de recursos somente texto, sem imagens → Por exemplo, Casos de uso, Listas de capacidades, Resumos curtos de recursos
• boxes-icons - grade de ícones (ícone tratado separadamente do conteúdo de texto) → Frequentemente destaques rápidos de recursos/serviços ou como funciona em algumas etapas (números como ícones)

Ao usar boxes-icons, NÃO adicione [eyebrow]: ... acima do ícone do item, a menos que claramente solicitado no texto planejado. Para cada [icon]:, use UMA palavra descritiva (ex.: [icon]: foguete), um nome de componente CamelCase exato que preferencialmente contenha uma ou duas palavras semânticas (ex.: [icon]: IconRocket ou [icon]: IconArrowRight), ou deixe vazio ([icon]:) para o usuário escolher na interface. Nomes exatos e correspondências de palavra única confiáveis são resolvidos para ícones reais. Se uma frase for fornecida, apenas sua primeira palavra é pesquisada; valores sem correspondência voltam para vazio.

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• imageFit: fill | free-ratio — como a mídia do item preenche seu espaço (apenas layouts alternate e boxes)
• sectionHeaderPosition: above | left — posicionamento do cabeçalho da seção (apenas layouts boxes)
• dividers: on | off — divisores entre caixas (apenas layouts boxes)

---

Testimonials

• carousel (padrão) - rolagem horizontal, melhor para 3+ depoimentos
• grid - todos os depoimentos visíveis de uma vez, melhor para 2-4

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• sectionHeaderPosition: above | left | right — posicionamento do cabeçalho da seção
• imageFit: fill | free-ratio — como a mídia do depoimento preenche seu espaço
• carouselAutoplay: on | off — avanço automático do carrossel (apenas layout carrossel)
• carouselAutoplayDuration: 2-30 — segundos por slide (decimais permitidos; apenas com avanço automático ativado)

---

Comparison

• boxes-text (padrão) - comparação lado a lado apenas com texto
• boxes - lados com uma imagem por lado
• boxes-icons - lados com um ícone por lado (fornecido via [icon]: ... dentro de cada lado)

Ícones de linha de marcador: um marcador inicial escolhe o ícone dessa linha e é removido do texto — ✅ → sucesso, ✓ → verificação, ❌/✗ → destrutivo, ⭐ → estrela, → → seta. Linhas sem marcador usam os padrões do lado (antes: destrutivo, depois: sucesso). Um marcador por linha; não use outros emojis como marcadores de linha.

imageFit: fill | free-ratio controla como as imagens laterais preenchem seus espaços (apenas layout boxes).

---

CTA

• default (padrão) - título, descrição e botões centralizados
• embed - título e botões com imagem ou incorporação ao lado

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• mediaVisibility: all | desktop | mobile | none — mostrar ou ocultar a mídia por dispositivo (apenas layout embed)
• imageFit: fill | free-ratio — como a mídia preenche seu espaço (apenas layout embed)

---

Custom

• left (padrão) - alinhado à esquerda, estilo artigo ou blog
• middle - centralizado, estilo landing page

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado

---

Pricing

Pricing não tem opções de layout.

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• pricingSwitch: billing-period=toggle, currency=tabs — estilo do seletor por chave (apenas toggle ou tabs aplica-se à chave de faturamento; toggle precisa exatamente de duas opções)

---

FAQ

FAQ não tem opções de layout.

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• sectionHeaderPosition: above | left — posicionamento do cabeçalho da seção

---

TrustedBy

TrustedBy não tem opções de layout.

Com base na solicitação do usuário, você também pode definir configurações de layout opcionais:

• style: <nome do estilo salvo> — aplicar um estilo de seção nomeado
• logosScroll: off | right-to-left | left-to-right — rolagem automática da linha de logotipos (desligado por padrão)
• logosScrollSpeed: 5-120 — segundos por loop de rolagem (apenas quando a rolagem está ativada)

---

Feed

• boxes (padrão) - grade de postagens com imagens por postagem
• boxes-text - grade de postagens apenas texto, sem imagens
• alternate - blocos de postagens narrativos, lados alternados

A configuração do feed vai em suas próprias linhas após Section type: feed:

• suggestedLayout: boxes | boxes-text | alternate
• style: <nome do estilo de seção>
• collection: <título exato da coleção ou slug>
• itemsToShow: <número de itens a exibir> (opcional; padrão depende da coleção)
• itemsToShowMobile: <número de itens a exibir em dispositivos móveis> (opcional; padrão depende da coleção)
• sortOrder: asc | desc (opcional; ordem de classificação das postagens)
• filterTags: <lista separada por vírgulas de tags para filtrar> (opcional)