From craft-workspace-webconsulting-skills
Executes HyperFrames CLI: scaffolds projects with templates/media, lints/inspects HTML compositions, previews/renders videos, transcribes/generates TTS audio, troubleshoots environments.
npx claudepluginhub dirnbauer/webconsulting-skillsThis skill uses the workspace's default tool permissions.
Everything runs through `npx hyperframes`. Requires Node.js >= 22 and FFmpeg.
Runs HyperFrames CLI (`npx hyperframes`) for scaffolding projects (`init`), linting/inspecting compositions, previewing, rendering videos, and troubleshooting environment (`doctor`, `info`, `upgrade`). Use in HyperFrames dev loops.
Creates video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
Guides production of marketing videos using AI avatars (HeyGen, Synthesia), generators (Veo, Runway, Kling, Pika), and programmatic tools (Remotion, Hyperframes) for demos, explainers, and clips.
Share bugs, ideas, or general feedback.
Everything runs through npx hyperframes. Requires Node.js >= 22 and FFmpeg.
npx hyperframes init my-videohyperframes skill)npx hyperframes lintnpx hyperframes inspectnpx hyperframes previewnpx hyperframes renderLint and inspect before preview. lint catches missing data-composition-id, overlapping tracks, and unregistered timelines. inspect opens the rendered composition in headless Chrome, seeks through the timeline, and reports text spilling out of bubbles/containers or off the canvas.
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.
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).
npx hyperframes inspect # inspect rendered layout over the timeline
npx hyperframes inspect ./my-project # specific project
npx hyperframes inspect --json # agent-readable findings
npx hyperframes inspect --samples 15 # denser timeline sweep
npx hyperframes inspect --at 1.5,4,7.25 # explicit hero-frame timestamps
Use this after lint and validate, especially for compositions with speech bubbles, cards, captions, or tight typography. It reports:
Errors should be fixed before rendering. Warnings are surfaced for agent review; add --strict to fail on warnings too. Repeated static issues are collapsed by default so JSON output stays compact for LLM context windows. If overflow is intentional for an entrance/exit animation, mark the element or ancestor with data-layout-allow-overflow. If a decorative element should never be audited, mark it with data-layout-ignore.
npx hyperframes layout remains available as a compatibility alias for the same visual inspection pass.
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.
When handing a project back to the user, use the Studio project URL, not the
source index.html path:
http://localhost:<port>/#project/<project-name>
Use the actual port from the preview output and the project directory name. For
example, after npx hyperframes preview --port 3017 in codex-openai-video,
report http://localhost:3017/#project/codex-openai-video.
Treat index.html as source-code context only. It is fine to link it as an
implementation file, but do not label it as the project or preview surface.
npx hyperframes render # standard MP4
npx hyperframes render --output final.mp4 # named output
npx hyperframes render --quality draft # fast iteration
npx hyperframes render --fps 60 --quality high # final delivery
npx hyperframes render --format webm # transparent WebM
npx hyperframes render --docker # byte-identical
| Flag | Options | Default | Notes |
|---|---|---|---|
--output | path | renders/name_timestamp.mp4 | Output path |
--fps | 24, 30, 60 | 30 | 60fps doubles render time |
--quality | draft, standard, high | standard | draft for iterating |
--format | mp4, webm | mp4 | WebM supports transparency |
--workers | 1-8 or auto | auto | Each spawns Chrome |
--docker | flag | off | Reproducible output |
--gpu | flag | off | GPU-accelerated encoding |
--strict | flag | off | Fail on lint errors |
--strict-all | flag | off | Fail on errors AND warnings |
Quality guidance: draft while iterating, standard for review, high for final delivery.
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # import existing
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
npx hyperframes tts "Text here" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # show all voices
npx hyperframes doctor # check environment (Chrome, FFmpeg, Node, memory)
npx hyperframes browser # manage bundled Chrome
npx hyperframes info # version and environment details
npx hyperframes upgrade # check for updates
Run doctor first if rendering fails. Common issues: missing FFmpeg, missing Chrome, low memory.
npx hyperframes compositions # list compositions in project
npx hyperframes docs # open documentation
npx hyperframes benchmark . # benchmark render performance
This skill is based on the excellent work by HeyGen.
Original repository: https://github.com/heygen-com/hyperframes
Copyright (c) HeyGen - HyperFrames HTML-to-video composition and workflow guidance (Apache 2.0)
Special thanks to HeyGen for their generous open-source contributions, which helped shape this skill collection. Adapted by webconsulting.at for this skill collection