Qu'est-ce que design-agent-skills ?

Le pack `hyperframes` (du dépôt `podo/design-agent-skills`) est une suite de 11 compétences spécialisées pour les agents de codage IA (Claude Code, Cursor, etc.) qui permet de produire des vidéos à partir de compositions HTML. Il couvre la création de scènes HTML/CSS/JS, la synthèse vocale et la transcription via HeyGen, un workflow de rendu en ligne de commande, un registre d'actifs réutilisables, la capture d'URL pour le contenu web en direct, ainsi que six sous-compétences d'animation (GSAP, Anime.js, CSS animé, Lottie, Three.js 3D et WAAPI). Conçu pour les pipelines de production vidéo pilotés par des agents, il nécessite un compte HeyGen pour les fonctionnalités de génération multimédia (TTS, transcription, rendu vidéo). L'installation se fait via `npx skills add heygen-com/hyperframes` et l'invocation se fait par le nom de compétence `hyperframes` ou des phrases déclencheurs comme 'hyperframes', 'HTML to video' ou 'HeyGen'.

Compatible avec✓Claude Code~Codex CLI✓Cursor

npx skills add podo/design-agent-skills

Documentation

hyperframes

Catalogue stub — package complet : heygen-com/hyperframes

Remarque : Nécessite un compte HeyGen pour les fonctionnalités de synthèse vocale et de génération multimédia.

Arbre de décision

Le package est-il déjà installé ? Vérifiez : le répertoire des compétences de votre agent contient hyperframes avec du contenu au-delà de ce stub.
- Oui → invoquez hyperframes et procédez
- Non → passez à l'étape 2
Sur quel agent êtes-vous ?
- Claude Code → npx skills add heygen-com/hyperframes — ou envoyez ! npx skills add … en tant que message de chat (ajoutez -g pour une installation globale, omettez pour le projet uniquement)
- Cursor → npx skills add heygen-com/hyperframes
- Autre → npx skills add heygen-com/hyperframes ou consultez le README GitHub

Commande d'installation

npx skills add heygen-com/hyperframes

Un compte HeyGen est nécessaire pour les fonctionnalités de synthèse vocale, transcription et rendu vidéo. La création d'animations fonctionne sans compte.

Invocation après installation

Nom de la compétence : hyperframes
Phrases déclencheurs : "hyperframes", "HTML to video", "HeyGen", "render video from HTML", "Anime.js"

Ce qu'elle fait

"Écrivez du HTML. Rendez une vidéo." — une suite de 11 compétences conçues spécifiquement pour les agents de codage IA qui doivent produire une sortie vidéo à partir de compositions HTML. Couvre : la création de compositions (construction de scènes HTML/CSS/JS), la synthèse vocale et la transcription via HeyGen, un workflow de rendu piloté par CLI, un registre d'actifs pour les médias réutilisables, la capture d'URL pour récupérer du contenu web en direct, et six sous-compétences d'animation couvrant GSAP, Anime.js, les animations CSS pures, la lecture Lottie, la 3D Three.js et l'API Web Animations (WAAPI). Conçu de A à Z pour les pipelines de production vidéo pilotés par des agents.

Quand NE PAS l'utiliser

Animation statique sans sortie vidéo (utilisez gsap-skills, framer-motion-skills ou animate-css-skill)
Lorsque vous n'avez pas de compte HeyGen — les fonctionnalités de génération multimédia (TTS, rendu vidéo) ne fonctionneront pas

podo/design-agent-skills