TheAngryPit/TheAngrySkills

Instalação de plugins: Antes de comandos de configuração ou atualização, siga as regras de execução de plugins quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.

Primeiro, mantenha esta skill atualizada — confirme com o usuário antes de executar: npx hyperframes skills update motion-graphics. Uma operação rápida e sem efeito quando tudo está atualizado; caso contrário, atualiza esta skill e as skills de domínio principais das quais ela depende antes que você dependa delas.

fonte figma: Se o logotipo/ativo/animação a ser construído vier de uma URL figma.com, execute /figma primeiro — exportação de ativos, tokens de marca e tradução Motion→GSAP se o gráfico for uma importação do Figma Motion — depois construa a partir de sua saída. Não controle o Figma diretamente por meio de ferramentas MCP brutas: isso ignora a sanitização SVG, a proveniência .media/manifest.jsonl e a vinculação var() do token de marca, portanto, uma alteração posterior da marca não pode ser propagada sem uma reimportação completa.

motion-graphics — ponto de entrada de despacho

A porta de entrada é /hyperframes. Esta skill cria um motion graphic curto, orientado por design e sem narração (o movimento é a mensagem; ~menos de 10s, sem locução). Qualquer coisa mais longa, narrada ou com várias cenas — ou qualquer incerteza → leia /hyperframes primeiro: a camada de intenção possui todas as decisões de rota.

Este fluxo de trabalho é autônomo por design — no máximo uma pergunta esclarecedora (agents/director.md), depois construa através da verificação sem revisão intermediária. A camada de intenção (/hyperframes → references/intent-interview.md) roteia aqui diretamente sem perguntas sobre a forma da execução; um storyboard e uma sessão de acompanhamento acrescentam pouco a uma peça tão curta. A renderização ainda é controlada pelo usuário: após as verificações e as provas de snapshot passarem, faça a pergunta canônica "visualizar primeiro ou renderizar?" de ../hyperframes/references/brief-contract.md. Quando um BRIEF.md existir, leia-o antes da pergunta do diretor.

Um motion graphic curto e orientado por design. Primeiro os ativos: decida a estratégia de ativos e obtenha material real antes de projetar o plano, depois projete o plano em torno do que você tem, em seguida, componha reutilizando as capacidades do catálogo. Todos os artefatos vão para PROJECT_DIR = videos/<project-name>/ (criado na Etapa 0); todos os caminhos abaixo são relativos a ele.

Fase	Execução	Artefato primário	Fluxo detalhado
init	Bash	hyperframes.json	Etapa 0
plan	subagente — decidir pesquisa? + classificar + estratégia de ativos	shot-plan.json (rascunho: categoria, consultas asset_needs, brief)	agents/director.md (Parte 1)
source ◇	Bash — resolver uso de mídia (pular se asset_needs estiver vazio)	assets/ + assets/index.md	phases/source/guide.md
design	subagente — projetar plano em torno dos ativos resolvidos	shot-plan.json (final: bloco(s) + layout + movimento + posições)	agents/director.md (Parte 2)
build	subagente — composição com reutilização primeiro	compositions/index.html	agents/builder.md
verify	Bash — lint, check, snapshots de prova; reparar em caso de falha	snapshots/contact-sheet.jpg	Etapa 5
approve	Perguntar visualizar ou renderizar; aguardar a resposta	aprovação explícita de renderização	Etapa 6
render	Bash — hyperframes render (MP4, ou --format webm/mov para sobreposição)	renders/video.mp4 ou sobreposição transparente	Etapa 6

◇ source é executado apenas quando a categoria escolhida declara ativos. Categorias de código/texto puro (por exemplo, kinetic-type, a maioria dos charts/stat) têm asset_needs: [] e vão direto do plano para o design.

Categorias — divididas pela decisão de pesquisa

