slideshowpor HeyGen

Slideshow Skill.

Um skill de Claude Code e Codex para PPT e apresentações: slideshows interativos HyperFrames com fragmentos, ramificação e modo de apresentador.

Presentations
Slides HTML

Baixar OpenDesign Ver guia de uso

heygen-com/hyperframes · skills/slideshow/SKILL.mdSKILL.md

--- name: slideshow description: Author a HyperFrames slideshow — a presentation, pitch deck, or interactive deck with discrete slides, fragment reveals, branching, hotspot navigation, and built-in presenter mode with speaker notes; also converts an existing page into a deck. Output is a navigable deck, not a rendered MP4. If the user didn't explicitly ask for a slideshow, confirm before authoring. Unclear → /hyperframes. --- ## Output — a navigable deck, not a linear MP4 ## Intent confirmation ## The two pieces ## Schema ## Slide writing rules ## Porting source pages

Frontispício e cabeçalhos de seção lidos do arquivo upstream em 14/09/2026 · 33.631 caracteres no total

01 O que faz

O que o Skill slideshow Faz no Claude Code e Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Cria apresentações HyperFrames — apresentações, pitch decks ou decks interativos com slides discretos, revelação por fragmentos, ramificações, navegação por hotspots e modo apresentador integrado com notas do palestrante. Também converte páginas existentes em decks. A saída é um deck navegável servido com hyperframes presentes, não um MP4 renderizado. Usa um bloco de script JSON island para declarar slides e conexões. Suporta fragments (pontos de retenção de revelação dentro de um slide), ramificação via hotspots para sequências off-line, e modo apresentador com notas editáveis sincronizadas via BroadcastChannel.

Exige confirmação antes de criar conteúdo, a menos que solicitado explicitamente. Aplica regras estritas de redação de slides: títulos como afirmações em frases completas, uma ideia por slide, dimensionamento de mercado de baixo para cima, fonte mínima de 30pt. Pesquisa o catálogo ao vivo antes de construir manualmente qualquer visual nomeado. Ao portar páginas de origem, preserva o design, movimento, interações e comportamento de mídia originais, traduzindo o movimento da página em transições entre slides.

O que ele produz

Uma composição HyperFrames com scenes, clips, timelines GSAP e um manifesto JSON island
Um deck navegável servido com hyperframes presentes, incluindo modo apresentador com notas do palestrante

Veja o exemplo de prompt ↗

Como funciona

01
Confirmar Intenção
Se o usuário solicitar explicitamente um slideshow, prossiga; caso contrário, pause e explique o que significa um slideshow HyperFrames (deck executável, navegação, modo apresentador) antes de pedir confirmação.
02
Declarar Scenes com Atributos de Tempo
Cada slide é sustentado por uma scene. Declare cada uma com data-composition-id, data-start, data-duration e data-label.
03
Adicione o JSON Island
Adicione exatamente um bloco de script com type application/hyperframes-slideshow+json ao HTML da composição.
04
Escreva Slides Seguindo Regras Rígidas
Os títulos devem ser afirmações em frases completas. Uma ideia mais um visual por slide. Comece pelo ponto principal. Dimensionamento de mercado apenas de baixo para cima. Fonte mínima equivalente a 30pt.
05
Pesquise o Catálogo Antes de Criar Visuais
Para cada visual, efeito, gráfico ou transição que um slide precisar, execute npx hyperframes catalog --query em português simples e leia os principais resultados antes de criar.

02 Encontre o ideal para você

Quando Usar a Skill slideshow

Use a skill slideshow no Claude Code ou Codex quando o trabalho for PPT e decks de slides deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Apresentações, pitch decks ou decks interativos com slides discretos
Decks com revelações por fragmento, ramificações, navegação por hotspots e modo apresentador
Convertendo uma página existente em um deck

Conheça os Limites

Solicitações em que a intenção de slideshow não está clara — é necessário confirmar antes de criar
Texto menor que 40px que o público precisa ler

O Que Fornecer

URL de origem do Figma (opcional)Se o conteúdo ou storyboard do deck vier de uma URL do figma.com, execute /figma primeiro para exportação de assets, tokens de marca e reconstrução do storyboard antes de construir.

03 Dentro da skill

Regras que o skill slideshow Dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Uma Ideia Mais um Visual por Slide
Se você estiver tentado a adicionar um segundo agrupamento de bullets ou um segundo gráfico, divida o slide.
Fonte Mínima Equivalente a 30pt
A 1920×1080, um título tem de 72 a 96px; o corpo de texto tem 48px. Nunca vá abaixo de 40px para qualquer texto que o público precise ler.
Dimensionamento de Mercado Apenas de Baixo para Cima
Nunca escreva um TAM de $50B sem mostrar os cálculos. Construa a partir da economia unitária: contas × ACV, ou transações × taxa de comissão.
Pesquise o Catálogo Antes de Construir Manualmente
Para cada visual nomeado que um slide precisar, execute npx hyperframes catalog --query e leia os principais resultados antes de criar. Um bloco real supera uma aproximação simplificada.
Não Renderize Slideshows para MP4
Um deck é criado como várias composições de cena de nível superior sem uma composição raiz mestra, então a renderização resolve apenas a primeira composição e gera um MP4 silenciosamente truncado.
Os Tempos de Fragmento São Posições Absolutas na Linha do Tempo da Composição
Os tempos de fragmento usam o mesmo espaço de coordenadas de data-start, não offsets relativos ao início da cena. Eles devem estar dentro do intervalo start, end do slide, inclusive.
Preservar a Fidelidade da Página de Origem ao Portar
Preserve o design visual, a linguagem de movimento, o comportamento interativo, o comportamento de mídia e os recursos de apresentação da página original o mais próximo possível.

