por Juanjo LunaCrear vídeos HTML con HyperFrames
Te ayuda a crear composiciones de vídeo en HTML con animaciones, subtítulos, voz, transiciones y efectos reactivos al audio. Sirve cuando necesitas producir contenido de vídeo basado en HTML de principio a fin.
Descripción original (inglés)
hyperframes: Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta hyperframes en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/design-templates/hyperframes" ~/.claude/skills/hyperframes
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de nexu-io/open-design
- Maquetar artículo tipo revista article-magazine
- Web artística de estudio creativo aster-atelier
- Generar jingles y audio audio-jingle
- Escribir artículos y entradas de blog blog-post
- Ejecutar build y pruebas build-test
- Crear tarjeta para Twitter card-twitter
- Crear tarjetas carrusel para Xiaohongshu card-xiaohongshu
- Laboratorio de interfaz para Claude claude-agent-lab
Explicación redactada con ayuda de IA a partir de la descripción original.