A primeira decisão do plan é: isso precisa de uma pesquisa? Essa bifurcação divide as categorias em dois grupos; então a categoria específica é escolhida — para as orientadas por pesquisa, pelo tipo de conteúdo que a pesquisa retorna. Cada categoria é um categories/<id>/module.md (suas regras de planejamento + construção); o vocabulário de movimento compartilhado vive em references/motion-vocabulary.md (→ regras/blueprints hyperframes-animation + blocos de registro).

Categorias de formulário — sem pesquisa; o usuário fornece o conteúdo:

Categoria	Intenção	Baseia-se em
kinetic-type	linha marcante / citação / título, texto com movimento em primeiro lugar	blocos caption-* + regras de animação
stat	número herói único / contagem regressiva + anel	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	barra / linha / pizza / corrida / % a partir de dados	bloco data-chart
logo-reveal	selo de logotipo / fechamento de marca (logotipo do usuário)	logo-outro / rules/svg-path-draw
lower-thirds	barras de nome / título, chamadas, sobreposições sociais	caption-* + blocos de sobreposição do registro
maps	movimento geográfico — destacar regiões, conectar lugares, ampliar para um local (via vetorial ou via mapa base assado)	família us-map / world-map + bake-basemap.mjs

Categorias orientadas por pesquisa — pesquisar primeiro, depois animar por tipo de conteúdo (o caminho RWA):

Conteúdo retornado	Categoria	Animação
página da web / link	webpage	Animação de página da web / UI (rolagem, revelar, cursor, chamadas)
artigo de notícias	news	Revelar manchete + cartão de fonte + chamadas de fatos principais
tweet	tweet	Cartão de tweet animado
imagem / entidade	asset-fusion	A geometria do ativo torna-se o gráfico (fusão diegética RWA)

Ordem de construção: um de cada vez, cobertura primeiro (rascunho é suficiente). kinetic-type portado do protótipo; o restante segue.

Pré-requisitos

macOS Apple Silicon ou Linux x64. Ferramentas do sistema: brew install node ffmpeg. npx hyperframes doctor uma vez. Renderização GPU macOS: export PRODUCER_BROWSER_GPU_MODE=hardware.

Chaves opcionais (fallbacks locais se não configuradas) — necessárias apenas por categorias que obtêm/geram ativos via uso de mídia:

Chave	Usada para	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	geração de imagem (resolução de uso de mídia)	pular geração / apenas pesquisa
(fornecedores de pesquisa/ativos)	pesquisa de ativos reais para webpage/news/tweet + asset-fusion	a categoria degrada para sem ativos

Fluxo

Etapa 0 — Inicializar

cwd é a raiz do workspace do agente; escreva todos os artefatos sob PROJECT_DIR = videos/<project-name>/. <project-name>: use o diretório que o usuário forneceu, senão um nome curto em kebab-case a partir da intenção (<subject>-motion). Não o nome base do workspace ou um timestamp.

Apenas quando $PROJECT_DIR/hyperframes.json estiver ausente:

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics

init verifica as skills instaladas em relação às mais recentes no GitHub e atualiza o conjunto global se alguma estiver desatualizada.

Restrições: nunca execute hyperframes init na raiz do workspace; nunca aninhe outro hyperframes/ dentro de PROJECT_DIR; todo comando Bash (mestre + subagentes) é um subshell (cd "$PROJECT_DIR" && ...) — nunca cd simples.

Etapa 1 — Planejar (subagente: Diretor Parte 1)

Despache um subagente. prompt = agents/director.md completo + ## Contexto de despacho (SKILL_DIR / PROJECT_DIR / a solicitação do usuário / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Ele deve:

1. Decidir: isso precisa de uma pesquisa? (a primeira bifurcação)
   • Não → escolha uma categoria de formulário (kinetic-type / stat / charts / logo-reveal / lower-thirds); o conteúdo é fornecido pelo usuário; asset_needs: [].
   • Sim → emita um plano de pesquisa em asset_needs[] (notícias / web / tweet / imagem; consultas de dois polos). A categoria orientada por pesquisa específica (webpage / news / tweet / asset-fusion) é confirmada pelo tipo de conteúdo retornado na Etapa 2 e finalizada na Etapa 3.
