Update to HyperFrames by HeyGen

{
  "name": "website-to-hyperframes",
  "description": "Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says \"capture this site\", \"turn this into a video\", \"make a promo from my site\", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 133
    },
    {
      "relative_path": "references/step-1-capture.md",
      "size_in_bytes": 4865
    },
    {
      "relative_path": "references/step-2-design.md",
      "size_in_bytes": 8888
    },
    {
      "relative_path": "references/step-3-script.md",
      "size_in_bytes": 3890
    },
    {
      "relative_path": "references/step-4-storyboard.md",
      "size_in_bytes": 14957
    },
    {
      "relative_path": "references/step-5-vo.md",
      "size_in_bytes": 2498
    },
    {
      "relative_path": "references/step-6-build.md",
      "size_in_bytes": 15581
    },
    {
      "relative_path": "references/step-7-validate.md",
      "size_in_bytes": 5543
    },
    {
      "relative_path": "references/techniques.md",
      "size_in_bytes": 11127
    }
  ],
  "skill_md_contents": "---\nname: website-to-hyperframes\ndescription: |\n  Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says \"capture this site\", \"turn this into a video\", \"make a promo from my site\", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL — this is the skill to use.\n---\n\n# Website to HyperFrames\n\nCapture a website, then produce a professional video from it.\n\nUsers say things like:\n\n- \"Capture https://... and make me a 25-second product launch video\"\n- \"Turn this website into a 15-second social ad for Instagram\"\n- \"Create a 30-second product tour from https://...\"\n\nThe workflow has 7 steps. Each produces an artifact that gates the next.\n\n---\n\n## Step 1: Capture & Understand\n\n**Read:** [references/step-1-capture.md](references/step-1-capture.md)\n\nRun the capture, read the extracted data, and build a working summary using the write-down-and-forget method.\n\n**Gate:** Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).\n\n---\n\n## Step 2: Write DESIGN.md\n\n**Read:** [references/step-2-design.md](references/step-2-design.md)\n\nWrite 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.\n\n**Gate:** `DESIGN.md` exists in the project directory.\n\n---\n\n## Step 3: Write SCRIPT\n\n**Read:** [references/step-3-script.md](references/step-3-script.md)\n\nWrite the narration script. The story backbone. Scene durations come from the narration, not from guessing.\n\n**Gate:** `SCRIPT.md` exists in the project directory.\n\n---\n\n## Step 4: Write STORYBOARD\n\n**Read:** [references/step-4-storyboard.md](references/step-4-storyboard.md)\n\nWrite 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.\n\n**Gate:** `STORYBOARD.md` exists with beat-by-beat direction and an asset audit table.\n\n---\n\n## Step 5: Generate VO + Map Timing\n\n**Read:** [references/step-5-vo.md](references/step-5-vo.md)\n\nGenerate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.\n\n**Gate:** `narration.wav` (or .mp3) + `transcript.json` exist. Beat timings in STORYBOARD.md updated.\n\n---\n\n## Step 6: Build Compositions\n\n**Read:** The `hyperframes` skill (load it — every rule matters)\n**Read:** [references/step-6-build.md](references/step-6-build.md)\n\nBuild each composition following the storyboard. After each one: self-review for layout, asset placement, and animation quality.\n\n**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.\n\n---\n\n## Step 7: Validate & Deliver\n\n**Read:** [references/step-7-validate.md](references/step-7-validate.md)\n\nLint, validate, snapshot, preview. Deliver the localhost Studio project URL\n(`http://localhost:<port>/#project/<project-name>`) to the user first — only\nrender to MP4 on explicit request. Do not treat `index.html` as the project\nhandoff link; it is source-code context only.\n\n**Gate:** `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors, and the final response includes the active Studio project URL.\n\n---\n\n## Quick Reference\n\n### Video Types\n\n| Type                  | Duration | Beats | Narration              |\n| --------------------- | -------- | ----- | ---------------------- |\n| Social ad (IG/TikTok) | 10-15s   | 3-4   | Optional hook sentence |\n| Product demo          | 30-60s   | 5-8   | Full narration         |\n| Feature announcement  | 15-30s   | 3-5   | Full narration         |\n| Brand reel            | 20-45s   | 4-6   | Optional, music focus  |\n| Launch teaser         | 10-20s   | 2-4   | Minimal, high energy   |\n\n### Format\n\n- **Landscape**: 1920x1080 (default)\n- **Portrait**: 1080x1920 (Instagram Stories, TikTok)\n- **Square**: 1080x1080 (Instagram feed)\n\n### Reference Files\n\n| File                                                    | When to read                                                                                                                                                   |\n| ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [step-1-capture.md](references/step-1-capture.md)       | Step 1 — reading captured data                                                                                                                                 |\n| [step-2-design.md](references/step-2-design.md)         | Step 2 — writing DESIGN.md                                                                                                                                     |\n| [step-3-script.md](references/step-3-script.md)         | Step 3 — writing the narration script                                                                                                                          |\n| [step-4-storyboard.md](references/step-4-storyboard.md) | Step 4 — per-beat creative direction                                                                                                                           |\n| [step-5-vo.md](references/step-5-vo.md)                 | Step 5 — TTS, transcription, timing                                                                                                                            |\n| [step-6-build.md](references/step-6-build.md)           | Step 6 — building compositions with self-review                                                                                                                |\n| [step-7-validate.md](references/step-7-validate.md)     | Step 7 — lint, validate, snapshot, preview                                                                                                                     |\n| [techniques.md](references/techniques.md)               | Steps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions) |\n"
}