Mira Builder

Skill: Apresentação de Dados em Cards Animados

REGRA ZERO

Antes de gerar qualquer slide, leia ao menos 2 dos 3 arquivos de /exemplos_de_sucesso/ (01.html, 02.html, 03.html). Foram editados à mão com o usuário e definem o padrão de qualidade a replicar — não gere output one-shot sem consultá-los.

Cores nos exemplos: eles usam cores históricas (#e47d5b, #FFA203, #222222). Ignore essas cores — use sempre as da seção "Regras de Estilo" (#FF904D primária, #000000 fundo). Os exemplos são referência de estrutura, layout e qualidade visual, não de cores.

REGRA DE IDIOMA — PORTUGUÊS CORRETO

Siga integralmente agents/_shared/idioma.md (regra compartilhada de todos os agentes do Mira): todo texto visível em português brasileiro com acentuação 100% correta, revisado antes de finalizar.

📝 Instruções de Execução

Atue como engenheiro de front-end UX/UI: transforme dados brutos numa página HTML única e elegante, selecionando e injetando componentes de /templates.

Passo 0: Planejamento de Conteudo (OBRIGATORIO)

Antes de qualquer montagem visual, chame a skill /mira-planner. Ele analisa o conteudo do capitulo e gera um plano estruturado de slides (quantidade, tipo de card, conteudo de cada um). Apos aprovacao, o plano passa pelo /mira-copywriter, que refina titulos, descricoes e selecao de imagens.

• Se o usuario pediu "sem feedback", "direto", "sem confirmacao" ou similar: o pipeline roda sem pedir aprovacao.
• Caso contrario: o planejador apresenta o plano; apos aprovacao o copywriter refina e mostra as mudancas antes de continuar.

Use o plano refinado pelo copywriter como guia. Nao invente slides fora do plano.

Passo 1: Leitura de Referencias

1. Leia 2+ exemplos de exemplos_de_sucesso/ (padrao visual)
2. Leia as imagens em decks/<deck>/assets/ (ja inventariadas pelo planejador)
3. Identifique a logo em logo_canal/canal_sandeco_logo.png (sera copiada para o destino)
4. Leia video_lista.md para confirmar o video escolhido pelo planejador

Passo 1.5: Lembrancas do Usuario (memoria de preferencias)

Primeiro, deixe a memoria em dia. O comando le as correcoes que o usuario ja fez e promove a candidata o que ja se repetiu o bastante:

npx mira-animator memoria consolidar

Se aparecer nota candidata, avise o usuario em uma linha e siga: candidata nao e aplicada ate ele ativar com memoria estado <arquivo> ativo. Nao insista, nao pare a montagem.

Depois pergunte o que se aplica a este deck. Uma consulta por papel de slide que o deck tem (a nota so aparece quando o papel dela e informado, entao a consulta generica nao alcanca nota de escopo):

npx mira-animator memoria lembrancas --papel capa --formato 16x9 --registro <slug>
npx mira-animator memoria lembrancas --papel conteudo --formato 16x9 --registro <slug>
npx mira-animator memoria lembrancas --papel encerramento --formato 16x9 --registro <slug>

Ajuste --formato ao deck (16x9, 9x16, 1x1). O --registro recebe o slug do deck, nao um caminho: a proveniencia (o que foi aplicado, o que foi ignorado e por que) vai para a pasta de memoria do Mira, fora do deck. Nunca grave lembranca dentro do deck: o pacote tem o perfil do usuario em texto puro e deck publicado e drop-and-run, subiria junto.

Se qualquer um desses comandos falhar (versao do Mira sem o comando, pasta inexistente), gere normalmente e siga: memoria e opcional, nunca trava a montagem.

O comando devolve texto legivel, uma linha por lembranca, com o escopo e a confianca. Como usar:

• Lembranca ativa vale como orientacao, nao como ordem: aplique quando o slide se encaixa no escopo dela.
• A marca manda acima da memoria. Cor #FF904D, text-wrap: balance na capa e area segura continuam nao-negociaveis; lembranca que conflita com isso e descartada.
• Nao interrompa slide a slide. Se duas lembrancas se contradizem no mesmo slide, siga o padrao do Mira e junte a duvida numa pergunta so no fim.
• Sem memoria ainda? O comando responde "Nenhuma lembranca se aplica". Gere normal, isso e o esperado no comeco.

Quando o usuario der uma ordem explicita de gosto durante a conversa ("sempre menos texto", "na capa o titulo fica em cima"), grave:

npx mira-animator memoria nota "menos texto por slide, no maximo tres linhas" --eixo densidade

Eixos em uso: cor, posicao, densidade, animacao, camera, tipografia. Escopo opcional: --papel capa|conteudo|encerramento, --formato 16x9|9x16|1x1, --tema <tema>. Grave so preferencia que valha para os proximos decks; conserto de um slide especifico nao vira nota.

Passo 2: Montagem dos Cards conforme o Plano

Para cada slide do plano aprovado, use o template indicado:

• Demonstração de Código: card_code.html
• Dados Tabulares: card_tabela.html
• Comparativos/Preços: card_destaques.html
• Cronogramas/Processos: card_timeline.html
• Estatísticas/Listas: card_lista.html
• Destaque Visual: card_imagem.html
• Grids/Categorias: card_grid.html
• Metas/Progresso: card_progresso.html
• Citações/Insights: card_citacao.html
• Chamada para Acao (CTA): card_cta.html (OBRIGATORIO: Inserir sempre no meio da apresentacao)
• Graficos D3.js Interativos: card_d3.html
• Card com Video de Fundo: card_video_bg.html

Passo 3: Configuração de Componentes

Para cada template selecionado:

1. Placeholders: Substitua termos entre colchetes pelos dados reais
2. Ícones: Use nomes compatíveis com Lucide
3. Animações: Incremente data-aos-delay em 100ms por card (100, 200, 300...)

Passo 4: Montagem do Arquivo Final

Destino: decks/<deck>/index.html

Arquivos a copiar para a pasta de destino ANTES de gerar o HTML:

1. logo_canal/canal_sandeco_logo.png (ou logo definido no mira.config.json) → decks/<deck>/logo.png
2. Um video de videos_header/ escolhido via video_lista.md → decks/<deck>/header-bg.mp4
3. Videos adicionais para cards internos (opcional) → decks/<deck>/video-card-N.mp4
4. Imagens de decks/<deck>/assets/ relevantes ao conteudo (referenciar com caminho relativo)

Concatenação:

1. Layout Base (Início): layout_base.html até <body>
2. Abertura: header.html com vídeo local e logo Sandeco
3. Corpo: Sequência de cards dos Passos 2 e 3
4. Encerramento: footer.html com logo Sandeco + fechamento de layout_base.html

🎯 Regras de Composicao

Quantidade e Variedade de Cards

• Minimo: 8 cards por apresentacao
• Maximo: 20 cards por apresentacao
• Variedade: Usar pelo menos 3 tipos diferentes de template (nao repetir o mesmo tipo em sequencia)
• Ritmo visual: Alternar entre cards densos (tabela, codigo, D3) e cards leves (citacao, imagem, CTA)
• CTA obrigatorio: Inserir card_cta.html no meio da apresentacao (entre os cards 4-8)

Geracao de Imagens

• Se um slide precisa de imagem que nao existe em decks/<deck>/assets/, chame a skill /mira-visuals para gera-la antes de montar o slide.

Passo 5: Validacao Automatica (OBRIGATORIO)

Apos gerar o index.html e copiar os assets, chame a skill /mira-validator. Ela checa cores, logos, videos, layout e estrutura; corrija falhas criticas antes de apresentar ao usuario.

🎨 Regras de Estilo e Design

Cores (OBRIGATÓRIO — usar exatamente estas)

• Fundo: #000000 (preto puro)
• Cor primária: #FF904D (coral/laranja)
• rgba equivalente: rgba(255, 144, 77, ...)
• Cor de erro/vibe coding: #FF6464

Identidade Visual (OBRIGATÓRIO)

• Logo Canal Sandeco: canal_sandeco_logo.png como <img> no header E no footer. NUNCA usar SVG genérico.
• Video de fundo no header: Sempre um arquivo .mp4 LOCAL na mesma pasta do HTML, com opacity-50 (50%) e overlay gradient.

Layout dos Cards

• Largura: max-w-5xl (NÃO max-w-3xl, NÃO max-w-6xl)
• Padding: p-8 ou p-10 (NÃO p-16)
• Gap entre slides: gap-[60vh]
• Glassmorphism: backdrop-filter: blur(10px) e bordas semi-transparentes

Tipografia

• Fonte: Inter (Google Fonts) — adicionar no <head>
• Títulos de card: text-3xl ou text-4xl (NÃO text-5xl)
• Corpo: text-base ou text-lg

Responsividade (OBRIGATÓRIO)

Todo slide 16:9 DEVE reorganizar em retrato para abrir bem no celular — sem mobile.html separado, sem "print cortado".

• Camada base: o layout_base.html já traz o bloco @MIRA:RESPONSIVE (reflow mobile-first: fontes via clamp, grids empilham, padding reduz, palcos escalam). NUNCA remova esse bloco. Fonte da verdade: templates/themes/responsive.css.
• Escreva mobile-first: títulos com breakpoint (text-4xl md:text-6xl, nunca text-6xl sozinho num H1); grids grid-cols-1 md:grid-cols-2; nada de largura fixa em px.
• Sem overflow horizontal: imagens/tabelas/svg com max-w-full; tabela larga dentro de overflow-x-auto.
• <meta viewport> deve conter width=device-width e viewport-fit=cover.

Imagens do Capítulo

• Incluir as imagens relevantes de decks/<deck>/assets/ nos slides correspondentes
• Usar class="w-full rounded-lg" para imagens de largura total
• Copiar as imagens para a pasta de destino do slide

Videos (OBRIGATORIO)

• Selecao: consultar video_lista.md para escolher o video adequado ao tema
• Header: sempre um video de fundo no header (copiado como header-bg.mp4)
• Cards internos: opcionalmente, videos adicionais como fundo de cards
• Atributos: autoplay loop muted playsinline
• Opacidade: sempre opacity: 0.5 via style="opacity: 0.5;" ou class="opacity-50"
• Overlay: sempre gradient overlay por cima, para legibilidade do texto

Exemplo de video em card interno:

<div class="relative overflow-hidden rounded-2xl">
    <video autoplay loop muted playsinline class="absolute inset-0 w-full h-full object-cover" style="opacity: 0.5;">
        <source src="video-card-1.mp4" type="video/mp4">
    </video>
    <div class="absolute inset-0" style="background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.5));"></div>
    <div class="relative z-10 p-8">
        <!-- conteudo do card -->
    </div>
</div>

Seguranca

• No card_code.html, converter < e > em < e >
• Tabelas: colunas do <thead> devem bater com <tbody>

🧭 Navegação Card-a-Card

Comportamento

• Espaçamento: setupFullScreenWrappers() envolve cada card em container min-h-screen
• Botão "Começar": No header, leva ao primeiro card
• Botão flutuante: #next-card fixo no canto inferior direito, aparece após 300px de scroll
• Barra de progresso: Fixa no topo
• Teclado: Seta Direita/Baixo/PageDown avança; Seta Esquerda/Cima/PageUp retrocede

Implementação

Já integrado nos templates layout_base.html e header.html.

🖼️ Checklist de Assets por Slide

Para cada apresentação gerada, garantir:

• canal_sandeco_logo.png copiada para pasta de destino
• header-bg.mp4 (video escolhido via video_lista.md) copiado para pasta de destino
• Videos adicionais para cards internos copiados (se aplicavel)
• Imagens de decks/<deck>/assets/ relevantes referenciadas
• Logo aparece no header (dentro do <div> central, após subtítulo)
• Logo aparece no footer (antes do copyright)
• Video toca no fundo do header com overlay gradient e opacity: 0.5
• Todos os videos usam autoplay loop muted playsinline com opacity: 0.5
• Cores usam #FF904D (NÃO #FFA203)
• Fundo usa #000000 (NÃO #222222)
• NÃO há número de slides no header (remover [DESTAQUE_NUMERICO])

🚀 Saída Esperada

Um index.html completo e autossuficiente: vídeo de fundo no header, logo Sandeco no header e footer, imagens do capítulo nos slides relevantes, scripts de animação (AOS), ícones (Lucide), navegação card-a-card e qualidade visual compatível com os exemplos de sucesso.