2. Escreva um rascunho de shot-plan.json (envelope + categoria de formulário escolhida ou intenção de pesquisa + asset_needs + um parágrafo de brief do plano). Schema: references/shot-plan-ir.md.

Validação: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.

Etapa 2 — Obter ◇ (Bash: uso de mídia, condicional)

Se shot-plan.json.asset_needs não estiver vazio, resolva ativos (pesquisar / gerar / buscar → caminhos congelados específicos do projeto + ledger). Veja phases/source/guide.md (encapsula media-use resolve; as categorias orientadas por pesquisa usam a pesquisa de notícias/web/tweet/imagem). Se asset_needs estiver vazio, pule para a Etapa 3.

# ilustrativo — veja phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)

Degrade graciosamente: se uma pesquisa/fornecedor não estiver disponível, a categoria cai para sem ativos (anote em context.log).

Etapa 3 — Projetar (subagente: Diretor Parte 2)

Despache um subagente (prompt = agents/director.md Parte 2 + contexto de despacho incluindo o assets/index.md resolvido se a Etapa 2 foi executada + catalog-map.md). Ele projeta o plano em torno dos ativos disponíveis: escolha o(s) bloco(s) do catálogo + as regras/blueprints hyperframes-animation, o layout, o movimento, os beats e (para asset-fusion) as element_positions + a paleta do conta-gotas. Finaliza shot-plan.json (content.block + content.customize + conteúdo por categoria).

Etapa 4 — Construir (subagente: Builder, reutilização primeiro)

Despache um subagente. prompt = agents/builder.md completo + contexto de despacho (shot-plan.json, catalog-map.md, o module.md da categoria, references/motion-vocabulary.md, references/builder-contract.md). Reutilização primeiro: npx hyperframes add <block> + personalizar no local; escrever manualmente apenas lacunas + a facilidade de fusão de ativos. Saída compositions/index.html honrando o contrato HF (linha do tempo GSAP pausada em window.__timelines, class="clip" + ids estáveis, tl.seek(0), determinístico).

Etapa 5 — Verificar (Bash → subagente de reparo em caso de falha)

(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)

Escolha tempos de prova que mostrem o estado de abertura, o movimento característico e a pausa final. Inspecione a folha de contato ou de snapshot gerada antes de continuar. Em caso de falha em lint, check ou snapshot, despache o subagente de reparo (agents/finalize.md) para uma passagem de correção no local e, em seguida, re-execute a verificação com falha. Nunca altere uma duração fixa apenas para ocultar um defeito.

Etapa 6 — Aprovar e renderizar (Bash)

Faça uma pergunta: "visualizar primeiro ou renderizar?" Se o usuário escolher visualizar, abra o Studio e retorne ao mesmo portal de aprovação após as revisões:

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

Renderize apenas após uma resposta explícita de renderização:

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# variante de sobreposição transparente: --format webm  (ou mov)

Verifique se a saída existe, não está vazia e tem a duração pretendida. A entrega final nomeia o artefato, a duração real, o ID da composição ou quadro, os tempos de prova e a folha de contato ou de snapshot inspecionada. As flags vivem em /hyperframes-cli → references/preview-render.md.

Tabela de retomada

Estado	Continuar de
nenhum shot-plan.json	Etapa 1 (planejar)
shot-plan.json tem asset_needs, nenhum assets/	Etapa 2 (obter)
shot-plan.json final, nenhum compositions/index.html	Etapa 3/4 (projetar+construir)
compositions/index.html existe, snapshots de prova ausentes	Etapa 5 (verificar)
verificações e snapshots de prova passam, nenhuma renderização aprovada	Etapa 6 (aprovação)
renderização aprovada existe	verificar saída, depois relatar

Notas de design (mantenedores — a execução não lê isto)

• Racional de ativos primeiro: a obtenção é carregada na frente e informa o design do plano (o fluxo RWA: analisar → pesquisar → revisar)