Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

mira-3d

Adiciona elementos 3D reais (profundidade, rotação contínua, arrastar e zoom) ao canvas de um slide do Mira, em card limpo com o 3D maximizado. Escolhe sozinha entre três camadas: CSS 3D puro, Three.js procedural e glTF (.glb). Herda a Regra Zero do mira-animator (gira sozinho, pausa no arrasto e retoma); só a camada .glb exige servidor HTTP local. Use SEMPRE que o usuário disser /mira-3d, elemento 3D, objeto 3D no slide, coloca um cérebro ou robô 3D, esfera de partículas, rede de nós em 3D, carrega esse .glb, modelo glTF, ou pedir um slide com profundidade real e rotação.

128 repo starsObserved in 1 repos
Design
GitHub

mira-animated-typing

Gera a cena "prompt digitado em zoom": simula uma pessoa digitando um comando de agent harness (Claude Code, Codex) em fonte mono de terminal gigante sobre fundo escuro, cursor piscando estilo Windows, com janela deslizante quando o texto passa da tela. Aceita cor por trecho (color=#HEX), quebra de linha (/n) e print do texto como entrada. Zero dependências, roda por file://. Use SEMPRE que o usuário disser "/mira-animated-typing", "texto digitado em zoom", "animação de digitação", "simular digitando um comando", "prompt gigante sendo digitado", "efeito typing", "comando sendo escrito na tela", ou pedir uma cena de comando de agente digitado em tela cheia.

128 repo starsObserved in 1 repos
Design
GitHub

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

128 repo starsObserved in 1 repos
Design
GitHub

mira-chart-race

Cria um slide de gráfico de corrida no Mira: série temporal animada que corre no tempo, toca uma vez e para no fim. Dois modos: "bars" (barras que trocam de posição no ranking) e "lines" (linhas desenhadas com o rótulo perseguindo a ponta); dados em CSV largo embutidos, roda por file:// offline, gera section em D3 v7 no tema do Mira. Use SEMPRE que o usuário disser /mira-chart-race, gráfico de corrida, corrida de barras, bar chart race, racing chart, gráfico animado no tempo, dados temporais animados, ranking ao longo do tempo, barras que mudam de posição, linhas crescendo no tempo. Para gráfico estático use /mira-chart; para enquete ao vivo use /mira-survey.

128 repo starsObserved in 1 repos
Design
GitHub

mira-icon-morph

Gera num slide do Mira uma forma que morfa em outra(s) em loop a partir de CONCEITOS em palavras (o usuário só tem a ideia, não o arquivo). Busca cada conceito na API do Iconify, valida licença, baixa o SVG e monta a timeline de morph (GSAP + MorphSVGPlugin vendorados; deck offline file://). Só licença aberta (MIT, Apache-2.0, CC0 ou CC-BY), com atribuição em CREDITS.md; recusa personagens/marcas de IP protegida e sugere arte original. Reaproveita o render do mira-svg-morph. Use SEMPRE que o usuário disser "/mira-icon-morph", "nuvem virando lâmpada", "uma semente que vira árvore", "cadeado abrindo", "morfa o conceito X no Y", "acha um ícone que vira outro", "busca uns ícones e faz morph", ou descrever em palavras dois ou mais conceitos para um virar o outro SEM fornecer arquivos. Se o usuário JÁ tem os arquivos .svg, use mira-svg-morph. Para metáfora densa/emergente (partículas, explosão), use mira-animator (D3).

128 repo starsObserved in 1 repos
Design
GitHub

mira-image-prompt

Cria prompts JSON estruturados para geração de imagens de produto com estética luxuosa e cinematográfica. Use sempre que o usuário quiser gerar um prompt de imagem, criar foto de produto, ou fotografar (comida, bebida, cosmético, joia, moda ou qualquer item visual) com IA. Ative também ao mencionar: "prompt para imagem", "gerar imagem de produto", "foto de produto com IA", "prompt para Midjourney/DALL-E/Flux", "fotografar produto", "montar um prompt JSON de imagem".

128 repo starsObserved in 1 repos
Design
GitHub

mira-image-template

Cria um NOVO template de deck do Mira a partir de imagem(ns) de referência (prints de slides e/ou logomarca): reconhece o design system e a disposição dos elementos e salva o esqueleto index.html (design system no bloco @MIRA:THEME) mais o tema em mira-templates/, para aparecer no /mira-new. Use SEMPRE que o usuário disser "/mira-image-template", "criar template a partir de imagem", "template a partir desse print", "transforma essa tela em template", "monta um template com essa identidade", "usa essa logomarca como template", "extrai o design system dessa imagem", "novo template de deck a partir de imagem", ou anexar imagens pedindo para virarem um template/identidade de slides.

128 repo starsObserved in 1 repos
Design
GitHub

mira-svg-animator

Anima um SVG que o usuário FORNECE dentro de um slide do Mira, dando movimento próprio à forma (não vira outra forma, isso é morph). Usa GSAP vendorado offline (file://) e escolhe a técnica por transform, DrawSVGPlugin (o traço se desenha) ou MotionPathPlugin (curva). Para animar uma PARTE, ela precisa ser um elemento separado; se o SVG vier como path único fundido, a skill separa por clipPath ou editando o path. Remove fundo opaco, define a origem do movimento, herda a Regra Zero e respeita prefers-reduced-motion. Use SEMPRE que o usuário disser /mira-svg-animator, anima esse svg, faz a borboleta bater asas, gira essa roda, faz esse desenho se mexer, desliza esse svg, faz pulsar, o traço se desenha sozinho, ou passar um SVG pedindo movimento. Para uma forma virando OUTRA use mira-svg-morph ou mira-icon-morph.

128 repo starsObserved in 1 repos
Design
GitHub

mira-svg-morph

Gera num slide do Mira (novo ou existente) uma forma SVG que morfa em outra(s) em loop contínuo, com GSAP e MorphSVGPlugin vendorados localmente (deck offline, file://). O usuário aponta 2 ou mais arquivos .svg da pasta assets/ na ordem do morph; a skill inline os paths com ids únicos, converte formas não-path e monta a timeline em loop. Card limpo, laranja FF904D, herda a Regra Zero e respeita prefers-reduced-motion. Use SEMPRE que o usuário disser /mira-svg-morph, morfa esse svg no outro, uma forma virando outra, morphing de svg, transição de forma, faz um ícone virar outro, ou der dois ou mais SVGs pedindo um virar o outro. Quando o usuário só descreve em palavras, use mira-icon-morph.

128 repo starsObserved in 1 repos
Design
GitHub

mira-thirds

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.

128 repo starsObserved in 1 repos
Design
GitHub