Agent skill

Mira Storyboard

by sandeco in sandeco/mira-animator

Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em…

MITAuto-check passedMedia & Creative

Install Mira Storyboard

skills CLI
$ npx skills add sandeco/mira-animator --skill mira-storyboard -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sandeco/mira-animator mira-storyboard --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sandeco/mira-animator.git skills-src && mkdir -p .claude/skills && cp -r skills-src/agents/mira-storyboard .claude/skills/mira-storyboard && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
mira-storyboard
GitHub stars
218
Token cost
~2.5k tokens
SKILL.md length
1,192 words
Files
1
Skills in repo
57
Repo updated
First seen
Licence
MIT

At a glance

Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em…

  • Works in 7 steps: Leia storyboard/understanding.md.… → As metáforas candidatas do… → Havendo ambiguidade criativa, gere 2 a 3… → …
  • Tasks that involve Comics and storyboards
  • SKILL.md covers Por que esta skill existe, Regra que não se afrouxa: você…, A cena semântica and O fluxo, plus 7 more sections
  • Calls npx

What it does

Mira Storyboard is an agent skill from sandeco/mira-animator. Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em opções concorrentes, versionadas a cada correção, com folha de contato que abre em file://. Aceita correção em linguagem natural, sem o autor tocar em SVG nem em coordenada. Usar depois do /mira-concept-align, ou quando o autor pedir storyboard, rascunho da ideia, esboço antes de animar, me mostra como você entendeu. NÃO…

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts. Compatibility notes: Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.

It sits in Media & Creative, covering Comics and storyboards and Slides and decks. The repository describes itself as: Agentes e templates para criação de slides animados com D3.js em HTML. The licence is MIT.

When your agent uses it

  • Tasks that involve Comics and storyboards
  • Tasks that involve Slides and decks

Example prompts

  • “/mira-storyboard”

Requirements

  • Node.js
  • Compatibility (from SKILL.md): Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Leia storyboard/understanding.md. Ausente, avise que o alinhamento não foi feito e ofereça: rodar /mira-concept-align antes, ou seguir com…
  2. As metáforas candidatas do understanding.md viram as opções concorrentes.
  3. Havendo ambiguidade criativa, gere 2 a 3 opções, nunca escolha uma em silêncio. Cada uma numa pasta: storyboard/concept-v01/option--/. Sem…
  4. Escreva um option.json na pasta de cada opção. É ele que dá o cabeçalho da opção na folha de contato, e é onde o RF-04 vira arquivo em vez…
  5. 3 a 8 quadros por opção. Menos de 3 não mostra progressão; mais de 8 é produção disfarçada de esboço. O Concept Storyboard representa o…
  6. Rode o render.
  7. Entregue o caminho absoluto da folha de contato e pare. Quem olha é o autor.

What it can do on your machine

Read from SKILL.md and the folder at commit d857f32. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.

    From compatibility in the SKILL.md frontmatter.

Context cost

Mira Storyboard loads about 2.5k tokens when it runs. Until then it costs about 204 tokens; SKILL.md has 1,192 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~204
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sandeco/mira-animator at commit d857f32, republished under its MIT licence (© sandeco). 1,192 words, ~2,501 tokens.

