本文へ移動
cccskills
無料GitHub で公開

website-to-hyperframes

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.

インストール方法を見る

含まれるファイル(9)

  • SKILL.md6.0 KB
  • references/step-1-capture.md3.7 KB
  • references/step-2-design.md5.7 KB
  • references/step-3-script.md3.8 KB
  • references/step-4-storyboard.md12.6 KB
  • references/step-5-vo.md2.0 KB
  • references/step-6-build.md9.2 KB
  • references/step-7-validate.md4.2 KB
  • references/techniques.md8.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Website to HyperFrames

Capture a website, then produce a professional video from it.

Users say things like:

  • "Capture https://... and make me a 25-second product launch video"
  • "Turn this website into a 15-second social ad for Instagram"
  • "Create a 30-second product tour from https://..."

The workflow has 7 steps. Each produces an artifact that gates the next.


Step 1: Capture & Understand

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).


Step 2: Write DESIGN.md

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.


Step 3: Write SCRIPT

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.


Step 4: Write STORYBOARD

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.


Step 5: Generate VO + Map Timing

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.


Step 6: Build Compositions

Read: The /hyperframes skill (invoke 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.


Step 7: Validate & Deliver

Read: references/step-7-validate.md

Lint, validate, preview. Create a HANDOFF.md for multi-session continuity.

Gate: npx hyperframes lint and npx hyperframes validate pass with zero errors.


Quick Reference

Video Types

TypeDurationBeatsNarration
Social ad (IG/TikTok)10-15s3-4Optional hook sentence
Product demo30-60s5-8Full narration
Feature announcement15-30s3-5Full narration
Brand reel20-45s4-6Optional, music focus
Launch teaser10-20s2-4Minimal, high energy

Format

  • Landscape: 1920x1080 (default)
  • Portrait: 1080x1920 (Instagram Stories, TikTok)
  • Square: 1080x1080 (Instagram feed)

Reference Files

FileWhen to read
step-1-capture.mdStep 1 — reading captured data
step-2-design.mdStep 2 — writing DESIGN.md
step-3-script.mdStep 3 — writing the narration script
step-4-storyboard.mdStep 4 — per-beat creative direction
step-5-vo.mdStep 5 — TTS, transcription, timing
step-6-build.mdStep 6 — building compositions with self-review
step-7-validate.mdStep 7 — lint, validate, preview, handoff
techniques.mdSteps 4 & 6 — 10 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Agent 2 of the video editing pipeline. Finds and removes spoken mistakes — stutters, repeated words, false starts, and retakes (re-recorded lines) — from a talking-head recording. Use after cut-silences, when asked to cut mistakes, remove stutters / repeats / filler restarts, clean up flubs, or keep the best take. Works review-gated: it proposes every cut with context and a reason for approval, then renders only the approved cuts via ffmpeg. Requires a word-level transcript.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

Agent 1 of the video editing pipeline. Removes silences and dead air from a talking-head recording. Use when asked to cut silences, trim pauses, remove dead air / gaps, or tighten the pacing of a raw video, given a word-level transcript. Produces an edit list (EDL), a re-timed transcript for downstream agents, and optionally the cut video via ffmpeg. Does NOT cut mistakes, repeats, or false starts — that is the cut-mistakes agent.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

Edit a raw talking-head video through transcription, silence trimming, mistake review, visual storytelling, motion graphics, and verified HyperFrames rendering. Use for a complete edit; route a single requested operation directly to its specialist skill.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

gsap

無料

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

nateherkai/hyperframes-student-kit1,2992026年9月28日 更新

nateherkai のスキルをすべて見る

このスキルの問題を報告する