mira-visuals

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.

Jump to install

Repository: sandeco/mira-animator
Last source activity: July 29, 2026 at 23:44
Detected SKILL.md language: Portuguese
Stars: 202
Forks: 58

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

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.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/sandeco/mira-animator --skill mira-visuals

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

4 files

SKILL.md

Source instructions · Read-only preview

name: mira-visuals
description: 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.

# 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) 1. **Idioma**: siga `agents/_shared/idioma.md` — todo texto visível revisado, acentuação 100% correta. 2. **Regra de ouro**: o conteúdo visual tem prioridade total sobre molduras e títulos decorativos. 3. **Legibilidade**: fontes grandes (mínimo 28px em canvas 1920), hierarquia clara, contraste alto. 4. **Cores**: use as CSS variables do tema do deck (`--mira-primary` etc.), nunca hardcoded. 5. **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: ```bash 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

View on GitHub

Back to search Back to installation

mira-history

Transforma o texto de uma história (normalmente infantil) numa animação narrada no Mira: cenas com câmera e clima, atores em SVG, narração, música e QR para o celular. Use em /mira-history, "anima essa história", "história animada", "conto animado" ou conto colado pedindo animação. Num deck dela (tem mira/historia.js), também gera o vídeo mp4 da história (inclusive para WhatsApp) e prompt de música para o Suno. Vídeo de deck comum é do /mira-slide-to-video. Não é para explicar conceito nem slide comum.

2026-09-14

mira-slide-to-video

Gera um .mp4 de um ou mais slides de um deck do Mira gravando a animação real (Chrome headless + ffmpeg): cada slide dispara do zero, sem vazar o anterior, preenchendo o frame. Recebe quais slides (um, vários ou todos) e a resolução (16:9, 9:16, 1:1), encadeia com transição (4 segundos por slide, alterável), toca animações finitas como o chart-race por inteiro e nunca toca no deck original. Use SEMPRE que o usuário disser /mira-slide-to-video, gerar vídeo do slide, transformar slide em vídeo, exportar slide como mp4, gravar a animação do slide, vídeo do deck, quero um mp4 do slide, renderizar o slide em vídeo, ou fazer um Reels/Short a partir do slide. NÃO para deck de história do /mira-history (tem mira/historia.js): o vídeo dele é feito pela própria /mira-history.

2026-09-14

mira-post-it

Mural de POST-ITS AO VIVO no Mira, em dois slides: no primeiro a pergunta com um QR-code, no segundo cada resposta em TEXTO LIVRE da plateia vira um post-it que cola na parede, um a um. Diferente do mira-survey e do mira-quiz, aqui a resposta é aberta, não há alternativas nem resposta correta, e nada é agregado: cada pessoa aparece com a frase dela. Use SEMPRE que o usuário disser /mira-post-it, post-it, mural de respostas, parede de respostas, resposta aberta, resposta em texto livre, pergunta aberta para a plateia, as respostas vão aparecendo no slide, a plateia escreve e aparece na tela, mural ao vivo, ou pedir um slide onde a sala escreve uma frase curta pelo celular e ela surge na projeção. Para votação em alternativas use /mira-survey; para pergunta com resposta correta use /mira-quiz; para um QR sem leitura de respostas use /mira-qrcode.

2026-09-12

View all from this repository

mira-visuals

Source facts

Install options

Review the source files

More from this repository

More from this repository