Run any Skill in Manus with one click

mira-visuals

Stars138

Forks44

UpdatedJuly 20, 2026 at 16:53

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

sandeco

sandeco/mira-animator

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

4 files

SKILL.md

readonly

name

mira-visuals

description

Skill: Mira Visuals — Imagens Estáticas para Slides

Fusão das antigas mira-illustrator (painéis 1920x800) e mira-infographic (quadrados 1920x1920). Uma única porta de entrada que escolhe formato e pipeline conforme o pedido.

Regras herdadas (obrigatórias)

Idioma: siga agents/_shared/idioma.md — todo texto visível revisado, acentuação 100% correta.
Regra de ouro: o conteúdo visual tem prioridade total sobre molduras e títulos decorativos.
Legibilidade: fontes grandes (mínimo 28px em canvas 1920), hierarquia clara, contraste alto.
Cores: use as CSS variables do tema do deck (--mira-primary etc.), nunca hardcoded.
Output: salve SEMPRE em decks/<nome-do-deck>/assets/. Nunca escreva em fontes vinculadas.

Decisão de formato

Pedido	Formato	Detalhes em
Imagem para slide horizontal, cena, foto	Painel 1920×800	`references/legacy-illustrator.md`
Resumo visual, quadro denso, overview	Infográfico 1920×1920	`references/legacy-infographic.md`
Diagrama com setas, arquitetura	Fullwidth no formato do slide	`references/legacy-illustrator.md` (Pipeline B)
Gráfico de dados estático	Fullwidth no formato do slide	`references/legacy-illustrator.md` (Pipeline C)

Pipelines

A — Fotorrealismo: invoque /mira-image-prompt para montar o prompt JSON e entregue ao usuário para gerar no serviço de imagem (Gemini/Nano Banana, Midjourney etc.). Se houver skill de geração instalada, encadeie.

B — Diagrama técnico (D3): gere HTML+D3 com o layout fullwidth, setas e labels legíveis. Consulte as diretrizes D3 em agents/mira-animator/references/.

C — Gráfico de dados (D3): idem, com escalas comentadas e eixos limpos.

D — Infográfico (D3): canvas 1920×1920, um dos 4 layouts (seções verticais, timeline, dado central com satélites, grid de KPIs) — código de exemplo em references/legacy-infographic.md.

Captura

Para converter HTML em PNG use o script desta skill, scripts/capture.cjs (Puppeteer). O caminho é relativo à pasta da skill; da raiz do projeto:

node agents/mira-visuals/scripts/capture.cjs <input.html> <output.png> <largura> <altura>

Instalado num projeto do usuário, o caminho vira .claude/skills/mira-visuals/scripts/capture.cjs.

É .cjs de propósito (mesmo padrão do mira-slide-to-video): roda igual no repo-fonte, que é "type": "module", e instalado, sem virar ESM. Se o puppeteer não estiver instalado, o script cai para puppeteer-core + o Chrome do cache; para forçar um binário, use PUPPETEER_EXECUTABLE_PATH.

Checklist final

Texto revisado (idioma.md)
Formato correto para o destino (slide 16:9 ou quadrado)
Cores do tema do deck
PNG salvo em decks/<deck>/assets/
Nada escrito em fontes vinculadas

More from this repository

same repository

mira-studio-full

sandeco/mira-animator

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.

2026-07-20138

mira-qrcode

sandeco/mira-animator

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.

2026-07-20138

mira-thirds

sandeco/mira-animator

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.

2026-07-20138

mira-webview

sandeco/mira-animator

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.

2026-07-20138

mira-studio

sandeco/mira-animator

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.

2026-07-19138

mira-animator

sandeco/mira-animator

Cria slides animados com looping interno obrigatório (D3.js v7+ ou 3D CSS), no padrão dos decks em mira-templates/decks/ e do esqueleto visual do mira-builder (glass-card, icon-hero, attribute-pills, replay-btn). 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".

2026-07-12138

name

mira-visuals

description

Skill: Mira Visuals — Imagens Estáticas para Slides

Fusão das antigas mira-illustrator (painéis 1920x800) e mira-infographic (quadrados 1920x1920). Uma única porta de entrada que escolhe formato e pipeline conforme o pedido.

Regras herdadas (obrigatórias)

Idioma: siga agents/_shared/idioma.md — todo texto visível revisado, acentuação 100% correta.
Regra de ouro: o conteúdo visual tem prioridade total sobre molduras e títulos decorativos.
Legibilidade: fontes grandes (mínimo 28px em canvas 1920), hierarquia clara, contraste alto.
Cores: use as CSS variables do tema do deck (--mira-primary etc.), nunca hardcoded.
Output: salve SEMPRE em decks/<nome-do-deck>/assets/. Nunca escreva em fontes vinculadas.

Decisão de formato

Pedido	Formato	Detalhes em
Imagem para slide horizontal, cena, foto	Painel 1920×800	`references/legacy-illustrator.md`
Resumo visual, quadro denso, overview	Infográfico 1920×1920	`references/legacy-infographic.md`
Diagrama com setas, arquitetura	Fullwidth no formato do slide	`references/legacy-illustrator.md` (Pipeline B)
Gráfico de dados estático	Fullwidth no formato do slide	`references/legacy-illustrator.md` (Pipeline C)

Pipelines

B — Diagrama técnico (D3): gere HTML+D3 com o layout fullwidth, setas e labels legíveis. Consulte as diretrizes D3 em agents/mira-animator/references/.

C — Gráfico de dados (D3): idem, com escalas comentadas e eixos limpos.

Captura

Para converter HTML em PNG use o script desta skill, scripts/capture.cjs (Puppeteer). O caminho é relativo à pasta da skill; da raiz do projeto:

node agents/mira-visuals/scripts/capture.cjs <input.html> <output.png> <largura> <altura>

Instalado num projeto do usuário, o caminho vira .claude/skills/mira-visuals/scripts/capture.cjs.

Checklist final

Texto revisado (idioma.md)
Formato correto para o destino (slide 16:9 ou quadrado)
Cores do tema do deck
PNG salvo em decks/<deck>/assets/
Nada escrito em fontes vinculadas