Download SKILL.mdSave it as .claude/skills/mira-storyboard/SKILL.md (or your agent's skills folder).
name
mira-storyboard
description
Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em opções concorrentes, versionadas a cada correção, com folha de contato que abre em file://. Aceita correção em linguagem natural, sem o autor tocar em SVG nem em coordenada. Usar depois do /mira-concept-align, ou quando o autor pedir storyboard, rascunho da ideia, esboço antes de animar, me mostra como você entendeu. NÃO faz arte nem acabamento. NÃO produz o Production Storyboard, que já é do /mira-direct-slide-sequence, /mira-direct-scene e /mira-direct-cinematic-motion. NÃO escreve HTML de slide nem animação, que é do /mira-animator. NÃO conduz a conversa de descoberta, que é do /mira-concept-align.
compatibility
Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.
license
MIT
metadata.author
sandeco
metadata.version
1.0.0

MIRA Storyboard

O quadro existe para o autor poder discordar barato.

Fluxo alternativo, acionado só quando o autor pede. Não faz parte do caminho normal de um deck: existe para quando a ideia não está clara. O que sai daqui é insumo, referência para quem desenhar depois ou material para melhorar um deck que saiu confuso. Não é contrato e não obriga nada a jusante.

Por que esta skill existe

Hoje o custo do erro é a animação pronta. É muito melhor ele rejeitar um esboço de caixas e setas do que rejeitar um deck implementado.

Mas gerar cedo não basta, e isso já foi medido. Num deck real havia um storyboard de 16 quadros em disco uma hora e meia antes de a cadeia rodar, e ele foi citado zero vezes na única peça que chega em quem anima. Por isso o storyboard aprovado vira storyboard/approved/, e o npx mira-animator storyboard verify <deck> confere se ele atravessou.

O Production Storyboard não nasce aqui: ele já existe, repartido entre /mira-direct-slide-sequence, /mira-direct-scene e /mira-direct-cinematic-motion. Você entrega a etapa que faltava, o Concept Storyboard, e estabelece a fronteira: Production só nasce com Concept aprovado.

Regra que não se afrouxa: você não desenha SVG à mão

Você escreve o que a cena significa, em JSON. Quem desenha é o renderizador.

Agente que escreve SVG em prosa livre entrega boneco de trapézio com cabeça de círculo, defeito que o /mira-asset-scout já documenta. Pior: a qualidade oscila de quadro para quadro, e o autor passa a julgar o traço em vez da ideia.

bash
npx mira-animator storyboard render <deck>/storyboard

Isso lê todo .json, escreve .svg e .png ao lado de cada um, e regera a folha de contato storyboard/index.html.

Na folha, cada opção é um bloco separado, empilhado, com um "OU" entre elas, e ao lado de cada quadro vai um texto curto: o número, a intenção da cena em uma linha e a rastreabilidade em nota miúda. As opções já foram lado a lado em colunas, e ler na horizontal fundia as duas histórias numa só.

A cena semântica

json
{
  "slide": 3,
  "concept_reference": { "transformation": "progressive-loss-of-original-information" },
  "visual_intent": "mostrar que a distância para a fonte original está aumentando",
  "composition": {
    "left":   { "object": "photo", "label": "cópia 2", "state": { "degraded": 0.5 } },
    "center": { "object": "copier", "label": "o modelo" },
    "right":  { "object": "photo", "label": "cópia 3", "state": { "degraded": 0.7 } }
  },
  "actions": [
    { "arrow": { "from": "left", "to": "center" } },
    { "arrow": { "from": "center", "to": "right" } }
  ],
  "annotation": ["A cópia anterior agora alimenta a próxima geração."]
}

O que precisa estar certo, e por quê:

  • concept_reference e visual_intent são obrigatórios. Quadro sem os dois não é gerado. São eles que dizem a quem desenha por que aquele elemento existe.
  • As setas apontam para a POSIÇÃO (left, center), não para o nome do objeto. Nome de objeto só vale quando aparece uma vez na cena. Duas fotos e uma seta from: photo é recusada, porque apontaria para a errada em silêncio.
  • Posições disponíveis: left, center, right, top, bottom, top-left, top-right, bottom-left, bottom-right. Nunca coordenada: a geometria é do renderizador, e a grade colapsa para as faixas ocupadas, então cena de 2 objetos preenche o quadro em vez de encostar num canto.
  • A progressão é state, não objeto novo. { "degraded": 0.7 } faz a mesma primitiva desenhar o estágio. Assim o que muda entre quadros é um valor, e a diferença vira informação.
  • Primitivas disponíveis: person, photo, copier, box, circle. Objeto sem primitiva vira caixa tracejada com o nome dentro, e o relatório lista os faltantes. Isso é resposta correta: melhor dizer "não sei desenhar isto" do que desenhar mal.

O fluxo

  1. Leia storyboard/understanding.md. Ausente, avise que o alinhamento não foi feito e ofereça: rodar /mira-concept-align antes, ou seguir com o que o autor descrever agora. Não bloqueie, mas registre no índice que nasceu sem alinhamento.

  2. As metáforas candidatas do understanding.md viram as opções concorrentes.

  3. Havendo ambiguidade criativa, gere 2 a 3 opções, nunca escolha uma em silêncio. Cada uma numa pasta: storyboard/concept-v01/option-<letra>-<slug>/. Sem ambiguidade (o autor já decidiu), gere uma só e diga por que não abriu concorrência.

  4. Escreva um option.json na pasta de cada opção. É ele que dá o cabeçalho da opção na folha de contato, e é onde o RF-04 vira arquivo em vez de promessa:

    json
    {
      "titulo": "Xerox da Xerox",
      "metafora": "uma copiadora que passa a copiar a própria cópia",
      "representa": "a perda como degradação física e acumulada do sinal",
      "distorce": "sugere um aparelho único e um operador consciente"
    }

    O campo distorce é o que faz a opção ser escolhível. Sem ele o autor compara desenhos; com ele compara trocas. Opção sem custo declarado é opção mal descrita.

  5. 3 a 8 quadros por opção. Menos de 3 não mostra progressão; mais de 8 é produção disfarçada de esboço. O Concept Storyboard representa o conceito, não o deck: ele não precisa de um quadro por slide.

  6. Rode o render.

  7. Entregue o caminho absoluto da folha de contato e pare. Quem olha é o autor.

Show full SKILL.md (472 more words)Show less

O checkpoint

Depois de gerar, apresente seis coisas, explicitamente:

  1. qual interpretação você está representando;
  2. qual metáfora escolheu;
  3. qual é a progressão entre os quadros;
  4. quais imagens gerou;
  5. quais decisões visuais tomou;
  6. onde você acredita que ainda existe incerteza.

E feche com pergunta de alinhamento, nunca com "está bom?":

"Minha interpretação é que a fonte original permanece como referência enquanto as cópias sucessivas se deterioram. Nos quatro quadros essa distância aumenta. É essa dinâmica que você está imaginando?"

Correção em linguagem natural

O autor não edita SVG nem dá coordenada. Ele diz:

"No slide 3 a fotografia original deve desaparecer." "A degradação está muito rápida." "Quero a pessoa olhando para o original durante toda a sequência." "Troque a máquina por uma impressora."

Antes de aplicar, declare como traduziu aquilo em mudança de cena. Correção ambígua vira pergunta, não palpite.

Correção que contradiz uma negative constraint do understanding.md: aponte, citando a constraint. Obedeça se ele reafirmar, e registre a contradição no índice.

Versionamento

Toda correção gera versão nova: concept-v01/, concept-v02/, concept-v03/. Versão anterior nunca é sobrescrita nem apagada: é ela que deixa a evolução do pensamento legível.

O autor corrigindo uma versão antiga em vez da atual: pergunte se quer ramificar dali ou aplicar na atual. Não adivinhe.

Mantenha storyboard/storyboard-index.md:

markdown
# Storyboard Index

## Conceito
## Metáfora atual
## Versão atual
## Status
draft | review | approved | rejected

## Storyboards gerados
### v01
Descrição:
Feedback do usuário:
### v02
Descrição:
Mudanças:
Feedback do usuário:

## Versão aprovada
## Decisões visuais consolidadas

O feedback do autor vai literal, entre aspas. Paráfrase é onde a interpretação se perde.

Aprovação

Ato exclusivo do autor, por intenção explícita. Você nunca marca approved sozinho.

Ao aprovar: copie os arquivos da versão aprovada para storyboard/approved/ (a pasta de origem continua em disco). É approved/ que os agentes a jusante leem. Aprovando outra opção depois, mova a anterior para approved-vNN/ antes: aprovação não se sobrescreve.

As opções concorrentes não são apagadas. Ficam com status rejected no índice, com o motivo que o autor deu, quando der.

Depois de aprovar, devolva o controle ao /mira-concept-align para o fecho do concept-brief.md, e confira o vínculo:

bash
npx mira-animator storyboard verify <deck>

Quando ele rejeita tudo

Não insista. Rejeitar todas as opções é sinal de divergência conceitual, não de erro de desenho. Devolva ao /mira-concept-align. É exatamente o que essa camada existe para capturar, e capturar cedo é o ganho.

Quando o esboço não basta

A resposta é enriquecer o vocabulário: primitiva nova, label mais explícito, annotation nomeando o que a forma não mostra. Nunca trocar de tecnologia. Geração de imagem por modelo está fora do escopo por decisão do autor, por custo. Se depois de enriquecer ele continuar não reconhecendo a ideia, isso vira decisão dele, apresentada explicitamente.

Limites

Preto e branco, geométrico, sem acabamento. Você não faz arte: clareza conceitual acima de qualidade artística, e o traço de rascunho é proposital, porque quadro com cara de acabado convida crítica estética quando o que se quer é crítica conceitual.

Escreva só dentro de storyboard/. O SVG do storyboard nunca entra no index.html do deck.

© sandeco, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in agents/mira-storyboard of sandeco/mira-animator.

Open the folder on GitHubat commit d857f32

Compare with similar skills

Mira Storyboard next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mira Storyboard compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Mira Storyboard this skillsandeco/mira-animator218—~2.5kAutomated safety check: PassMIT
Scenario Seedance Storyboardscenario-labs/skills946—~2.7kAutomated safety check: PassMIT
Ppt Agent Workflowmucsbr/ppt-agent-workflow-san645—~1.9kAutomated safety check: PassNone
Book Media Generatordmccreary/ibook-skills105—~1.7kAutomated safety check: PassCC-BY-NC-4.0
Slide Outlinemanojbajaj95/claude-gtm-plugin105—~3.4kAutomated safety check: PassMIT
Claude Designjiji262/claude-design-skill204—~3.6kAutomated safety check: PassMIT

Similar skills

  • Scenario Seedance Storyboard

    scenario-labs/skills

    A skill your agent uses when a Seedance video must hold continuous movement across shots: dance choreography, fights, sports, or any performance where limbs teleport, feet slide, or motion resets at…

    946 GitHub stars~2.7k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Ppt Agent Workflow

    mucsbr/ppt-agent-workflow-san

    Guide an installing agent through a staged PPT or slide workflow without constraining its implementation choices.

    645 GitHub stars~1.9k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check passed
  • Book Media Generator

    dmccreary/ibook-skills

    Generates media for intelligent textbooks - slide decks and presentations (MARP web decks in docs/slides/ or PowerPoint .pptx lecture downloads), illustrated stories and graphic novels…

    105 GitHub stars~1.7k tokensUpdated yesterday
    Documents & OfficeAuto-check passed
  • Slide Outline

    manojbajaj95/claude-gtm-plugin

    A skill your agent uses whenever a user wants to create a presentation outline, slide deck structure, storyboard slides, or plan a deck for any context (talk, boardroom, email report).

    105 GitHub stars~3.4k tokensUpdated 23 days ago
    Documents & OfficeAuto-check passed
  • Claude Design

    jiji262/claude-design-skill

    Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

    204 GitHub stars~3.6k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed
  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    135k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed

More from sandeco/mira-animator

All 57 skills in this repo
  • Mira Fast

    sandeco/mira-animator

    Cria um deck Mira completo em uma chamada, com uma folha por slide executada em paralelo por um workflow do Claude Code.

    218 GitHub stars~3k tokensUpdated 26 days ago
    Auto-check passed
  • Mira History

    sandeco/mira-animator

    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.

    218 GitHub stars~4k tokensUpdated 26 days ago
    Auto-check passed
  • Mira Img Animator

    sandeco/mira-animator

    Transforma imagens (fotos, logos, diagramas) em animações D3.js interativas e self-contained.

    218 GitHub stars~1.7k tokensUpdated 26 days ago
    Auto-check passed
  • Mira Visuals

    sandeco/mira-animator

    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).

    218 GitHub stars~856 tokensUpdated 26 days ago
    Auto-check passed
  • Mira Design Audience Journey

    sandeco/mira-animator

    Projetar a experiência psicológica, emocional e intelectual do público ao longo de uma história MIRA, convertendo Story Bible, roteiro ou beats narrativos em uma Audience Journey Map que controla…

    218 GitHub stars~3k tokensUpdated 26 days ago
    Auto-check passed
  • Mira Direct Slide Sequence

    sandeco/mira-animator

    Converter uma MIRA Story Bible e uma Audience Journey Map em uma sequência cinematográfica de cenas-slide, produzindo um MIRA Slide Score com função dramática, quadro inicial, ação, virada…

    218 GitHub stars~3k tokensUpdated 26 days ago
    Auto-check passed

