Página de Lista de Espera

Skill de Página de Lista de Espera

Páginas de pré-lançamento são seu primeiro aperto de mão com futuros usuários. Esta skill constrói uma entrada focada e honesta: sua identidade de marca, o que você está criando, um caminho claro para entrar na lista inicial. Sem escassez artificial, sem contagem regressiva falsa, sem táticas de inflação — apenas um recipiente limpo e mobile-first para interesse genuíno.

Fluxo de Trabalho

Pré-voo: Carregar template endurecido e base da marca

0. Carregar a identidade da marca — Leia DESIGN.md para obter o sistema de cores, combinação de fontes e regras espaciais. Esta é sua base. Uma página de lista de espera vive ou morre pela consistência com a marca que representa. Se DESIGN.md estiver faltando, peça ao usuário para fornecer um antes de prosseguir.
1. Ler e copiar o template reutilizável — Leia assets/template.html. Este template é a semente endurecida para todas as saídas. Copie-o para index.html como sua base. Não escreva HTML do zero nem desvie desta estrutura. O template tem todo o layout necessário, estrutura de formulário, decorações, estilos de foco e scaffolding de acessibilidade embutidos.

Etapas: Substituição de tokens com validação e escaping

2. Mapear tokens das entradas — Para cada placeholder no template (por exemplo, {{PRODUCT_NAME}}, {{BG_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{LOGO_MARK}}), siga as regras de substituição abaixo:
   • Tokens de texto ({{PRODUCT_NAME}}, {{TAGLINE}}): Faça HTML-escape de <, >, &, ", ' antes da inserção em nós de texto HTML ou valores de atributos.
   • Tokens HTML ({{LOGO_MARK}}): Se estiver usando iniciais de texto, faça HTML-escape delas por padrão. Se estiver usando SVG inline, você deve sanitizá-lo rigorosamente usando uma lista de permissões: remova tags <script>, manipuladores de eventos (on*), <foreignObject>, referências externas (href, xlink:href, url()), e quaisquer atributos/elementos não permitidos antes da inserção. Se o SVG não puder ser sanitizado com segurança, recue para iniciais de texto com escape. Nunca emita HTML arbitrário bruto e não sanitizado. Certifique-se de que qualquer SVG seja dimensionado de forma limpa dentro de seu contêiner.
   • Tokens de expressão de cor ({{BG_EXPRESSION}}, {{FG_EXPRESSION}}, {{ACCENT_EXPRESSION}}, {{DECO_EXPRESSION}}, {{STRIPE_EXPRESSION}}, {{SUCCESS_EXPRESSION}}, {{BORDER_EXPRESSION}}, {{BTN_LABEL_EXPRESSION}}, {{TICKER_BG_EXPRESSION}}, {{TICKER_FG_EXPRESSION}}, {{DECO_STROKE_EXPRESSION}}, {{LOGO_SHADOW_EXPRESSION}}, {{LOGO_FG_EXPRESSION}}): Devem aderir estritamente a uma gramática de cor explícita (#hex, rgb/rgba, hsl/hsla, oklch, ou color-mix() usando apenas variáveis locais). Rejeite firmemente qualquer entrada contendo ;, {}, <, >, comentários (/*), @, url(, ou referências externas para prevenir injeção CSS. Não envolva em # ou adicione aspas extras. Exemplos: rgba(196, 169, 154, 0.38), color-mix(in srgb, var(--fg) 38%, transparent), #FDE8DF. Insira como está nas variáveis CSS :root. Derive --success do DESIGN.md se presente; caso contrário, use apenas o fallback permitido #2D6A4F.
   • Tokens de nome de fonte ({{DISPLAY_FONT_CSS}}, {{BODY_FONT_CSS}}): Estes são valores CSS font-family, já entre aspas se contiverem espaços (por exemplo, 'DM Sans', Syne). Insira como está nas declarações --font-display e --font-body; NÃO adicione aspas extras.
   • Tokens de URL de fonte ({{DISPLAY_FONT_URL}}, {{BODY_FONT_URL}}): Espaços devem ser codificados como + para a URL do Google Fonts (por exemplo, DM+Sans, IBM+Plex+Serif). Valide se a URL está bem formada antes da inserção.
3. Verificar regras de mapeamento de token — Todos os tokens de cor agora estão em variáveis CSS:
   • --bg = {{BG_EXPRESSION}} (ex.: #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (ex.: #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (marca distintiva)
   • --deco = {{DECO_EXPRESSION}} (decoração primária)
   • --deco-stripe = {{STRIPE_EXPRESSION}} (faixa de destaque)
   • --input-border = {{BORDER_EXPRESSION}} (expressão CSS completa com opacidade)
   • --success = {{SUCCESS_EXPRESSION}} ou fallback #2D6A4F
   • --btn-label = {{BTN_LABEL_EXPRESSION}} (cor do texto do botão para contraste)
   • --ticker-bg = {{TICKER_BG_EXPRESSION}} (fundo do ticker animado)
   • --ticker-fg = {{TICKER_FG_EXPRESSION}} (texto do ticker animado)
   • --deco-stroke = {{DECO_STROKE_EXPRESSION}} (traços SVG, tipicamente suaves com 12–15% de opacidade)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (sombra do contêiner do logotipo, tonalidade sutil de primeiro plano)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (cor de texto contrastante para as iniciais do logotipo)
4. Layout responsivo — O template inclui escalonamento mobile-first:
   • 375px: formulário empilha em coluna única, logotipo reduz para 40px, decoração comprime, sem scroll horizontal.
   • 768px: espaço confortável de duas colunas.
   • 1440px+: layout centralizado com bastante espaço em branco.
   • Verifique se todo o texto permanece legível e se o campo de e-mail + botão estão totalmente visíveis (sem corte) em 375×667 e 390×844.

Validação: Executar portões de qualidade endurecidos antes de emitir

5. Executar a lista de verificação de qualidade — Leia references/checklist.md. Valide cada portão P0 antes de emitir:
   • Exatamente um CTA (formulário de e-mail)
   • Sem contador regressivo, sem prova social falsa, sem emoji
   • Sem scroll horizontal em 375px
   • Campo de e-mail tem type="email" e required; nome próprio não tem required
   • Formulário NÃO usa novalidate; JS usa proteção checkValidity()
   • Mensagem de sucesso tem role="status" ou aria-live="polite"
   • Todas as cores do DESIGN.md ou fallback permitido; nenhum valor hex inventado
   • Todo texto do usuário tem HTML-escape feito; tokens de cor aderem à gramática estrita; fontes são URL-encoded
   • Passe P0 ou não emita. Se algum portão P0 falhar, pergunte ao usuário ou corrija os mapeamentos de token e tente novamente.
6. Verificar portões P1 para submissão de qualidade (recomendado):
   • Estados de hover e active no botão de envio
   • Validação de formulário com feedback claro
   • Animação do ticker respeita prefers-reduced-motion: reduce
   • Todos os elementos interativos têm estilos de foco visíveis (input:focus inclui outline)
   • Suporte a teclado Tab/Enter
   • Contraste WCAG AA para texto do corpo (≥4.5:1) e rótulo do botão (≥4.5:1)
   • Logo alt/aria-label presente; ticker tem aria-hidden="true"
   • <html lang=""> está definido

Saída

7. Emitir HTML limpo — Arquivo único, CSS inline, SVG para gráficos. Marque elementos interativos com data-od-id (título, formulário, logotipo, ticker, grade, etc.) para que agentes possam personalizar sem fazer parsing.

Portões de Qualidade

Esta skill impõe um fluxo de trabalho endurecido e baseado em template para garantir conformidade. Você deve seguir este caminho de execução; desviar do template desqualifica a saída.

Execução obrigatória baseada em template:

• Leia assets/template.html como sua base; não escreva HTML do zero.
• Copie-o para index.html e substitua apenas os tokens {{PLACEHOLDER}} com valores validados/escapados.
• Execute cada portão P0 em references/checklist.md antes de emitir; se algum falhar, corrija e re-valide.

Portões P0 (devem passar):

• Único CTA: Formulário de e-mail é o único elemento interativo. Sem navegação, sem botões secundários, sem links sociais.
• Posicionamento do logotipo: Fixo no canto superior esquerdo, corresponde à cor de destaque do DESIGN.md, reduz em dispositivos móveis (50px → 40px).
• Consistência de cores: Toda cor da paleta do DESIGN.md. Única exceção codificada permitida: #2D6A4F para --success.
• Sem antipadrões: Sem contador regressivo, sem prova social falsa, sem ícones de emoji, sem lorem ipsum.
• Integridade do conteúdo: Título e cópia vinculam diretamente às entradas product_name e tagline—sem cópia de enchimento.
• Ajuste para mobile: Sem scroll horizontal em 375px. Campo de e-mail e botão de envio estão totalmente visíveis (sem corte) em 375×667 e 390×844. O overflow vertical é rolável, não oculto.
• Disciplina tipográfica: Apenas fontes Display + Body (regra de 2 fontes). Tamanho consistente em todas as seções.
• Estrutura do formulário: Dois campos (nome próprio opcional, e-mail obrigatório), proteção checkValidity(), mensagem de sucesso com role="status".
• Escaping de tokens: Todo texto fornecido pelo usuário com HTML-escape; tokens de cor aderem à gramática estrita e não contêm caracteres inseguros (;, {}, <, >, /*, @, url(); nomes de fonte são URL-encoded; {{LOGO_MARK}} são iniciais de texto escapadas ou SVG inline estritamente sanitizado (sem scripts, sem manipuladores de eventos, sem foreignObject, sem hrefs externos).

Portões P1 (devem passar para submissão de qualidade):

• Seção principal visualmente distinta e acima da dobra.
• Botão de envio de e-mail tem estados hover e active.
• Validação de formulário fornece feedback claro.
• Página rolável (sem corte) em todas as viewports móveis; CTA visível sem scroll.
• Animação do ticker pausada/removida sob prefers-reduced-motion: reduce.
• Todos os elementos interativos têm estilos de foco visíveis (outline, não apenas outline:none).
• Teclado: Tab alcança cada campo do formulário; Enter envia.
• Contraste WCAG AA: Texto do corpo ≥4.5:1, rótulo do botão ≥4.5:1.
• Logo alt/aria-label presente; ticker tem aria-hidden="true".
• <html lang=""> definido para o código de idioma correto.

Restrição de decoração:

• Zona inferior melhora sem distração. Opacidade, traços sutis, animação suave.
• Nenhum gradiente que se estenda por mais de 20% da altura da viewport.
• Espiral, faixa, grade ou ticker usam apenas cores do DESIGN.md.

Saída

Emitir somente após todos os portões P0 em references/checklist.md passarem.

Emita o artefato entre tags:

<artifact identifier="waitlist-id" type="text/html" title="Em Breve — {{PRODUCT_NAME}}">
<!doctype html>
<html lang="en">
...
</html>
</artifact>

Uma linha de descrição acima do artefato; nada abaixo.

Pós-emissão: Se o usuário solicitar alterações, atualize o index.html in-place e re-execute os portões da lista de verificação P0 antes de emitir a próxima versão. Não pule a validação em iterações.