القائمة
Motor de montagem atômica para criar apresentações interativas em HTML/Tailwind usando componentes Glassmorphism modulares com navegação card-a-card.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Gera um deck HORIZONTAL 16:9 (1920x1080, arquivo index-16x9.html) pronto para gravar videoaula sem OBS, onde cada slide declara um de três layouts: camera (webcam ao vivo em tela cheia), thirds (animação nos dois terços da esquerda + câmera ao vivo no terço direito) e full (animação em tela cheia, sem câmera). Os slides nascem do roteiro.md (layout, título e animação declarativa linha/orbita por cabeçalho), o teleprompter em overlay fica fora do vídeo via Element Capture e a gravação nativa sai em MP4 full-hd pela tecla R, com painel de encoder, câmera, microfone e gravação direta no disco. Use SEMPRE que o usuário disser /mira-studio-full, deck 16:9 com câmera, videoaula com câmera embutida, studio horizontal, gravar aula em full hd, terços com câmera, ou pedir slides horizontais que misturam câmera e animação num vídeo 16:9. Para vídeo VERTICAL 9:16 (Reels, Shorts, TikTok), use /mira-studio.
Insere num slide do Mira (novo ou existente) um QR code escaneável, grande e centralizado, gerado de um link ou texto. O QR é gerado LOCALMENTE (pacote npm qrcode) e embutido como SVG inline: funciona por file://, sem API nem CDN em apresentação. Card limpo no padrão mira-3d (só o título, no máximo 6 palavras, e o QR central, sem legenda do link); módulos escuros sobre cartão branco, laranja só na moldura e no título. Herda a Regra Zero do mira-animator, mas o QR fica ESTÁTICO e o loop interno vai na moldura. Use SEMPRE que o usuário disser /mira-qrcode, QR code, qrcode, código QR, gera um QR, coloca um QR no slide, QR do link, QR de inscrição, QR de CTA, código para escanear, ou pedir um slide com um link escaneável.
Reenquadra um deck do Mira na regra dos terços, sem mudar a proporção: joga título + animação nos 2/3 da esquerda de um grid 3x3 e deixa a coluna da direita em cinza #333, limpa, para você sobrepor texto, lower-third ou câmera na edição. A animação é reformulada por metáfora para preencher os 2/3; não toca no original (cria arquivo -thirds ao lado). Aplica sobre 16:9, 1:1 (mira-squared) ou 9:16 (mira-vertical), ou cria slides do zero; lado cinza à direita por padrão, com opção de inverter. Use SEMPRE que o usuário disser /mira-thirds, regra dos terços, rule of thirds, composição em terços, anima à esquerda, deixa a direita livre, coluna livre, dois terços à esquerda, grid 3x3, espaço para texto/câmera ao lado, abre espaço à direita, cria um slide em terços, ou pedir a animação encostada num lado e o outro terço livre em cinza.
Gera imagens estáticas para slides do Mira: painéis 1920x800, infográficos 1920x1920, diagramas técnicos e gráficos — via D3.js com captura PNG, ou fotorrealismo via prompt JSON (mira-image-prompt). Use esta skill SEMPRE que o usuário disser: "criar imagem", "gerar imagem", "ilustração", "diagrama", "gráfico estático", "infográfico", "resumo visual", "quadro resumo", "imagem para o slide", "visual para o deck", ou qualquer variação sobre criar elementos visuais estáticos. Para ANIMAÇÕES use /mira-animator; esta skill produz imagens PARADAS.
Coloca um site vivo DENTRO de um slide do Mira (novo ou existente), ocupando o slide inteiro, edge to edge, via iframe full-bleed. Resolve os dois problemas reais de embutir um site num deck: (1) o iframe rouba o foco do teclado e quebra a navegacao por seta do deck, entao uma guarda de interacao deixa o site so visivel ate o apresentador clicar, e Esc devolve o controle ao deck; (2) muitos sites bloqueiam incorporacao (X-Frame-Options / CSP frame-ancestors), entao tem camada de fallback com link e a opcao de baixar o site para assets/webview/ e rodar offline por file protocol. Herda a Regra Zero do mira-animator, mas o site fica firme e o loop interno vai na guarda (pill pulsando e borda respirando em laranja) enquanto nao se esta interagindo. Use SEMPRE que o usuario disser /mira-webview, webview, embutir site, colocar um site no slide, site dentro do slide, iframe no slide, incorporar pagina, mostrar um site na apresentacao, abrir um site no deck, ou pedir um slide que seja uma pagina web ao vivo.
Gera um deck VERTICAL 9:16 (1080x1920) pronto para gravar no OBS Studio, onde cada slide declara um de três layouts: camera (webcam ao vivo em tela cheia), split (animação quadrada estilo mira-squared em cima + câmera embaixo) e full (animação vertical estilo mira-vertical). A câmera do apresentador é embutida ao vivo no slide via getUserMedia (módulo mira/mira-camera.js), sem chroma key: no OBS basta capturar a janela. Sem câmera, a área vira verde chroma #00FF00 como plano B. Use SEMPRE que o usuário disser /mira-studio, deck para OBS, deck com câmera, slide com câmera, meio a meio, câmera embutida, deck para gravar vídeo comigo falando, ou pedir slides que misturam câmera e animação num vídeo vertical.
| 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. |
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.
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.
Atue como engenheiro de front-end UX/UI: transforme dados brutos numa página HTML única e elegante, selecionando e injetando componentes de /templates.
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.
Use o plano refinado pelo copywriter como guia. Nao invente slides fora do plano.
exemplos_de_sucesso/ (padrao visual)decks/<deck>/assets/ (ja inventariadas pelo planejador)logo_canal/canal_sandeco_logo.png (sera copiada para o destino)video_lista.md para confirmar o video escolhido pelo planejadorPara cada slide do plano aprovado, use o template indicado:
card_code.htmlcard_tabela.htmlcard_destaques.htmlcard_timeline.htmlcard_lista.htmlcard_imagem.htmlcard_grid.htmlcard_progresso.htmlcard_citacao.htmlcard_cta.html (OBRIGATORIO: Inserir sempre no meio da apresentacao)card_d3.htmlcard_video_bg.htmlPara cada template selecionado:
data-aos-delay em 100ms por card (100, 200, 300...)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.pngvideos_header/ escolhido via video_lista.md → decks/<deck>/header-bg.mp4decks/<deck>/video-card-N.mp4decks/<deck>/assets/ relevantes ao conteudo (referenciar com caminho relativo)Concatenação:
layout_base.html até <body>header.html com vídeo local e logo Sandecofooter.html com logo Sandeco + fechamento de layout_base.htmlcard_cta.html no meio da apresentacao (entre os cards 4-8)decks/<deck>/assets/, chame a skill /mira-visuals para gera-la antes de montar o slide.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.
#000000 (preto puro)#FF904D (coral/laranja)rgba(255, 144, 77, ...)#FF6464canal_sandeco_logo.png como <img> no header E no footer. NUNCA usar SVG genérico..mp4 LOCAL na mesma pasta do HTML, com opacity-50 (50%) e overlay gradient.max-w-5xl (NÃO max-w-3xl, NÃO max-w-6xl)p-8 ou p-10 (NÃO p-16)gap-[60vh]backdrop-filter: blur(10px) e bordas semi-transparentes<head>text-3xl ou text-4xl (NÃO text-5xl)text-base ou text-lgTodo slide 16:9 DEVE reorganizar em retrato para abrir bem no celular — sem mobile.html separado, sem "print cortado".
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.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.max-w-full; tabela larga dentro de overflow-x-auto.<meta viewport> deve conter width=device-width e viewport-fit=cover.decks/<deck>/assets/ nos slides correspondentesclass="w-full rounded-lg" para imagens de largura totalvideo_lista.md para escolher o video adequado ao temaheader-bg.mp4)autoplay loop muted playsinlineopacity: 0.5 via style="opacity: 0.5;" ou class="opacity-50"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>
card_code.html, converter < e > em < e ><thead> devem bater com <tbody>setupFullScreenWrappers() envolve cada card em container min-h-screen#next-card fixo no canto inferior direito, aparece após 300px de scrollJá integrado nos templates layout_base.html e header.html.
Para cada apresentação gerada, garantir:
canal_sandeco_logo.png copiada para pasta de destinoheader-bg.mp4 (video escolhido via video_lista.md) copiado para pasta de destinodecks/<deck>/assets/ relevantes referenciadas<div> central, após subtítulo)opacity: 0.5autoplay loop muted playsinline com opacity: 0.5[DESTAQUE_NUMERICO])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.