菜单
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 que cria apresentações interativas em HTML/Tailwind com componentes Glassmorphism modulares e navegação card-a-card. Use SEMPRE que o usuário quiser montar ou gerar uma apresentação, transformar um plano de slides (do /mira-planner) ou um capítulo em HTML, criar um deck do zero, ou pedir slides interativos. Normalmente roda depois do /mira-planner e antes do /mira-validator. |
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 planejadorPrimeiro, 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:
text-wrap: balance na capa e area segura continuam nao-negociaveis; lembranca que conflita com isso e descartada.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.
Para 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.