agentleFS
Sign inStart free
coltonjosephdean-rgbcoltonjosephdean-rgb/Hyperframes-colton.ai.dean/.claude/skills/website-to-hyperframes/SKILL.md

website-to-hyperframes

Skill19 starsChanged 5 months agoMITView on GitHub

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.

We split this skill into the rules it gives an agent

5 rules. 5 are common, 0 are distinctive, and 0 are very specific to this project.

  • 5

    Common

    Most of the 13 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Common:

    Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.

    line 25
  2. Common:

    Write a simple brand reference for the captured website.

    line 35
  3. Common:

    Write the narration script.

    line 45
  4. Common:

    Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX.

    line 55
  5. Common:

    Gate: Every composition has been self-reviewed.

    line 78

“Common” is measured: kept by at least 6 in 10 of the 13 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
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)

Download now (ZIP)

  • Other versions21 projects use a version of this.

    Edited · 13

    1. openai/plugins★ 7.4k90% same
    2. boraoztunc/skills★ 33788% same
    3. notivn/AIEV★ 132100% same
    4. anton-abyzov/vskill★ 4888% same
    5. delorenj/skills★ 1888% same
    6. coopersimson96/ai-content-system★ 1795% same
    7. hoanghd218/claude-code-2-days★ 888% same
    8. tony-hoang-ai-automation/mkt-skills★ 495% same
    9. dqtx760/skills-manage★ 290% same
    10. Biznomad/claude-skills★ 088% same

    3 more not listed

    Wrote their own version · 1

    1. NexumAI-online/skills-edicion★ 4same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use short-form-edit, cut-mistakes and 8 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • NexumAI-onlineSkill

      short-form-edit

      Convertí una grabación hablada en un reel, YouTube Short o anuncio corto terminado, con apertura que genere curiosidad, resolución respaldada por el contenido, cortes narrativos, gráficos sincronizados, B-roll en movimiento, subtítulos, música sutil y efectos. Para videos largos usá edit-video; para quitar sólo pausas, cut-silences.

      Also in 4 projects that use this

    • nateherkaiSkill

      cut-mistakes

      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.

      Also in 4 projects that use this

    • nateherkaiSkill

      cut-silences

      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.

      Also in 4 projects that use this

    • anton-abyzovSkill

      waapi

      Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

      Also in 4 projects that use this

    • Google CloudSkill

      video-storytelling

      Cinematic video ad storytelling expertise. Covers 3-act narrative structure, emotional arcs, camera motion, scene transitions, and voiceover pacing for 10-second commercial video ads using Gemini Omni. Load this skill when generating video ads or storylines.

      Also in 4 projects that use this

    • anton-abyzovSkill

      lottie

      Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.

      Also in 4 projects that use this

    • +2 more from nateherkai
    • +2 more from anton-abyzov
  • In this repository11 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free