Skill: Página de Lista de Espera

Páginas de pré-lançamento são seu primeiro contato com futuros usuários. Esta skill constrói uma entrada focada e honesta: a identidade da sua marca, o que você está criando, um caminho claro para entrar na lista antecipada. 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

Verificação Pré-voo: Carregar template robusto e base da marca

0. Carregar a identidade da marca — Leia DESIGN.md para o sistema de cores, combinação de fontes e regras de espaçamento. Esta é a 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 fornecê-lo antes de prosseguir.
1. Ler e copiar o template reutilizável — Leia assets/template.html. Este template é a semente robusta para todas as saídas. Copie-o para index.html como sua base. Não escreva HTML do zero nem se desvie desta estrutura. O template possui todo o layout, estrutura de formulário, decorações, estilos de foco e estrutura de acessibilidade necessários integrados.

Passos: Substituição de tokens com validação e escape

2. Mapear tokens de 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 o escape de HTML de <, >, &, ", ' antes de inseri-los em nós de texto HTML ou valores de atributos.
   • Tokens HTML ({{LOGO_MARK}}): Se estiver usando iniciais de texto, faça o escape de HTML 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, retorne às iniciais de texto com escape. Nunca emita HTML arbitrário bruto e não sanitizado. Certifique-se de que qualquer SVG escale 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 cores explícita (#hex, rgb/rgba, hsl/hsla, oklch, ou color-mix() usando apenas variáveis locais). Rejeite estritamente qualquer entrada contendo ;, {}, <, >, comentários (/*), @, url(, ou referências externas para evitar injeção de CSS. Não envolva em # nem 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 de 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ão 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 tokens — Todos os tokens de cor agora estão em variáveis CSS:
   • --bg = {{BG_EXPRESSION}} (por exemplo, #FDE8DF)
   • --fg = {{FG_EXPRESSION}} (por exemplo, #1A1410)
   • --accent = {{ACCENT_EXPRESSION}} (selo da marca)
   • --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 atenuados com 12–15% de opacidade)
   • --logo-shadow = {{LOGO_SHADOW_EXPRESSION}} (sombra do contêiner do logo, tom sutil de primeiro plano)
   • --logo-fg = {{LOGO_FG_EXPRESSION}} (cor de texto contrastante para as iniciais do logo)
4. Layout responsivo — O template inclui dimensionamento mobile-first:

…