| name | mira-builder |
| description | Motor de montagem atômica para criar apresentações interativas em HTML/Tailwind usando componentes Glassmorphism modulares com navegação card-a-card. |
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
- Leia 2+ exemplos de
exemplos_de_sucesso/ (padrao visual)
- Leia as imagens em
decks/<deck>/assets/ (ja inventariadas pelo planejador)
- Identifique a logo em
logo_canal/canal_sandeco_logo.png (sera copiada para o destino)
- Leia
video_lista.md para confirmar o video escolhido pelo planejador
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:
- Placeholders: Substitua termos entre colchetes pelos dados reais
- Ícones: Use nomes compatíveis com Lucide
- 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:
logo_canal/canal_sandeco_logo.png (ou logo definido no mira.config.json) → decks/<deck>/logo.png- Um video de
videos_header/ escolhido via video_lista.md → decks/<deck>/header-bg.mp4
- Videos adicionais para cards internos (opcional) →
decks/<deck>/video-card-N.mp4
- Imagens de
decks/<deck>/assets/ relevantes ao conteudo (referenciar com caminho relativo)
Concatenação:
- Layout Base (Início):
layout_base.html até <body>
- Abertura:
header.html com vídeo local e logo Sandeco
- Corpo: Sequência de cards dos Passos 2 e 3
- 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">
</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:
🚀 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.
