slideshowdi HeyGen

Slideshow Skill.

Uno skill per Claude Code e Codex dedicato a PPT e presentazioni: slideshow HyperFrames interattivi con frammenti, ramificazioni e modalità relatore.

Presentations
Slide HTML

Scarica OpenDesign Guida all'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

Front matter e intestazioni di sezione letti dal file upstream il 14 settembre 2026 · 33.631 caratteri in totale

01 Cosa fa

Cosa Fa la Skill slideshow in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Crea slideshow HyperFrames — presentazioni, pitch deck o deck interattivi con slide distinte, rivelazioni a frammenti, ramificazioni, navigazione tramite hotspot e una modalità presentatore integrata con note per l'oratore. Converte inoltre pagine esistenti in deck. L'output è un deck navigabile servito con hyperframes presenti, non un MP4 renderizzato. Utilizza un blocco di script JSON island per dichiarare slide e connessioni. Supporta i frammenti (punti di sospensione della rivelazione all'interno di una slide), la ramificazione tramite hotspot verso sequenze fuori linea e la modalità presentatore con note editabili sincronizzate tramite BroadcastChannel.

Richiede una conferma prima di procedere alla creazione, a meno che non sia esplicitamente richiesto. Applica regole rigorose per la scrittura delle slide: titoli come affermazioni in forma di frase completa, un'idea per slide, dimensionamento del mercato bottom-up, font minimo di 30pt. Consulta il catalogo live prima di costruire manualmente qualsiasi elemento visivo nominato. Quando porta pagine sorgente, preserva il design originale, il movimento, le interazioni e il comportamento dei media traducendo il movimento della pagina in transizioni tra slide.

Che cosa produce

Una composizione HyperFrames con scene, clip, timeline GSAP e un manifest JSON island
Un deck navigabile servito con hyperframes presenti, incluso il modo presentatore con note per l'oratore

Vedi l'esempio di prompt ↗

Come funziona

01
Confermare l'Intento
Se l'utente richiede esplicitamente uno slideshow, procedere; altrimenti fermarsi e spiegare cosa significa uno slideshow HyperFrames (deck eseguibile, navigazione, modalità presentatore) prima di chiedere conferma.
02
Dichiarare le Scene con Attributi di Timing
Ogni slide è supportata da una scena. Dichiarare ciascuna con data-composition-id, data-start, data-duration e data-label.
03
Aggiungi il JSON Island
Aggiungi esattamente un blocco script con type application/hyperframes-slideshow+json alla composition HTML.
04
Scrivi le Slide Seguendo Regole Rigide
I titoli devono essere affermazioni sotto forma di frase completa. Una sola idea più un solo elemento visivo per slide. Parti dalla conclusione. Solo dimensionamento del mercato bottom-up. Font minimo equivalente a 30pt.
05
Consulta il Catalog Prima di Costruire gli Elementi Visivi
Per ogni look, effetto, grafico o transizione richiesto da una slide, esegui npx hyperframes catalog --query in inglese semplice e leggi i primi risultati prima di procedere alla creazione.

02 Trova la tua applicazione

Quando Usare la Skill slideshow

Usa la skill slideshow in Claude Code o Codex quando il lavoro riguarda PPT e slide deck di questo tipo. Fit e limiti sono presi dal file della skill stessa.

Buona applicazione

Presentazioni, pitch deck o deck interattivi con slide distinte
Deck con rivelazioni a fragment, ramificazioni, navigazione tramite hotspot e modalità presenter
Conversione di una pagina esistente in un deck

Conosci i limiti

Richieste in cui l'intento di creare uno slideshow non è chiaro — è necessario confermare prima di procedere alla creazione
Testo più piccolo di 40px che il pubblico deve poter leggere

Cosa fornire

URL di origine Figma (opzionale)Se il contenuto o lo storyboard del deck proviene da un URL figma.com, esegui prima /figma per l'esportazione degli asset, i token di brand e la ricostruzione dello storyboard prima di procedere alla costruzione.

03 Dentro la skill

Le Regole che la Skill dello Slideshow Fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Una Sola Idea Più un Solo Elemento Visivo per Slide
Se sei tentato di aggiungere un secondo cluster di elenco puntato o un secondo grafico, dividi la slide.
Font Minimo Equivalente a 30pt
A 1920×1080, un titolo è 72–96px; il testo del corpo è 48px. Non scendere mai sotto i 40px per qualsiasi testo che il pubblico deve leggere.
Solo Dimensionamento del Mercato Bottom-up
Non scrivere mai un TAM di $50B senza mostrare i calcoli. Costruisci partendo dall'economia unitaria: account × ACV, oppure transazioni × take-rate.
Consulta il Catalog Prima di Costruire Manualmente
Per ogni elemento visivo denominato richiesto da una slide, esegui npx hyperframes catalog --query e leggi i primi risultati prima di procedere alla creazione. Un blocco reale è meglio di un'approssimazione semplificata.
Non Renderizzare gli Slideshow in MP4
Un deck viene creato come diverse composition di scena di primo livello senza una composition master-root, quindi il rendering risolve solo la prima composition e produce un MP4 troncato silenziosamente.
I Tempi dei Fragment Sono Posizioni Assolute sulla Timeline della composition
I tempi dei fragment usano lo stesso spazio di coordinate di data-start, non offset relativi all'inizio della scena. Devono rientrare nell'intervallo start, end della slide, inclusi gli estremi.
Preservare la fedeltà della pagina di origine durante il porting
Preservare il design visivo, il linguaggio di motion, il comportamento interattivo, il comportamento dei media e le affordance di presentazione della pagina originale nel modo più fedele possibile.

04 Mettila al lavoro

Installa slideshow in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi slideshow a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica della CLI skills per skills/slideshow/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna allo skill un primo compito PPT e presentazioni

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Correggi il file e riesegui finché il lint non riporta 0 error(s) e la validazione non riporta errori runtime
Verifica che ogni slide.sceneId corrisponda a una scena esistente tramite data-composition-id
Verifica che ogni hotspot.target faccia riferimento a un id di slideSequence definito
Verifica che i tempi dei fragment rientrino nell'intervallo start, end di ciascuna slide

In OpenDesign importa slideshow dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra in alto.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
File della skill: skills/slideshow/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License: Apache-2.0 Da LICENSE.
Stelle del repository: 49.761 Snapshot GitHub acquisita il 2026-09-14 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per slideshow.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Contratto di authoring di slideshowUno slideshow HyperFrames è una composizione normale più un'isola JSON che dichiara slide e connessioni
Output — un deck navigabile, non un MP4 lineareServire con hyperframes presente; non renderizzare in MP4 poiché tronca alla prima composizione
Conferma dell'intentoConferma prima di procedere con l'authoring, a meno che l'utente non abbia esplicitamente richiesto uno slideshow; l'intento instradato è pre-confermato
I due elementiScene dichiarate con data-composition-id e timing; isola JSON con gli array slides e slideSequences
SchemaDefinizioni e requisiti dei campi di SlideshowManifest, SlideRef, SlideHotspot e SlideSequence
Regole di scrittura delle slideTitoli come frasi complete, un'idea per slide, dimensionamento bottom-up, minimo 30pt, ricerca nel catalogo prima di tutto
Porting delle pagine di originePreservare design, motion, interazioni e media originali; tradurre il movimento della pagina in transizioni tra slide; collegare gli eventi media
Fragment: punti di sospensione all'interno di una slideTempi assoluti della timeline nell'intervallo della slide; il controller esegue il seek a ogni fragment su Next; nessuna riproduzione tra i punti
Ramificazione: hotspot e sequenze di slideLe slide di ramificazione sono escluse dalla linea principale; il clic su un hotspot aggiunge alla pila di navigazione; back torna al genitore
Esempio pratico: deck di 3 slide con fragment e una ramificazioneScheletro HTML completo con scene, isola JSON, timeline GSAP e una sequenza di ramificazione
Componente di wrappingRacchiudere in hyperframes-slideshow; fornisce navigazione, tastiera, touch, hotspot; Present apre una tab per il pubblico; mute globale
Eseguire uno slideshow in modo autonomo (soluzione provvisoria)Le demo autonome richiedono soluzioni temporanee finché non viene rilasciata l'anteprima ospitata dal motore; vedi references/standalone-harness.md

Descrizione della skill

"Crea una presentazione HyperFrames — una presentazione, pitch deck o deck interattivo con slide discrete, rivelazioni di frammenti, ramificazioni, navigazione con hotspot e modalità relatore integrata con note per il relatore; converte anche una pagina esistente in un deck. L'output è un deck navigabile, non un MP4 renderizzato. Se l'utente non ha chiesto esplicitamente una presentazione, confermare prima di crearla. Non chiaro → /hyperframes."

Descrizione front-matter da SKILL.md. Il file completo è circa 33.631 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill slideshow

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Cosa sono i fragment e come funzionano?

Un fragment è un tempo assoluto della timeline della composizione, espresso in secondi, entro l'intervallo start, end di una slide, in cui il controller mantiene uno stato di reveal.

Il player entra in una slide con fragment al primo fragment (fragments[0]), quindi esegue il seek a ogni fragment successivo su Next. Dopo l'ultimo fragment, Next avanza alla slide successiva. La navigazione è guidata dal seek, non dalla riproduzione.

Slideshow

Esegui slideshow su un compito di Presentazioni PPT e Slide Deck reali.

Scarica OpenDesign, importa slideshow dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa Fa la Skill slideshow in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare la Skill slideshow

Buona applicazione

Conosci i limiti

Cosa fornire

Le Regole che la Skill dello Slideshow Fornisce a Claude Code e Codex

Una Sola Idea Più un Solo Elemento Visivo per Slide

Font Minimo Equivalente a 30pt

Solo Dimensionamento del Mercato Bottom-up

Consulta il Catalog Prima di Costruire Manualmente

Non Renderizzare gli Slideshow in MP4

I Tempi dei Fragment Sono Posizioni Assolute sulla Timeline della composition

Preservare la fedeltà della pagina di origine durante il porting