Content & Media Creation · nateherkai/hyperframes-student-kit
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.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
A seven-step pipeline where each step produces a manual or automated gate artifact before proceeding to the next.
.claude/skills/website-to-hyperframes/SKILL.md
The workflow has 7 steps. Each produces an artifact that gates the next.
What is happening here: The process of "creating a promotional video" is split into seven phases: Site Capture -> DESIGN -> SCRIPT -> STORYBOARD -> VO + Timing -> Build -> Validation. Each phase has a gate (Step 1 prints a site summary, Step 2 requires DESIGN.md to exist, Step 5 requires narration + transcript.json and an updated STORYBOARD duration, and Step 7 requires zero errors from lint/validate).
Site capturing requires no API keys: `hyperframes capture` grabs design tokens, screenshots, fonts, and assets in a single run, automatically generating descriptions with DOM context.
.claude/skills/website-to-hyperframes/references/step-1-capture.md
npx hyperframes capture <URL> -o captures/<project-name> … No API keys required. The capture extracts design tokens, screenshots, fonts, and assets with DOM-context descriptions automatically.
What is happening here: It transforms "reading a website" into offline-reusable local assets in captures/; the same section provides recommended image reading order (starting with scrolling screenshots) and strategies for handling rich captures (30+ images).
Optional Gemini visual descriptions: Placing GEMINI_API_KEY or GOOGLE_API_KEY in the repository root .env enables Gemini 2.5 Flash to generate richer image descriptions (subject to free-tier rate limits).
.claude/skills/website-to-hyperframes/references/step-1-capture.md
**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision.
What is happening here: This is the only part of the skill involving credentials and is explicitly optional—page screenshots will be sent to the Google vision model; without it, capturing works as usual, just lacking AI-generated descriptions.
DESIGN.md is strictly restricted to being a "quick reference sheet" rather than a creative plan; creative planning is reserved for STORYBOARD.md in Step 4.
.claude/skills/website-to-hyperframes/SKILL.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.
What is happening here: It prevents mixing brand reference guidelines with directorial intent in a single document—Step 2 only answers "what does this site look like," while Step 4 answers "how each beat plays out."
Voiceover precedes visuals: The script serves as the narrative backbone, and scene durations are derived from voiceover rather than guesswork.
.claude/skills/website-to-hyperframes/SKILL.md
Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.
What is happening here: Durations are tied to the measured length of the TTS output (Step 5 uses transcribe to obtain word-level timestamps and backfills actual durations into STORYBOARD).
TTS offers three paths and defaults to local and free: Kokoro runs locally on CPU (no API key required), while ElevenLabs is available via an MCP tool (highest audio quality, but returns no timestamps and requires separate transcription).
.claude/skills/website-to-hyperframes/references/step-5-vo.md
- **Kokoro** (try first — free, no API key) — `npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav`. Runs locally on CPU. … - **ElevenLabs** (best voice quality, widest selection) — `mcp__elevenlabs__search_voices` to browse, `mcp__elevenlabs__text_to_speech` to generate. Does not return timestamps — transcribe separately after.
What is happening here: Voiceover costs and privacy are made configurable; `npx hyperframes transcribe` is then used to obtain word-level timestamps to align beats with actual audio.
Step 6 Build must invoke the actual /hyperframes skill rather than introducing its own animation conventions.
.claude/skills/website-to-hyperframes/SKILL.md
**Read:** The `/hyperframes` skill (invoke it — every rule matters)
What is happening here: Rendering contracts (timeline pauses, clip layers, determinism) are delegated to the authoritative skill, while this skill is solely responsible for "directing each beat"; the gate for Step 6 relies on self-evaluation (self-checking layouts, assets, and avoiding static frames).
Dual validation with zero errors before delivery, along with a HANDOFF.md artifact for multi-session resumption.
.claude/skills/website-to-hyperframes/SKILL.md
Lint, validate, preview. Create a HANDOFF.md for multi-session continuity. … `npx hyperframes lint` and `npx hyperframes validate` pass with zero errors.
What is happening here: "Deliverable" is defined as passing both lint and validate with zero errors plus the existence of a handoff document, preventing dead ends if a session is interrupted.
2Core Capabilities
01Website capture and asset extraction: URL -> captures/<project> (design tokens, screenshots, fonts, assets + descriptions with DOM context)
02Brand quick reference document (DESIGN.md, 6 sections, ~90 lines) and voiceover script (SCRIPT.md)
03Beat-by-beat creative directing (STORYBOARD.md): mood, camera, animation, transitions, assets, depth layers, SFX + asset audit table
04Voiceover and timing: TTS (local Kokoro / ElevenLabs MCP) -> transcription for word-level timestamps -> backfilling actual durations for each beat
05Video format and aspect ratio quick references (social ads 10-15s, product tours 30-60s, etc.; 1920x1080 / 1080x1920 / 1080x1080)
0610 visual technique references (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typewriter effects, variable fonts, MotionPath, transitions) for use in Step 4 and 6
07Delivery validation and handoff: zero errors on `hyperframes lint` + `validate`, along with HANDOFF.md
08Trigger coverage includes single-URL input: both description item 4 and the main text declare that users can initiate this workflow simply by sharing a link
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI：capture / tts / transcribe / lint / validate |
| api | Gemini 2.5 Flash 视觉描述（可选，需 GEMINI_API_KEY / GOOGLE_API_KEY，写在仓库根 .env） |
| api | ElevenLabs 语音（经 MCP 工具 mcp__elevenlabs__*，可选；不返回时间戳需另行转写） |
| network | 被捕获的目标网站自身（URL 由用户提供） |
| package | 兄弟 skill：/hyperframes（Step 6 必须调用） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Local script or command execution: (No scripts inside this skill's directory; all execution entry points specified in SKILL.md use the HyperFrames CLI)
- 网络端点: Declared external network access: HTTP(S) requests to the target captured website (URL provided by the user)
- 本地工作目录: File read/write and artifact output: captures/<project>/: Capture artifacts (screenshots, fonts, assets, extracted tokens, and descriptions)
Audit Notes: This skill's directory consists solely of 9 markdown files (SKILL.md + 8 files in references/) with no scripts, executable code, or hardcoded endpoints. The orange tier is triggered by the execution paths declared in SKILL.md and references: (1) **Credential access + asset exfiltration**—step-1-capture.md instructs users to place GEMINI_API_KEY (or GOOGLE_API_KEY) in the repo root .env so captured screenshots can be sent to Gemini 2.5 Flash for richer descriptions (noting a 5 RPM free limit), meaning screenshots/assets leave the local machine; (2) **External voice services**—step-5-vo.md provides an ElevenLabs MCP path (account-based service), while setting local, free Kokoro as the **preferred default**, offering a clear fallback. Furthermore, the capture target is an arbitrary user-provided URL (outbound target is expected, but determined by the user). No security downgrades (no disabled TLS, no --no-verify), anti-bot bypasses, or arbitrary code execution surfaces were found; the skill contains no executable scripts, and execution surfaces are provided by the HyperFrames CLI and the host runtime.
5Second-Pass Verification
- [ok] Gemini key 与截图外发是否真实存在于文档（橙档关键证据） — references/step-1-capture.md 原文两处：抓站命令与 'No API keys required.'，紧接着 '**Optional:** Set `GEMINI_API_KEY` (or `GOOGLE_API_KEY`) in a `.env` file at the repo root for richer AI-powered image descriptions via Gemini 2.5 Flash vision. Free tier: 5 RPM; paid tier removes the bottleneck.' 即外发可选，且降级路径（不做 AI 描述）同段说明。
- [ok] 本 skill 是否夹带脚本或隐藏执行面 — find 目录只返回 .md；无 package.json、无 scripts/。SKILL.md 与 references 内的命令都是 npx hyperframes / 外部工具类，由宿主执行。
- [ok] ElevenLabs 路径是否把「免费本地」选项挤掉（隐私判断） — step-5-vo.md 把 Kokoro 列为首选并注明 'try first — free, no API key' 与 'Runs locally on CPU'，ElevenLabs 列第二且如实标注 'Does not return timestamps — transcribe separately after'。默认路径不出网（除抓站与 npx 拉取），付费服务是显式选项。
- [discrepancy] 「7 步每步一门禁」是否真的每步都有可判定 gate — ［判定：轻微］Step 1–5、7 的 gate 都是可机械判定的文件存在或 CLI 零错误；但 Step 6 的 gate 是自评式的——'**Gate:** Every composition has been self-reviewed. No overlapping elements, no misplaced assets, no static images without motion.' 由 agent 自查，无脚本或人工签字支撑。属文档自认的软门禁，已在 traits 与 risks 中标注。
- [ok] 触发面声明是否与内容相符（只丢 URL 就用它） — frontmatter 第 4 条与正文 Quick Reference 都覆盖用户分享链接的情形；SKILL.md 的 Users say things like 三条示例（25s launch video、15s IG 广告、30s 产品 tour）方向一致。
6Verdict & Scenarios
Best for: Ideal for users with an existing website (own product site, client site, or landing page) who want to produce promotional videos: 15s social ads, 25–30s product launches/tours, or 30–60s feature walkthroughs. Best suited for those seeking a reviewable workflow of "Capture -> Brand Reference -> Voiceover -> Beat-by-Beat Directing -> VO Timing -> HyperFrames Build -> Validation" and who accept delegating final rendering contracts to the /hyperframes skill.
Not for: Not suitable for: (1) Scenarios with no website to capture, requiring ideation and creation from scratch (this skill requires an existing site as input); (2) Sites requiring authentication to capture or targets protected by anti-bot mechanisms; (3) Users who do not want to send page screenshots to third-party vision APIs (must skip the optional Gemini path); (4) Users wanting to bypass intermediate documentation to produce videos immediately—the seven-step gating is its core design.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload website-to-hyperframes.tar.gz
sha256:
Option B · Copy Guide for Agent689a696415fb5f9d…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.