# Hyperframes CLI

HyperFrames CLI tool, hyperframes init, lint, preview, render, transcribe, tts...

- Repository: https://github.com/nateherkai/herk-edit-kit (2482 stars)
- Category: Media
- License: see repository
- Last updated: 2026-10-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nateherkai/herk-edit-kit --skill hyperframes-cli -g -a claude-code -y`
Codex: `npx skills add nateherkai/herk-edit-kit --skill hyperframes-cli -g -a codex -y`
Cursor: `npx skills add nateherkai/herk-edit-kit --skill hyperframes-cli -g -a cursor -y`
Gemini CLI: `npx skills add nateherkai/herk-edit-kit --skill hyperframes-cli -g -a gemini-cli -y`

## Description

HyperFrames CLI tool, hyperframes init, lint, preview, render, transcribe, tts, doctor, browser, info, upgrade, compositions, docs, benchmark. Use when scaffolding a project, linting or validating compositions, previewing in the studio, rendering to video, transcribing audio, generating TTS, or troubleshooting the HyperFrames environment.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HyperFrames CLI

Everything runs through `npx hyperframes`. Requires Node.js >= 22 and FFmpeg.

## Workflow

1. **Scaffold**, `npx hyperframes init my-video`
2. **Write**, author HTML composition (see the `hyperframes` skill)
3. **Lint**, `npx hyperframes lint`
4. **Preview**, `npx hyperframes preview`
5. **Render**, `npx hyperframes render`

Lint before preview, catches missing `data-composition-id`, overlapping tracks, unregistered timelines.

## Scaffolding

```bash
npx hyperframes init my-video                        # interactive wizard
npx hyperframes init my-video --example warm-grain   # pick an example
npx hyperframes init my-video --video clip.mp4        # with video file
npx hyperframes init my-video --audio track.mp3       # with audio file
npx hyperframes init my-video --non-interactive       # skip prompts (CI/agents)
```

Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`.

`init` creates the right file structure, copies media, transcribes audio with Whisper, and installs AI coding skills. Use it instead of creating files by hand.

## Linting

```bash
npx hyperframes lint                  # current directory
npx hyperframes lint ./my-project     # specific project
npx hyperframes lint --verbose        # info-level findings
npx hyperframes lint --json           # machine-readable
```

Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`).

## Previewing

```bash
npx hyperframes preview                   # serve current directory
npx hyperframes preview --port 4567       # custom port (default 3002)
```

Hot-reloads on file changes. Opens the studio in your browser automatically.

## Rendering

The rest: https://github.com/nateherkai/herk-edit-kit/blob/HEAD/.agents/skills/hyperframes-cli/SKILL.md