website-to-hyperframes
Transforms website content into professional video scripts and promotional ads.
Install
mkdir -p .claude/skills/website-to-hyperframes && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14607" && unzip -o skill.zip -d .claude/skills/website-to-hyperframes && rm skill.zipInstalls to .claude/skills/website-to-hyperframes
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Capture and understand website data, summarizing key assets and vibe.
- →Write a `DESIGN.md` brand reference for the captured website.
- →Create a narration `SCRIPT.md` as the story backbone for the video.
- →Develop a `STORYBOARD.md` with per-beat creative direction.
- →Generate TTS audio, transcribe for word-level timestamps, and map to storyboard beats.
How it works
The skill follows a seven-step pipeline, starting with website capture and understanding, progressing through script and storyboard creation, audio generation, composition building, and final validation.
Inputs & outputs
When to use website-to-hyperframes
- →Creating product launch videos
- →Turning sites into social ads
- →Generating product tours
About this skill
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 (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.
Step 7: Validate & Deliver
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.
Quick Reference
Video Types
| 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 |
Format
- Landscape: 1920x1080 (default)
- Portrait: 1080x1920 (Instagram Stories, TikTok)
- Square: 1080x1080 (Instagram feed)
Reference Files
| 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 — 11 visual techniques with code patterns (SVG drawing, Canvas 2D, 3D, typography, Lottie, video, typing, variable fonts, MotionPath, transitions, audio-reactive) |
When not to use it
- →When a video is not required from a website.
- →When a simple screenshot or static image is sufficient.
- →When the user does not want a professional video production workflow.
Limitations
- →The skill requires a website URL as input.
- →The skill produces a HyperFrames video project, not directly an MP4 unless explicitly requested.
- →The skill enforces specific artifact generation at each step (e.g., `DESIGN.md`, `SCRIPT.md`).
How it compares
This workflow provides a structured, artifact-gated process for transforming a website into a professional video, unlike ad-hoc video creation that lacks defined stages and deliverables.
Compared to similar skills
website-to-hyperframes side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| website-to-hyperframes (this skill) | 0 | 2mo | No flags | Advanced |
| scriptwriting | 17 | 9mo | No flags | Beginner |
| applying-brand-guidelines | 8 | 8mo | Review | Beginner |
| amcs-lyrics-generator | 10 | 9mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
scriptwriting
gtmagents
Use when crafting scripts, storyboards, and messaging for video content.
applying-brand-guidelines
anthropics
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging
amcs-lyrics-generator
miethe
Generate song lyrics with citations from pinned sources. Enforces rhyme scheme, meter, syllable counts, hook strategy, and profanity filter while retrieving from MCP sources with deterministic hash-based pinning. Use when creating lyrics with structural constraints, source attribution, and policy compliance.
baoyu-xhs-images
JimLiu
Generates Xiaohongshu (Little Red Book) infographic series with 10 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
notion-template-business
davila7
Expert in building and selling Notion templates as a business - not just making templates, but building a sustainable digital product business. Covers template design, pricing, marketplaces, marketing, and scaling to real revenue. Use when: notion template, sell templates, digital product, notion business, gumroad.
meme-factory
davila7
Generate memes using the memegen.link API. Use when users request memes, want to add humor to content, or need visual aids for social media. Supports 100+ popular templates with custom text and styling.