04 Coloque em prática

Instalar slideshow no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione slideshow ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

Formulário genérico da CLI de skills para skills/slideshow/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à skill uma primeira tarefa de PPT e apresentações de slides

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Build a HyperFrames slideshow for a Series A pitch deck. Start with a hook slide showing SMBs lose $40B/year to manual scheduling. Add a problem slide with three pain points that reveal as fragments: no-shows cost 23% of revenue, manual reminders take 4h/week per staff, and rescheduling friction drives 40% churn. Include a hotspot on the $40B figure that branches to a market-sizing slide showing the bottom-up math: 2.3M SMBs × $17k ACV. End with a solution slide: [product name] automates scheduling for service SMBs, cutting no-shows by 80% in 90 days. Include speaker notes for each slide.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Corrija o arquivo e execute novamente até que o lint relate 0 erro(s) e a validação não relate erros de runtime
Verifique se cada slide.sceneId resolve para uma cena existente por data-composition-id
Verifique se cada hotspot.target referencia um id de slideSequence definido
Verifique se os tempos de fragmento estão dentro do intervalo start, end de cada slide

No OpenDesign importe o slideshow a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Arquivo da skill: skills/slideshow/SKILL.md Checksum do conteúdo registrado na verificação; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 49.761 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório heygen-com/hyperframes, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para slideshow.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Contrato de autoria de slideshowUm slideshow HyperFrames é uma composição normal mais uma ilha JSON declarando slides e conexões
Saída — um deck navegável, não um MP4 linearSirva com hyperframes presentes; não renderize para MP4, pois isso trunca para a primeira composição
Confirmação de intençãoConfirme antes de criar, a menos que o usuário tenha pedido explicitamente um slideshow; a intenção roteada já é pré-confirmada
As duas partesCenas declaradas com data-composition-id e timing; ilha JSON com os arrays slides e slideSequences
SchemaDefinições de campo e requisitos de SlideshowManifest, SlideRef, SlideHotspot e SlideSequence
Regras de escrita de slidesTítulos como frases completas, uma ideia por slide, dimensionamento de baixo para cima, mínimo de 30pt, buscar primeiro no catálogo
Portando páginas de origemPreserve o design, o movimento, as interações e a mídia originais; traduza o movimento da página para transições de slide; conecte eventos de mídia
Fragmentos: pontos de retenção de revelação dentro de um slideTempos absolutos da linha do tempo dentro do intervalo do slide; o controlador busca cada fragmento ao clicar em Next; sem reprodução entre eles
Ramificação: hotspots e sequências de slidesSlides de ramificação excluídos da linha principal; o clique em um hotspot empilha na pilha de navegação; voltar retorna ao pai
Exemplo prático: deck de 3 slides com fragmentos e uma ramificaçãoEsqueleto HTML completo com cenas, ilha JSON, timeline do GSAP e uma sequência de ramificação
Componente de encapsulamentoEncapsule em hyperframes-slideshow; fornece navegação, teclado, toque, hotspots; Present abre uma aba para a audiência; mudo global
Executando um slideshow de forma independente (interino)Demonstrações independentes exigem soluções alternativas até que o preview hospedado pelo engine seja lançado; consulte references/standalone-harness.md

A Descrição da Própria Skill

"Crie uma apresentação HyperFrames — uma apresentação, pitch deck ou deck interativo com slides discretos, revelação de fragmentos, ramificação, navegação por hotspot e modo apresentador integrado com notas do palestrante; também converte uma página existente em um deck. A saída é um deck navegável, não um MP4 renderizado. Se o usuário não solicitou explicitamente uma apresentação de slides, confirme antes de criar. Não está claro → /hyperframes."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 33.631 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill slideshow

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que são fragmentos e como funcionam?

Um fragmento é um tempo absoluto da linha do tempo da composição, em segundos, dentro do intervalo start, end de um slide, no qual o controlador mantém um estado de revelação.

O player entra em um slide fragmentado em fragments[0], depois busca cada fragmento subsequente ao clicar em Next. Após o último fragmento, Next avança para o próximo slide. A navegação é orientada por busca (seek), não por reprodução.

Slideshow

Execute o slideshow em uma Tarefa Real de PPT e Apresentações de Slides.

Baixe o OpenDesign, importe o slideshow pelo link no SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills