Instalação do plugin: Antes dos comandos de configuração ou atualização, siga as regras de instalação de plugins quando esta skill estiver dentro de um plugin HyperFrames. Instalações independentes mantenha 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 efeito quando tudo está atualizado; caso contrário, ela atualiza esta skill e as skills de domínio principais das quais depende antes de você usá-las.
media-use: Antes de buscar áudio/imagens/logos, chame
/media-usepara resolver BGM/SFX/imagens do catálogo HeyGen e logotipos de marcas 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 de ensino e construa quadro a quadro no HyperFrames. Sem rosto significa que cada visual é inventado posteriormente — 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 seu 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 "faça um vídeo", ou qualquer incerteza → leia/hyperframesprimeiro — a camada de intenção possui cada 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 cada portão antes de continuar. Etapas com portão de usuário são Etapa 0, Etapa 3 e Etapa 6. Leia ../hyperframes/references/brief-contract.md antes da Etapa 0 — ela 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 subagente por quadro. Não coloque regras de design ou movimento aqui; elas vivem no subagente frame-worker, nas ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ locais desta skill, 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 brief confirmado, criar o projeto HyperFrames e tornar o brief durável.
O brief é 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 brief está resolvido, e seu flow/storyboard derivam o modo (brief contract § 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 meio 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 brief bloqueado. Solicitações de edição pulam tudo isso — vá fazer a edição.
Inicialize apenas se hyperframes.json estiver faltando. Nomeie <projeto> a partir do tópico em kebab-case, como compound-interest-explained; nunca use 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, defina <PROJECT_ROOT> como videos/<projeto> e execute cada comando de caminho relativo subsequente 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 init (nunca antes — init recusa um diretório não vazio): o brief 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 repita sua saída literalmente. Ele informa se voz/BGM usará mecanismos HeyGen ou 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 não houver provedor offline; destaque o bloqueio. Não coloque esta decisão em outra pergunta ou escreva chaves em um .env por repositório. Propriedade de autenticação e fallbacks offline: /media-use references/setup-providers.md § Providers.
Portão: hyperframes.json e BRIEF.md existem; as respostas baseadas em preferência foram registradas (brief contract § 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 / notas / tópico / brief 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 brief. Deixecolors/fontsvazios a menos que o usuário tenha explicitamente dado cores ou fontes de marca — então adicione-os (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 brief 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 ou 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/<nome-base> 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 nas vitrines na camada de intenção — use-o; a decisão é sua apenas quando o brief 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 adapta 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 em 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 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 (tokens.json colors/fonts vazios) → o script mantém a própria paleta do preset, um design completo e enviável. Apenas quando o usuário nomeou cores/fontes de marca, adicione-os ao 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 fonte da skin de legenda; o preset escolhido foi registrado como uma preferência (--key style_preset --workflow <este workflow>, brief contract § 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-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 o duration: do frontmatter a partir do length do brief — uma expectativa aproximada; a montagem relata onde o corte final se alinha em relação a ela.
Use story-design.md para a estrutura do explicador (conceito / como fazer / lista / história), estratégia de gancho, técnicas de clareza, batidas emocionais, o mapeamento de enumeração de tipos 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 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 caber em um blueprint, e nunca invente uma batida apenas porque uma forma comprovada está disponível. Visuais sem rosto são inventados posteriormente, 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/<nome-base>. 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 loop até aprovação. Este é um portão de verificação (brief contract § 1): em modo autônomo não há nada a perguntar — poste o mesmo resumo como um aviso e prossiga; esboços se fundem na construção, e a prévia 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 postado como um aviso).
Etapa 3.1: Áudio
Objetivo: Gerar narração, temporizações 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, depois continue para a Etapa 4. (O status de login já foi mostrado na Etapa 0; o mecanismo cai automaticamente.)
Escolha a voz de narração a partir do pedido 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 é 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 ao 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 (brief contract § 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-da-voz> &
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 humor do BGM vem do campo music: do storyboard. Isso usa a API de Áudio 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 próprias ferramentas do 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": <seu comprimento>, "source": "host" }. Cada passagem de áudio mantém estes, e um quadro com um som do host não obtém nenhuma dica buscada.
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 canonicamente totalmente silencioso (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 — nenhum áudio é gerado.
Etapa 4: Design Visual
Portão de verificação — requer aprovação do usuário. Objetivo: Definir cada quadro visualmente — cores, layout, animação, tipografia — sem gerar HTML.
Leia ../hyperframes-creative/references/visual-design.md. Em seguida, enriqueça STORYBOARD.md com um layout de quadro completo, anotações de animação e atributos de design:
scene: cena agrupando quadros relacionadas (por exemplo, "abertura", "explicação").layout: descrição do layout visual (por exemplo, "título centralizado, corpo à esquerda, diagrama à direita").visual_elements: lista de elementos visuais (por exemplo, "título animado, gráfico de barras, ícone").animation_notes: notas de animação (por exemplo, "título entra deslizando da esquerda, gráfico cresce").typography: escolhas de tipografia (por exemplo, "título: fonte de exibição, 48px, negrito; corpo: fonte de texto, 24px, regular").colors: uso de cores (por exemplo, "fundo: cor primária, texto: cor de texto").
Adicione um resumo antes do primeiro quadro explicando a lógica geral do design visual.
Apresente ao usuário com os esboços visuais (gerados como SVG inline ou descrições visuais de texto, não HTML real). Pergunte: "Aprova os designs visuais?" Se o usuário disser não, peça feedback, repita a etapa e apresente novamente. Apenas designs aprovados alimentam a Etapa 5.
Etapa 5: Geração de Quadros
Portão automático. Objetivo: Gerar HTML por quadro para o vídeo.
Para cada quadro do storyboard, despache um subagente frame-worker que lê:
frame.md(sistema de design).hyperframes/caption-skin.html(skin de legenda)- O layout do quadro, notas de animação e conteúdo do storyboard
audio_meta.json(se existir)- Regras de animação de
../hyperframes-animation/rules/ - Modelos de quadro de
../hyperframes-animation/blueprints/
O subagente escreve um arquivo HTML em compositions/frames/NN-<slug>.html onde NN é o número do quadro (dois dígitos) e slug é um identificador curto. Em seguida, ele atualiza compositions/index.html para incluir o novo quadro.
Regras:
- Cada quadro deve ser autossuficiente (inline CSS/JS).
- A animação deve corresponder às notas do storyboard.
- A legenda deve ser sobreposta (se houver narração).
- As cores/fontes devem corresponder ao sistema de design.
- Se houver áudio do host, incorpore a sincronização.
Depois que todos os quadros estiverem prontos, valide que o index.html lista todos os quadros em ordem e que cada quadro existe.
Etapa 6: Renderização Final
Portão de verificação — requer aprovação do usuário. Objetivo: Compilar os quadros em um vídeo final.
Execute npx hyperframes render no diretório do projeto. Isso compila todos os quadros, áudio e legendas no vídeo final. O resultado vai para renders/video.mp4.
Apresente o vídeo ao usuário para aprovação final. Pergunte: "O vídeo está aprovado?" Se o usuário solicitar alterações, volte para a(s) etapa(s) apropriada(s) (Etapa 3, 4 ou 5), refaça e renderize novamente. Quando aprovado, informe o caminho do vídeo final.
Referências
../hyperframes/references/brief-contract.md— tipos de portão e modo de fluxo/tomada../hyperframes/references/brief-format.md— formato de BRIEF.md../hyperframes/references/storyboard-format.md— formato de STORYBOARD.md../hyperframes/references/script-format.md— formato de SCRIPT.md../hyperframes/references/review-loop.md— processo de loop de revisão../hyperframes-creative/references/story-spine.md— estrutura da história../hyperframes-creative/references/visual-design.md— design visual../hyperframes-creative/references/design-spec.md— especificação de design../hyperframes-creative/frame-presets/— presets de quadro../hyperframes-animation/blueprints-index.md— índice de modelos de quadro../hyperframes-animation/rules/— regras de animação../media-use/audio/references/tts.md— documentação TTS../media-use/references/setup-providers.md— provedores de configuração
Informações da Skill
- Nome: courtneymgabrus-star/Video
- Descrição: Transforma qualquer texto em um vídeo explicativo sem rosto.
- Plataformas: HeyGen, Kokoro
- Tags: vídeo explicativo, sem rosto, vídeo de texto, animação, tutorial
- Licença: MIT