Instalação de plugins: Antes dos 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 faceless-explainer. 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ê possa usá-las.
media-use: Antes de obter áudio/imagens/logotipos, chame
/media-usepara resolver BGM/SFX/imagens do catálogo HeyGen e logotipos de suas fontes oficiais. Execute--adoptprimeiro para registrar ativos existentes. Veja 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 pedagógica e construa quadro a quadro no HyperFrames. 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 barreira 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 "faça um vídeo", ou qualquer incerteza → leia/hyperframesprimeiro — a camada de intenção possui todas as decisões de rota, e uma criação nova chegando aqui semBRIEF.mdpassa por ela de qualquer maneira (regra de abertura da Configuração).
Você é o orquestrador. Trabalhe em videos/<project>/. Execute as etapas em ordem e passe cada barreira antes de continuar. As etapas com barreira 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 barreira e como flow/storyboard do BRIEF.md derivam o modo que governa as barreiras das Etapas 3/4/6. Faça cada etapa você mesmo, exceto a Etapa 5, onde você despacha um subagente por quadro. Não coloque regras de design ou movimento aqui; elas residem no subagente do trabalhador de quadro, em ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ e hyperframes-creative.
Fluxo de trabalho: Etapa 0 configuração → hyperframes.json; Etapa 1 resumo → capture/extracted/; Etapa 2 sistema de design → frame.md; Etapa 3 storyboard/roteiro → 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 resumo confirmado, criar o projeto HyperFrames e tornar o resumo durável.
O resumo é confirmado pela camada de intenção, não por perguntas feitas aqui. Regra de abertura, em ordem: (1) BRIEF.md existe → leia e não pergunte nada — o resumo está definido, e seu flow/storyboard derivam o modo (contrato do resumo § 1). (2) Não há BRIEF.md, mas o projeto existe (hyperframes.json / STORYBOARD.md no disco) → retome a partir do frontmatter do storyboard e das preferências registradas; nunca reinterrogue um projeto meio construído. (3) Nenhum dos dois — 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 resumo bloqueado. Solicitações de edição pulam tudo isso — vá fazer a edição.
Inicialize apenas se hyperframes.json estiver faltando. Nomeie <project> a partir do tópico em kebab-case, como compound-interest-explained; nunca use nome do workspace ou timestamp.
npx hyperframes init "videos/<project>" --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 a inicialização, defina <PROJECT_ROOT> como videos/<project> e execute todos os comandos de caminho relativo subsequentes com esse diretório como 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 a inicialização (nunca antes — init recusa um diretório não vazio): o resumo 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 <name>; ela copia seu frame.md para o projeto (a Etapa 2 é então pulada) e retorna os esboços a partir dos quais a Etapa 3 cria os rascunhos. Uma receita preenche respostas, não aprovações; as barreiras de revisão ainda são executadas.
Mostre o status de login antes de prosseguir após a Configuração — execute npx hyperframes auth status e transmita sua saída literalmente. Ele informa 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 através dos mecanismos locais disponíveis.
Não omita silenciosamente uma capacidade necessária quando nenhum provedor offline existir; sinalize o bloqueio. Não inclua 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.
Barreira: hyperframes.json e BRIEF.md existem; as respostas baseadas em preferência foram registradas (contrato do resumo § 2); o status de login foi mostrado (logado ou continuando offline).
Etapa 1: Resumo (sem captura)
Objetivo: Incorporar o texto do usuário no projeto como a 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 e, em seguida, crie o pacote de captura sintético manualmente:
capture/extracted/visible-text.txt— o artigo/notas/tópico/resumo 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 resumo. Deixecolors/fontsvazios, a menos que o usuário tenha fornecido cores ou fontes de marca explicitamente — então adicione-as (a predefinição de design fornece uma paleta completa de qualquer maneira).
Se o usuário colou um roteiro 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 roteiro chega. Pergunte uma vez aqui apenas se o resumo de alguma forma não tiver isso 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.
Barreira: 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 uma predefinição de quadro fornecida; um script a transforma no frame.md + skin de legenda deste vídeo.
Quando BRIEF.md nomeia um style_preset — o usuário o escolheu visualmente nas amostras da camada de intenção — use-o; a decisão de julgamento é sua apenas quando o resumo está silencioso. Em seguida, você faz a única chamada — qual predefinição: leia ../hyperframes-creative/references/design-spec.md e navegue por ../hyperframes-creative/frame-presets/; escolha a predefinição cuja aparência melhor se adapta ao tópico, tom e público. Em seguida, execute:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
O script faz o resto deterministicamente: copia o FRAME.md da predefinição → frame.md e o remixa em quaisquer tokens de marca em capture/extracted/tokens.json (cores da marca mapeadas nas chaves de cor da predefinição por função; as fontes de exibição + corpo da predefinição substituídas pelas da marca), copia a skin de legenda da predefinição para .hyperframes/caption-skin.html e autovalida (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 (tokens.json colors/fonts vazios) → o script mantém a paleta própria da predefinição, um design completo e enviável. Somente quando o usuário nomeou cores/fontes de marca, adicione-as a tokens.json antes de executar e ajuste frame.md manualmente depois apenas se um mapeamento realmente precisar.
Barreira: build-frame.mjs saiu com 0 — frame.md existe a partir de uma predefinição nomeada e (quando a predefinição fornece uma) .hyperframes/caption-skin.html existe como a fonte da skin de legenda; a predefinição escolhida foi registrada como preferência (--key style_preset --workflow <este workflow>, contrato do resumo § 2).
Etapa 3: Storyboard e Roteiro
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 à 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 o frontmatter duration: a partir do length do resumo — uma expectativa aproximada; a montagem relata onde o corte final fica em relação a ele.
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 de enumeração de tipo e VO_MODE. A sequência do vídeo vem do design narrativo, não da ordem de 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 marque esse candidato com o 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 obrigatórios das referências de storyboard e roteiro.
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 de chat; repita até aprovação. Esta é uma barreira de checkpoint (contrato do resumo § 1): no modo autônomo, não há nada a perguntar — publique o mesmo resumo como um aviso e prossiga; os esboços são incorporados na construção e a prévia final com sua única pergunta vem na Etapa 6.
Barreira: STORYBOARD.md existe, cada quadro tem os campos narrativos obrigatórios, 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 um aviso).
Etapa 3.1: Áudio
Objetivo: Gerar narração, temporizações de palavras, música e metadados de áudio a partir do roteiro 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 faz fallback automaticamente.)
Escolha a voz da 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 (feminina) 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 contra o 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 do resumo § 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 <voice-id> &
O script de áudio lida com narração, temporizações de palavras, busca de BGM da biblioteca de música do HeyGen e metadados de temporização. O clima 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 que o TTS. Para detalhes do provedor, leia ../media-use/audio/references/tts.md. Quando as ferramentas do próprio aplicativo host fazem a música ou um efeito sonoro, coloque o arquivo em assets/ e liste-o no arquivo audio_meta.json marcado como "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 isso, e um quadro com um som host não recebe nenhum cue pesquisado.
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 clima 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 nenhum cue sfx: ou áudio do host. Essa combinação marca o projeto como silencioso — não execute a Etapa 3.1; pule para a Etapa 4 com audio_meta.json existindo como {}.
Barreira: audio_meta.json existe com narração, temporizações de palavras e BGM (ou é {} para um projeto silencioso marcado canonicamente). O processo em segundo plano pode ainda não ter terminado; prossiga quando seu stdout mostrar que a geração de áudio foi iniciada.
Etapa 4: Design Visual
Objetivo: Enriquecer o storyboard aprovado com instruções visuais concretas para os construtores de quadro.
Leia ../hyperframes-animation/references/visual-design.md (regras de composição visual por tipo de blueprint, modelos espaciais, campo de cor, princípios de movimento) e ../hyperframes-animation/blueprints-index.md (o próprio mapeamento função→blueprint). Em seguida, para cada quadro, escreva seu visual_design: dentro de STORYBOARD.md.
Regras:
- Use os tipos de blueprint do mapeamento de
blueprints-index.mdcomo um vocabulário de design, não como um modelo: importe as regras de composição e movimento daquele blueprint, depois personalize com as cores da predefinição, hierarquia de texto e a emoção da batida. - Anexe instruções de movimento de câmera e transições de quadro onde elas servirem à clareza.
- Cada entrada
visual_design:segue o formato de../hyperframes-animation/references/visual-design.md. - Os visuais são inventados, não capturados, então
asset_candidatestem no máximo um item se uma imagem real do usuário (public/) precisar ser encaixada em um quadro.
Pule a Etapa 4 quando o modo padrão (contrato do resumo § 1) for auto. O pipeline gera esboços na Etapa 5 sem design visual explícito, então não há nada para enriquecer. Somente no modo review o design visual deve ser escrito explicitamente. Quando o storyboard tem blueprint: tags, os esboços auto ainda as usam como dicas de composição — elas reduzem a aleatoriedade da geração, mesmo sem visual_design:.
Esta etapa não tem barreira. Enriquecer é opcional; prosseguir para a Etapa 5 é sempre válido.
Etapa 5: Quadros
Objetivo: Construir cada quadro do vídeo como um HTML interativo autônomo.
Leia ../hyperframes-animation/references/composition-rules.md (sistema de grade, camadas de quadro, layouts de blueprint), ../hyperframes-animation/blueprints-index.md (módulos de composição por tipo), ../hyperframes/references/frame-format.md e as regras de animação em ../hyperframes-animation/rules/.
Use o trabalhador de quadro para construir cada quadro. O escopo do trabalhador e a lista de verificação de saída estão em references/frame-worker.md, que você lê e transmite para cada subagente que você despacha.
Despache um subagente por quadro. Cada subagente:
- Lê
frame.md,STORYBOARD.md,../hyperframes-animation/blueprints-index.mde../hyperframes-animation/blueprints/. - Produz
compositions/frames/NN-title.html.
Após todos os quadros, construa o índice: node <SKILL_DIR>/scripts/build-index.mjs --hyperframes .. Ele lê compositions/frames/ e grava compositions/index.html, que lista cada quadro e linka para ele.
Barreira: compositions/index.html existe; cada quadro HTML listado no storyboard existe em compositions/frames/.
Etapa 6: Renderização Final
Objetivo: Montar o vídeo final.
Antes de renderizar, execute a passagem de revisão da Etapa 6 — ../hyperframes/references/review-loop.md § 3: do storyboard enriquecido (ou esboços auto), faça a única pergunta: "Aqui está uma prévia de cada quadro. Aprova e renderiza?" Feedback → loop.
Em seguida, execute:
npx hyperframes render --hyperframes . --out renders/video.mp4 --frames compositions/index.html
Barreira: Uma prévia foi mostrada (autônomo: nenhuma pergunta — publique o caminho da prévia e prossiga); renders/video.mp4 existe; o usuário aprova visualmente (a confirmação verbal no modo colaborativo, nenhuma pergunta no autônomo).