Render Html Native Agent Videos With Slash Command Workflows Using Hyperframes

---
name: "Render HTML-native agent videos with slash-command workflows using HyperFrames"
slug: "render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes"
description: "Use agent-facing HyperFrames skills to turn prompts, PDFs, CSVs, or repo context into editable HTML video compositions and rendered MP4 outputs."
github_stars: 9510
verification: "security_reviewed"
source: "https://github.com/heygen-com/hyperframes"
author: "HeyGen"
publisher_type: "organization"
category: "Image & Creative Automation"
framework: "Multi-Framework"
tool_ecosystem:
  github_repo: "heygen-com/hyperframes"
  github_stars: 9510
  npm_package: "hyperframes"
  npm_weekly_downloads: 28006
---

# Render HTML-native agent videos with slash-command workflows using HyperFrames

Use agent-facing HyperFrames skills to turn prompts, PDFs, CSVs, or repo context into editable HTML video compositions and rendered MP4 outputs.

## Prerequisites

Node.js 22+, FFmpeg

## Installation

Use the upstream install or setup path that matches your environment:
- npx skills add heygen-com/hyperframes
- Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.
- Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.
- npx hyperframes init my-video

Requirements and caveats from upstream:
- <a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a>
- **Requirements:** Node.js >= 22, FFmpeg

Basic usage or getting-started notes:
- ### Option 1: With an AI coding agent (recommended)
- bash
- This teaches your agent (Claude Code, Cursor, Gemini CLI, Codex) how to write correct compositions, GSAP timelines, Tailwind v4 browser-runtime styles, and first-party adapter animations. In Claude Code, the skills re...

- Source: https://github.com/heygen-com/hyperframes
- Extracted from upstream docs: https://raw.githubusercontent.com/heygen-com/hyperframes/HEAD/README.md

## Documentation

- https://github.com/heygen-com/hyperframes

## Source

- [Agent Skill Exchange](https://agentskillexchange.com/skills/render-html-native-agent-videos-with-slash-command-workflows-using-hyperframes/)