skeletorflet/opencode-supreme-setup

Skill de Landing Page SaaS

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

1. Ler contexto

Antes de escrever qualquer coisa:

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

2. Planear secções

Secções obrigatórias, por ordem:

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

3. Aplicar 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 as regras de grelha, largura máxima e espaçamento entre secções.
• Componentes: use padrões de botão/card/input declarados. 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 todos os links. Não inunde a página.

4. Escrever o ficheiro

Produza um único index.html autocontido com:

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

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 específica para o resto).
• Sem referências de cor quebradas (cada valor CSS de cor está na paleta do DESIGN.md ou numa variante alfa/fallback válida).
• Os breakpoints responsivos correspondem à secção Comportamento Responsivo do DESIGN.md.
• A página tem bom aspeto a 1440w, 768w e 375w (simule mentalmente).
• Destaque usado no máximo duas vezes no total.

6. Concluído

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

---

Para autores de skill que leem isto como referência

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

saas-landing-skill/
├── SKILL.md    ← você está aqui
└── assets/
    └── base.html    (opcional, modelo de arranque; este skill não usa nenhum)

Coisas a notar:

• O bloco de front-matter od: é opcional para compatibilidade apenas com Claude-Code, mas adicioná-lo ativa as entradas tipificadas, sliders, metadados de pré-visualização e limitação de capacidades do OpenCode.
• 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 sobreposição. O skill dá autoridade ao agente para substituir quando o briefing entra em conflito, mas nunca para inventar novos tokens.
• A anotação data-od-id é como ligamos elementos ao modo de comentários. Skills que queiram compatibilidade com modo de comentários devem anotar a sua saída.

Consulte ../../skills-protocol.md para o protocolo completo.