jpoindexter/theft-kit

Skill de Landing Page SaaS

Produza uma landing page SaaS de página única. Agente, siga exatamente este fluxo de trabalho.

1. Leia o contexto

Antes de escrever qualquer coisa:

• Leia o ficheiro DESIGN.md no diretório de trabalho atual. Se não existir, pare e peça um.
• Identifique a paleta de cores, os tokens de tipografia e os princípios de layout.
• Observe a secção "Guia de Prompt do Agente" — ela substitui qualquer instrução aqui se houver conflito.

2. Planeie as secções

Secções obrigatórias, por ordem:

1. Herói — logótipo ou marca-palavra, título (entrada de tagline), subtítulo (1–2 frases), CTA primário, CTA secundário. Use o parâmetro hero_density como preenchimento vertical em px.
2. Funcionalidades — 3 a 6 blocos de funcionalidades. Cada um: ícone, título curto, corpo de 1–2 frases.
3. Prova social — proof_count logótipos ou testemunhos. Se for 0, salte esta secção.
4. Preços — 2 a 3 níveis. Inclua apenas se has_pricing for verdadeiro.
5. CTA do rodapé — faixa grande com cor de destaque e uma chamada para ação com um botão.
6. Rodapé — mínimo: links + direitos de autor.

3. Aplique o sistema de design

• Todas as cores devem vir dos tokens do DESIGN.md. Não invente valores hexadecimais.
• Tipografia: use a fonte de exibição declarada para títulos e a fonte do corpo para todo o resto.
• Layout: respeite a grelha, a largura máxima e as regras de espaçamento entre secções.
• Componentes: use os padrões declarados de botões, cartões e campos de entrada. Não adicione sombras se a secção Profundidade e Elevação do DESIGN.md disser "mínimo".
• Destaque: use a cor de destaque apenas uma vez no herói, uma vez no CTA do rodapé e em todas as ligações. Não sobrecarregue a página.

4. Escreva o ficheiro

Produza um único index.html autossuficiente com:

• Todo o CSS inline num bloco <style> dentro de <head>.
• Fallbacks de fontes do sistema se as fontes do DESIGN.md não puderem ser carregadas (ex.: Google Fonts).
• Sem JavaScript externo.
• HTML semântico (<header>, <main>, <section>, <footer>).
• Cada elemento editável marcado com data-od-id="<slug-único>" para que o modo de comentário da aplicação anfitriã possa direcioná-lo.

5. Auto-verificação

Antes de terminar, verifique:

• Todo o texto é significativo para o conteúdo, não lorem ipsum (use as entradas product_name e tagline; gere cópia plausível e específica para o resto).
• Nenhuma referência de cor quebrada (cada valor CSS de cor está na paleta do DESIGN.md ou é uma variante alfa/fallback válida).
• Os pontos de interrupção responsivos correspondem à secção Comportamento Responsivo do DESIGN.md.
• A página parece boa a 1440w, 768w e 375w (simule mentalmente).
• A cor de destaque é usada no máximo duas vezes no total.

6. Concluído

Escreva apenas index.html. Não gere um ficheiro CSS, JS ou README separados.

---

Para autores de skills a lerem isto como referência

Este é um skill mínimo mas completo. Estrutura:

saas-landing-skill/
├── SKILL.md    ← está aqui
└── assets/
    └── base.html    (template inicial opcional; este skill não o utiliza)

Coisas a notar:

• O bloco de front-matter od: é opcional para compatibilidade apenas com Claude Code, mas adicioná-lo ativa as entradas tipadas, sliders, metadados de pré-visualização e bloqueio de capacidades da OD.
• O fluxo de trabalho abaixo do front-matter é Markdown simples que o agente lê como seu prompt de sistema.
• O DESIGN.md é tratado como um colaborador, não como uma substituição. O skill dá autoridade ao agente para substituir quando o resumo conflita, mas nunca para inventar novos tokens.
• A marcação data-od-id é como ligamos elementos ao modo de comentário. Skills que desejam compatibilidade com modo de comentário devem anotar a sua saída.

Mantenha estas quatro regras dentro do contrato do pacote; não dependa de um ficheiro de protocolo ao nível do repositório que pode não viajar com este skill.