القائمة
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 المهني
Transforma a animação de um slide (ou de todos) numa METÁFORA visual animada. A partir do conceito do slide, o agente cria uma analogia concreta do cotidiano e a anima no padrão do mira-animator (loop interno obrigatório). Substitui a animação no lugar, mantendo título, subtítulo e pílulas. Use SEMPRE que o usuário disser "/mira-animated-metaphor", "metáfora animada", "transforma em metáfora", "cria uma analogia", "anima como analogia", "transforma os slides em metáforas", "vira metáfora", "quero uma metáfora pra esse conceito", "anima essa ideia como analogia", "metáfora visual", ou pedir para reexpressar um conceito como comparação animada, no deck inteiro ou num slide específico.
Cria slides individuais com animações criativas e looping interno obrigatório, no padrão dos decks de referência em mira-templates/decks/. Combina o esqueleto visual da skill mira-builder (glass-card, icon-hero, attribute-pills, replay-btn) com a profundidade técnica das diretrizes D3 em references/ (D3.js v7+ ou 3D CSS) e a regra-mãe da skill, NENHUMA animação é estática, toda animação ENTRA com coreografia e DEPOIS continua em loop interno. Use SEMPRE que o usuário disser, "criar slide animado", "novo slide com animação", "adicionar card com D3", "/mira-animator", "slide criativo para o deck", "slide com flip cards", "slide com battle arena", "slide com staircase", ou pedir explicitamente "looping na animação", "animação contínua", "movimento contínuo no slide". Também use quando o usuário enviar uma imagem e pedir "transforme isso em um slide animado" ou "anima essa figura".
Especialista em gráficos de dados para os slides do Mira. Recebe dados em CSV, JSON, TSV, tabela markdown ou texto colado, e também imagens: print de um gráfico existente, foto de quadro branco ou rascunho desenhado à mão. Aceita o tipo de gráfico indicado pelo usuário ou analisa os dados e recomenda a melhor visualização, usando a galeria do D3.js como referência. Use esta skill SEMPRE que o usuário disser: "criar gráfico", "plotar", "gráfico de barras", "gráfico de linhas", "pizza", "scatter", "visualizar esses dados", "transformar esse CSV em gráfico", "recriar esse gráfico", "desenhei um gráfico", "fiz um rascunho", ou qualquer combinação de dados + gráfico/visualização. Para imagens que não são gráficos use /mira-visuals; para animar um gráfico pronto use /mira-animator.
Copywriter especializado em refinar o plano de slides gerado pelo /mira-planner. Reescreve titulos, descricoes e conteudo usando tecnicas de copywriting para maximizar impacto visual e engajamento. Tambem avalia e melhora a selecao de imagens, podendo chamar /mira-visuals para gerar imagens que nao existem. Use esta skill SEMPRE que o /mira-planner terminar de gerar um plano, ou quando o usuario quiser melhorar o texto de uma apresentacao, refinar as frases dos slides, aplicar copywriting, ou reescrever conteudo de slides para ficar mais impactante.
Extrator de contexto do Mira. Lê uma fonte vinculada no mira.config.json (pasta de projeto, PDF, LaTeX ou texto) e produz um briefing estruturado que alimenta o /mira-planner. Use esta skill SEMPRE que o usuário pedir para criar slides "sobre" um projeto ou documento, mencionar uma fonte vinculada pelo nome, ou disser "extrai o conteúdo de", "lê o projeto", "prepara o material do", "briefing do projeto". É o primeiro elo do pipeline do Mira.
Baixa os vídeos de fundo do Mira para mira-templates/videos_header/. Use esta skill SEMPRE que o usuário digitar "/mira-get-videos", "baixar vídeos", "instalar vídeos do mira", "quero os backgrounds de vídeo" ou "os vídeos não estão aparecendo".
| 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 pelo menos 2 dos 3 arquivos da pasta /exemplos_de_sucesso/ (01.html, 02.html, 03.html). Esses arquivos foram editados manualmente junto com o usuario e representam o padrao de qualidade esperado. NAO gere output one-shot sem consulta-los. O objetivo e REPLICAR o nivel de qualidade visual e estrutural desses exemplos.
ATENCAO sobre cores nos exemplos: Os exemplos de sucesso usam cores historicas diferentes (#e47d5b, #FFA203, #222222). IGNORE essas cores. Use SEMPRE as cores definidas na secao "Regras de Estilo": #FF904D (primaria) e #000000 (fundo). Os exemplos servem como referencia de ESTRUTURA, LAYOUT e QUALIDADE VISUAL, nao 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.
Você deve atuar como um engenheiro de front-end especializado em UX/UI. Seu objetivo é transformar dados brutos em uma página HTML única e elegante, selecionando e injetando componentes da pasta /templates.
ANTES de qualquer montagem visual, chame a skill /mira-planner.
O planejador 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 usando tecnicas de copywriting.
Use o plano refinado pelo copywriter como guia para os passos seguintes. Nao invente slides fora do plano.
exemplos_de_sucesso/ para absorver o padrao visualdecks/<deck>/assets/ (ja inventariadas pelo planejador)logo_canal/canal_sandeco_logo.png (sera copiada para a pasta de 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 gerar a imagem antes de montar o slide.Apos gerar o index.html e copiar todos os assets, chame a skill /mira-validator para verificar a conformidade do arquivo gerado. O validador checa cores, logos, videos, layout e estrutura. Se houver falhas criticas, corrija 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-lgdecks/<deck>/assets/ e incluir as imagens relevantes nos slides correspondentesclass="w-full rounded-lg" para imagens de largura totalvideo_lista.md para escolher o video mais adequado ao temaheader-bg.mp4)autoplay loop muted playsinlineopacity: 0.5 (50% de transparencia) 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 arquivo index.html completo, autossuficiente, com: