Instalações de plugin: Antes dos comandos de configuração ou atualização, siga as regras de instalação de plugin 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 faceless-explainer. Uma operação rápida sem efeitos quando tudo está atualizado; caso contrário, atualiza esta skill e as skills principais do domínio das quais ela depende antes de usá-las.
media-use: Antes de obter áudio/imagens/logos, chame
/media-usepara resolver BGM/SFX/imagens do catálogo HeyGen e logotipos de suas fontes oficiais. Execute--adoptprimeiro para registrar ativos existentes. Consulte a skill/media-use. Quando o aplicativo host fornecer suas próprias ferramentas de música ou efeitos sonoros, use-as para música e efeitos sonoros.
Faceless Explainer para HyperFrames
Use esta skill para transformar um corpo de texto em um vídeo explicativo: escolha um sistema de design, planeje uma história didática e construa-a quadro a quadro no HyperFrames. Faceless (sem rosto) significa que cada visual é inventado a jusante — não há etapa de captura e nenhum inventário de ativos real.
A porta de entrada é
/hyperframes. Você é o orquestrador. Execute cada etapa, verifique sua portão e só então continue. Esta skill é para explicar um tópico a partir de texto, sem produto e sem site para capturar. Qualquer outra intenção, um simples "fazer um vídeo" ou qualquer incerteza → leia/hyperframesprimeiro — a camada de intenção é dona de toda decisão de rota, e uma criação nova chegando aqui semBRIEF.mdpassa por ela de qualquer forma (regra de abertura da Configuração).
Você é o orquestrador. Trabalhe em videos/<projeto>/. Execute as etapas em ordem e passe por cada portão antes de continuar. As etapas com portão do usuário são Etapa 0, Etapa 3 e Etapa 6. Leia ../hyperframes/references/brief-contract.md antes da Etapa 0 — ele define os tipos de portão e como flow/storyboard do BRIEF.md derivam o modo que rege os portões das Etapas 3/4/6. Faça você mesmo cada etapa, exceto a Etapa 5, onde você despacha um sub-agente por quadro. Não coloque regras de design ou movimento aqui; elas vivem no sub-agente frame-worker, nas regras locais desta skill ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ e em hyperframes-creative.
Fluxo de trabalho: Etapa 0 configuração → hyperframes.json; Etapa 1 briefing → capture/extracted/; Etapa 2 sistema de design → frame.md; Etapa 3 storyboard/script → STORYBOARD.md e SCRIPT.md; Etapa 3.1 áudio → audio_meta.json; Etapa 4 design visual → STORYBOARD.md enriquecido; Etapa 5 quadros → compositions/frames/NN-*.html e index.html; Etapa 6 renderização final → renders/video.mp4.
Etapa 0: Configuração
Objetivo: Entrar com um briefing confirmado, criar o projeto HyperFrames e tornar o briefing durável.
O briefing é confirmado pela camada de intenção, não por perguntas feitas aqui. Regra de abertura, em ordem: (1) BRIEF.md existe → leia-o e não pergunte nada — o briefing está resolvido, e seu flow/storyboard deriva o modo (contrato de briefing § 1). (2) Não há BRIEF.md mas o projeto existe (hyperframes.json / STORYBOARD.md no disco) → retome do frontmatter do storyboard e das preferências registradas; nunca reinterrogue um projeto semi-construído. (3) Nem um nem outro — uma solicitação de criação nova que chegou aqui diretamente → leia /hyperframes e execute sua camada de intenção (references/intent-interview.md): ela verifica receitas e padrões lembrados, conduz as perguntas desta rota (../hyperframes/references/routes/faceless-explainer.md) e devolve o briefing bloqueado. Solicitações de edição pulam tudo isso — vá fazer a edição.
Inicialize apenas se hyperframes.json estiver ausente. Nomeie <projeto> a partir do tópico em kebab-case, como compound-interest-explained; nunca use o nome do workspace ou timestamp.
npx hyperframes init "videos/<projeto>" --non-interactive --example=blank --skill=faceless-explainer — init verifica as skills instaladas em relação às mais recentes no GitHub e atualiza o conjunto global se alguma estiver desatualizada.
Após init, deixe <PROJECT_ROOT> ser videos/<projeto> e execute todos os comandos de caminho relativo subsequentes com esse diretório como seu diretório de trabalho. Nos comandos abaixo, . significa <PROJECT_ROOT>; nunca escreva .media, capture ou arquivos de saída no diretório do chamador.
Escreva BRIEF.md imediatamente após init (nunca antes — init recusa um diretório não vazio): o briefing bloqueado da camada de intenção, formato conforme ../hyperframes/references/brief-format.md. Resolva <MEDIA_DIR> como o diretório da skill /media-use instalada. Em seguida, registre cada resposta baseada em preferência com node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . (brief-format.md nomeia o subconjunto). Se a camada de intenção adotou uma receita, execute node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <nome>; ela copia seu frame.md para o projeto (a Etapa 2 é então pulada) e retorna os esqueletos a partir dos quais os rascunhos da Etapa 3 são feitos. Uma receita preenche respostas, não aprovações; os portões de revisão ainda são executados.
Mostre o status de login antes de prosseguir além da Configuração — execute npx hyperframes auth status e retransmita sua saída literalmente. Ele relata se a voz/BGM usará HeyGen ou mecanismos locais e, quando desconectado, como fazer login. Aplique um ramo:
- Colaborativo: aguarde o usuário fazer login ou escolher explicitamente
offline/go. - Autônomo: informe o status e continue usando os mecanismos locais disponíveis.
Não omita silenciosamente uma capacidade necessária quando nenhum provedor offline existir; evidencie o bloqueador. Não incorpore esta decisão em outra pergunta nem escreva chaves em um .env por repositório. Propriedade de autenticação e fallbacks offline: /media-use references/setup-providers.md § Provedores.
Portão: hyperframes.json e BRIEF.md existem; as respostas baseadas em preferência foram registradas (contrato de briefing § 2); o status de login foi mostrado (logado ou continuando offline).
Etapa 1: Briefing (sem captura)
Objetivo: Incorporar o texto do usuário no projeto como fonte de informação. Não há captura de site e nem ativos reais — este é um explicador sem rosto.
Salve a entrada completa do usuário literalmente, depois crie o pacote de captura sintético manualmente:
capture/extracted/visible-text.txt— o artigo / anotações / tópico / briefing completo, literalmente. Esta é a fonte de informação, não um modelo de história (a Etapa 3 o remodela).capture/extracted/tokens.json—{ "title": "", "description": "", "colors": [], "fonts": [] }. Preenchatitle/descriptiona partir do briefing. Deixecolors/fontsvazios a menos que o usuário tenha fornecido explicitamente cores ou fontes da marca — nesse caso, adicione-as (o preset de design fornece uma paleta completa independentemente).
Se o usuário colou um script ou deseja que suas palavras sejam mantidas, salve-o literalmente como user_script.txt; VO_MODE (literal ou reestruturado) vem de BRIEF.md — a camada de intenção pergunta quando um script chega. Pergunte uma vez aqui apenas se o briefing de alguma forma não o tiver e armazene a resposta para a Etapa 3.
Não execute npx hyperframes capture (não há URL). Não crie asset-descriptions.md nem preencha capture/assets/ — visuais sem rosto são inventados nas Etapas 4-5, não capturados. A única exceção: se o usuário forneceu uma imagem real, coloque-a em public/<basename> e anote-a para a Etapa 3.
Portão: capture/extracted/visible-text.txt e capture/extracted/tokens.json existem; você pode declarar o tópico e o público do explicador em uma frase clara.
Etapa 2: Sistema de Design
Objetivo: Escolher um preset de quadro enviado; um script o transforma no frame.md + skin de legenda deste vídeo.
Quando BRIEF.md nomeia um style_preset — o usuário o escolheu visualmente a partir das vitrines na camada de intenção — use-o; o julgamento é seu apenas quando o briefing está silencioso. Então você faz a única chamada — qual preset: leia ../hyperframes-creative/references/design-spec.md e navegue por ../hyperframes-creative/frame-presets/; escolha o preset cuja aparência melhor se adequa ao tópico, tom e público. Em seguida, execute:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <nome> --hyperframes .
O script faz o resto deterministicamente: copia o FRAME.md do preset → frame.md e o remixa com quaisquer tokens de marca em capture/extracted/tokens.json (cores da marca mapeadas nas chaves de cores do preset por função; as fontes de exibição + corpo do preset trocadas pelas da marca), copia a skin de legenda do preset para .hyperframes/caption-skin.html e se auto-valida (sai com 1 em um mapeamento quebrado). Prossiga assim que ele sair com 0 — sem edição manual da especificação.
Um explicador sem rosto geralmente não tem cores/fontes de marca (colors/fonts de tokens.json vazios) → o script mantém a paleta própria do preset, um design completo e enviável. Apenas quando o usuário nomeou cores/fontes da marca, adicione-as a tokens.json antes de executar e ajuste frame.md manualmente depois apenas se um mapeamento realmente precisar.
Portão: build-frame.mjs saiu com 0 — frame.md existe de um preset nomeado e (quando o preset envia um) .hyperframes/caption-skin.html existe como a fonte da skin de legenda; o preset escolhido foi registrado como preferência (--key style_preset --workflow <este fluxo de trabalho>, contrato de briefing § 2).
Etapa 3: Storyboard e Script
Objetivo: Transformar o texto em um plano de ensino quadro a quadro aprovado.
Leia ../hyperframes-creative/references/story-spine.md (linguagem de gancho, valor antes da evidência, storyboard como proposta, visuais rastreáveis por fonte), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md e ../hyperframes/references/script-format.md. Use-os para escrever STORYBOARD.md e, quando a narração for necessária, SCRIPT.md. Defina a duration: do frontmatter a partir do length do briefing — uma expectativa aproximada; a montagem relata onde o corte final cai em relação a ela.
Use story-design.md para a estrutura do explicador (conceito / tutorial / lista / história), estratégia de gancho, técnicas de clareza, batidas emocionais, o mapeamento enum-tipo e VO_MODE. A sequência do vídeo vem do design narrativo, não da ordem dos parágrafos do texto de entrada — reordene, mescle, omita, comprima. Como um guia suave, consulte o menu função→blueprint em ../hyperframes-animation/blueprints-index.md: para cada batida, escreva a narração na forma que seu blueprint candidato implica e taggeie esse candidato com blueprint: id quando um se encaixar. A verdade do ensino ainda decide quais batidas existem — nunca force uma batida a se encaixar em um blueprint e nunca invente uma batida apenas porque uma forma comprovada está disponível. Visuais sem rosto são inventados a jusante, então os quadros não carregam um inventário de ativos: deixe asset_candidates vazio a menos que o usuário tenha fornecido uma imagem real public/<basename>. Use os campos exatos exigidos das referências de storyboard e script.
Após o rascunho, execute a passagem de plano do loop de revisão — ../hyperframes/references/review-loop.md § 1: apresente o plano como uma proposta e faça as duas perguntas — aprovar ou alterar, e esboços primeiro (recomendado) ou pular. O feedback chega como uma resposta no chat; faça um loop até a aprovação. Este é um portão de checkpoint (contrato de briefing § 1): no modo autônomo não há nada a perguntar — publique o mesmo resumo como um aviso e prossiga; os esboços se fundem na construção, e a pré-visualização final com sua única pergunta vem na Etapa 6.
Portão: STORYBOARD.md existe, cada quadro tem os campos narrativos exigidos, SCRIPT.md existe quando a narração é necessária e o usuário aprovou o plano quadro a quadro (autônomo: o resumo foi publicado como aviso).
Etapa 3.1: Áudio
Objetivo: Gerar narração, temporização de palavras, música e metadados de áudio a partir do script aprovado.
Inicie o áudio após a aprovação da Etapa 3. Execute-o em segundo plano e continue para a Etapa 4. (O status de login já foi mostrado na Etapa 0; o mecanismo cai para o automático.)
Escolha a voz de narração a partir da solicitação do usuário antes de invocar. Se a solicitação nomeou uma voz, gênero ou tom, escolha um id de voz correspondente e passe-o com --voice <id>. O padrão do pipeline é, caso contrário, Marcia (feminino) no HeyGen / am_michael no Kokoro — portanto, uma solicitação como "uma voz masculina" é silenciosamente ignorada a menos que você passe a flag. Os ids de voz são específicos do provedor; resolva em relação a qualquer provedor que o status de login da Etapa 0 selecionou: HeyGen (logado) via node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (ou GET /v3/voices?engine=starfish); Kokoro (offline) via a tabela de vozes em <MEDIA_DIR>/audio/references/tts.md (prefixos am_/bm_ masculino, af_/bf_ feminino). Quando o usuário não expressou preferência, recorra à voz lembrada (contrato de briefing § 2) antes do padrão do pipeline e diga qual você usou; omita --voice apenas quando nenhum nomear uma. Quando o usuário escolheu explicitamente uma voz nesta execução, registre-a (prefs.mjs record --key voice).
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <id-voz> &
O script de áudio lida com narração, temporização de palavras, consulta de BGM na biblioteca de música do HeyGen e metadados de temporização. O humor do BGM vem do campo music: do storyboard. Isso usa a API de Áudio do HeyGen para recuperação, não geração, e a mesma credencial ~/.heygen do TTS. Para detalhes do provedor, leia ../media-use/audio/references/tts.md. Quando as ferramentas próprias do aplicativo host fornecerem a música ou um efeito sonoro, coloque o arquivo em assets/ e liste-o no arquivo audio_meta.json marcado "source": "host": música como bgm { "path": "assets/…", "source": "host" } com music: none no storyboard; um som como uma entrada sfx { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <sua duração>, "source": "host" }. Cada passagem de áudio mantém estes, e um quadro com um som do host não recebe sinal consultado.
Se não houver narração e nenhum SCRIPT.md, pule a geração de voz. O BGM ainda pode ser executado se o storyboard tiver um humor musical.
O marcador canônico de silêncio total (compartilhado entre os fluxos de trabalho que reutilizam este modelo de áudio): music: none no bloco YAML superior do STORYBOARD.md, nenhum SCRIPT.md, e nenhuma dica sfx: ou áudio do host. Essa combinação marca o projeto como silencioso — nem geração de voz, nem BGM, nem SFX. O pipeline de áudio deve reconhecer este sinal e pular toda a geração; o pipeline de saída de vídeo renderiza uma trilha silenciosa. Não informe o pipeline de áudio sobre a silenciosidade se um arquivo de script existir.
Portão: O subprocesso de áudio foi iniciado com sucesso (ou pulado devido à silenciosidade); os metadados serão coletados antes da montagem.
Etapa 4: Design Visual
Objetivo: Enriquecer cada quadro do storyboard com especificações de design que um sub-agente frame-worker pode reduzir a CSS, HTML e movimento.
A Etapa 4 não é um sub-agente separado — é você, o orquestrador, aplicando regras de design visual ao STORYBOARD.md. Comece lendo ../hyperframes-creative/references/visual-design.md para entender o sistema de materiais e os padrões de layout. Em seguida, leia ../hyperframes-animation/rules/animation-primitives.md e, se precisar de orientação de layout, ../hyperframes-animation/blueprints/ para as regras comuns de layout de cena.
Depois de entender o material, enriqueça cada quadro cena (---) no STORYBOARD.md com um bloco design: que contenha:
- layout: um layout de grade ou quadro flexível que posicione o conteúdo.
- type: se aplicável, o tipo de animação (por exemplo, fade, slide, zoom).
- duration: atribua uma duração de quadro a cada um (em segundos).
- notes: instruções específicas de design ou movimento não cobertas pelo preset.
As regras de design em ../hyperframes-animation/rules/ têm precedência sobre intuições gerais de CSS; leia-as por completo antes de adicionar seus blocos design:.
Portão: Todo quadro cena no STORYBOARD.md tem um bloco design: preenchido com layout, type, duration e (quando necessário) notes, e a saída do storyboard parece estruturalmente correta.
Etapa 5: Quadros
Objetivo: Construir os quadros HTML animados reais — um sub-agente por quadro.
Para cada quadro no storyboard, despache um sub-agente frame-worker para construir NN-nome-do-quadro.html em compositions/frames/. O contrato de interface está em ../hyperframes-animation/references/frame-worker-prompt.md; o worker também recebe todo ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ + frame.md + capture/extracted/visible-text.txt.
Cada sub-agente auto-valida seu quadro — verifique sutilmente se o arquivo HTML existe, tem a estrutura correta e se o CSS inline parece razoável. Corrija se um worker falhar. Depois que todos os quadros estiverem prontos, construa index.html executando:
node <SKILL_DIR>/scripts/assemble.mjs --frames-dir ./compositions/frames --storyboard ./STORYBOARD.md --audio ./audio_meta.json --hyperframes .
assemble.mjs combina os quadros em uma renderização sequencial pré-visualizável como compositions/index.html. Falhas de validação ou estruturais param a montagem.
Portão: compositions/index.html existe e pode ser aberto em um navegador para revisão (se a pré-visualização falhar, corrija ou repita os workers).
Etapa 6: Renderização Final
Objetivo: Renderizar o vídeo final com áudio, revisão e exportação.
A pré-visualização final e uma única pergunta. Peça ao usuário para revisar a pré-visualização de composição em compositions/index.html e responder a uma pergunta: "Aprovar ou alterar?". Em modo autônomo: publique a saída da montagem como aviso de heads-up e pule a pergunta — prossiga para a renderização. Em modo colaborativo: aguarde a resposta, aplique alterações (revisão, Etapa 5, ou todo o caminho de volta à Etapa 3), ou obtenha aprovação.
Após a aprovação, renderize para renders/video.mp4:
npx hyperframes render frames --input ./compositions/index.html --output renders/video.mp4 --audio ./audio_meta.json --token <token-secreto>
Inclua o comando real com o token de espaço reservado ou instrua o usuário a fornecer seu token. TCPDF com pipa não funciona aqui.
Portão: renders/video.mp4 existe e é reproduzível.
Trabalho Futuro: Pós-Produção e Entrega
Depois que a montagem renderizar o vídeo final em renders/video.mp4, o vídeo está pronto para compartilhamento ou upload.
Se precisar de legendas, execute:
npx hyperframes captions generate --input ./renders/video.mp4 --script ./SCRIPT.md --output ./renders/captions.srt
Portão de entrega: renders/video.mp4 existe e as legendas .srt foram geradas quando solicitadas.