Questions about Mira Storyboard

What does Mira Storyboard do?

Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em…. Mira Storyboard is an agent skill from sandeco/mira-animator. Diretor Criativo do Mira: transforma interpretação conceitual em hipótese visual verificável, gerando quadros de Concept Storyboard reais em SVG e PNG dentro de storyboard/ na raiz do deck, em opções concorrentes, versionadas a cada correção, com folha de contato que abre em file://.

When should I use Mira Storyboard?

Mira Storyboard fits situations like: tasks that involve Comics and storyboards; tasks that involve Slides and decks.

How do I install Mira Storyboard in Claude Code?

Run `npx skills add sandeco/mira-animator --skill mira-storyboard -a claude-code`. Or copy the skill folder (agents/mira-storyboard in sandeco/mira-animator) into .claude/skills/mira-storyboard in your project. Claude Code loads it when a task matches its description.

How do I install Mira Storyboard in Codex?

Run `npx skills add sandeco/mira-animator --skill mira-storyboard -a codex`. Or copy the skill folder (agents/mira-storyboard in sandeco/mira-animator) into .agents/skills/mira-storyboard in your project. Codex loads it when a task matches its description.

Can I use Mira Storyboard in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sandeco/mira-animator --skill mira-storyboard -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mira-storyboard, .gemini/skills/mira-storyboard, .github/skills/mira-storyboard and .opencode/skills/mira-storyboard in your project.

What does Mira Storyboard need to run?

Going by SKILL.md and its folder, Mira Storyboard needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Compatibility (from SKILL.md): Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills..

Does Mira Storyboard access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Mira Storyboard safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mira Storyboard use?

Mira Storyboard is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mira Storyboard use?

About 2.5k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mira Storyboard?

Skills that share tags, products or a category with Mira Storyboard: Scenario Seedance Storyboard (scenario-labs/skills, 946 stars), Ppt Agent Workflow (mucsbr/ppt-agent-workflow-san, 645 stars), Book Media Generator (dmccreary/ibook-skills, 105 stars) and Slide Outline (manojbajaj95/claude-gtm-plugin, 105 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mira Storyboard?

sandeco (a GitHub user) maintains it in sandeco/mira-animator, which has 218 GitHub stars. The repository holds 57 skills in this directory. The repository was last updated on September 14, 2026.

Source: sandeco/mira-animator on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.