From craft-workspace-webconsulting-skills
Captures a website and generates HyperFrames videos via 7-step workflow: capture, design, script, storyboard, voiceover, compositions, validation. For product tours, social ads, promos from URLs.
npx claudepluginhub dirnbauer/webconsulting-skillsThis skill uses the workspace's default tool permissions.
Capture a website, then produce a professional video from it.
Captures websites from URLs and creates HyperFrames videos for product tours, social ads, or promos via 7-step workflow: capture, design, script, storyboard, voiceover, compositions, validate.
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.
Plans and produces demo videos, GIFs, screenshots, and Remotion programmatic videos for product launches. Covers scripting, recording, best practices, and platform formats.
Share bugs, ideas, or general feedback.
Capture a website, then produce a professional video from it.
Users say things like:
The workflow has 7 steps. Each produces an artifact that gates the next.
Read: references/step-1-capture.md
Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.
Gate: Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).
Read: references/step-2-design.md
Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan — that comes in Step 4.
Gate: DESIGN.md exists in the project directory.
Read: references/step-3-script.md
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
Gate: SCRIPT.md exists in the project directory.
Read: references/step-4-storyboard.md
Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star — the document the engineer follows to build each composition.
Gate: STORYBOARD.md exists with beat-by-beat direction and an asset audit table.
Read: references/step-5-vo.md
Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.
Gate: narration.wav (or .mp3) + transcript.json exist. Beat timings in STORYBOARD.md updated.
Read: The hyperframes skill (load it — every rule matters)
Read: references/step-6-build.md
Build each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.
Gate: Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.
Read: references/step-7-validate.md
Lint, validate, snapshot, preview. Deliver the localhost Studio project URL
(http://localhost:<port>/#project/<project-name>) to the user first — only
render to MP4 on explicit request. Do not treat index.html as the project
handoff link; it is source-code context only.
Gate: npx hyperframes lint and npx hyperframes validate pass with zero errors, and the final response includes the active Studio project URL.
| Type | Duration | Beats | Narration |
|---|---|---|---|
| Social ad (IG/TikTok) | 10-15s | 3-4 | Optional hook sentence |
| Product demo | 30-60s | 5-8 | Full narration |
| Feature announcement | 15-30s | 3-5 | Full narration |
| Brand reel | 20-45s | 4-6 | Optional, music focus |
| Launch teaser | 10-20s | 2-4 | Minimal, high energy |
| File | When to read |
|---|---|
| step-1-capture.md | Step 1 — reading captured data |
| step-2-design.md | Step 2 — writing DESIGN.md |
| step-3-script.md | Step 3 — writing the narration script |
| step-4-storyboard.md | Step 4 — per-beat creative direction |
| step-5-vo.md | Step 5 — TTS, transcription, timing |
| step-6-build.md | Step 6 — building compositions with self-review |
| step-7-validate.md | Step 7 — lint, validate, snapshot, preview |
| techniques.md | Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) |
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