Video To Landing Page Agent Skill

Turn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user provides a video file and asks for "a landing page from this video", "scroll-frame website", "Apple-style scroll site", "hero that scrubs the video", "like the GitHub Copilot landing", or any equivalent. Extracts N evenly-spaced frames via ffmpeg, builds a self-contained HTML page with a sticky hero + JS scroll listener that swaps the visible frame as you scroll, plus headline, sections and CTA below. For YUV.AI projects, applies the yuv-design-system skill in Neon mode (pink/cyan/white, default for YUV.AI web) — Decks (purple/yellow) is reserved for slides only. For generic / non-YUV.AI projects, picks an appropriate palette per the source video. Output is one folder with `index.html` and a `frames/` directory — drop on any static host.

5k tokens

context cost

the whole folder, loaded on every use

files

ships runnable scripts

copies elsewhere

how many repositories repackaged it

262

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/hoodini/ai-agents-skills --skill video-to-landing-page

The instruction itself

7 sections, as written by the author

Video → Scroll-Driven Landing Page

Build a cinematic landing page where the hero is a video playing on scroll instead of time — like Apple product pages or the GitHub Copilot landing. Frames are extracted from the source video and swapped as the user scrolls; below the sticky hero, normal-scroll sections carry copy and CTA.

When to invoke

User drops a video and asks for a landing page, scrolling site, scroll-frame hero, or website from a video
Mentions of "Apple-style scroll", "GitHub Copilot landing", "scrub-on-scroll", "frame on scroll"
Hebrew equivalents: "דף נחיתה מסרטון", "אתר עם גלילה", "סרטון בגלילה"

Save location

Default: ~/Documents/yuv-projects/landings/<slug>/ — always save landing pages here so you can find them again. Create the parent directory if missing.

mkdir -p ~/Documents/yuv-projects/landings
cd ~/Documents/yuv-projects/landings
# Build <slug>/ here.

Final path: ~/Documents/yuv-projects/landings/<slug>/. Tell the user where the landing lives at the end of every build.

Workflow (8 steps)

Probe the source — ffprobe for duration, fps, dimensions, audio.
Pick frame count — default 80. Floor 40 (choppy if lower), ceiling 160 (heavy page). Choose by duration: ≤10s → 50, 10–30s → 80, 30–60s → 120, >60s → 160.
Decide output directory — default ~/Documents/yuv-projects/landings/<slug>/. The <slug> is short, derived from the video name or the topic. Override only on explicit request.
Extract frames — run references/extract-frames.py <source-video> <output-dir> [count]. Outputs output-dir/frames/f_0001.jpg… with consistent JPG quality 82 and a max-width of 1920 (downscaled if source is larger).
Copy and customise references/landing-template.html into output-dir/index.html:
Replace the __FRAMES__ placeholder with <img> tags for each frame (the build script does this for you when you pass --build-html).
Fill in __HEADLINE__, __TAGLINE__, __CTA_TEXT__, __CTA_HREF__, sections.
For Hebrew content: set <html lang="he" dir="rtl"> and swap fonts to Rubik/Assistant (see references/design-notes.md).
Optimise frames — the build script already scales to 1920px max-width. If the page total weight is > 12 MB, drop quality to 75 or reduce frame count.
Preview — python -m http.server inside the output directory and open http://localhost:8000. Scroll feels buttery on a decent machine.
Deploy — drop the folder on Vercel/Netlify/Cloudflare Pages. No build step needed.

The scroll mechanic

Outer scroller .scroll-stage height set in viewport units (default 600vh = scroll 5 screens to traverse all frames).
Sticky hero position: sticky; top: 0; height: 100vh containing all frames absolutely positioned and hidden except the active one.
Scroll listener computes progress = scrolledIntoStage / scrollableHeight clamped 0–1.
idx = floor(progress * (N - 1)) — swap the .active class to that frame.
Wrap the listener in requestAnimationFrame to keep 60fps.

Design rules

If the project is YUV.AI-branded (Yuval personally, his portfolio, his brand): call yuv-design-system and lock it to a mode by medium —
Neon mode (DEFAULT for YUV.AI web): hot pink (#FF1464) + neon cyan (#00E5FF) + white or rich black canvas. Anton + Inter (English) / Rubik + Assistant (Hebrew). 0px or 999px radii.
Warm Editorial mode: only for Hope, Marcus, bigcats.ai, practical.yuv.ai — pink + yellow + bone, off-white never pure #fff.
Never use Decks mode (Fly High purple/yellow) for a landing page — that palette is reserved for slide decks only.
If the project is not YUV.AI-branded: do not apply yuv-design-system. Pick a palette that fits the source video's mood. Anton + Inter remain reasonable defaults but aren't mandatory.
Hero overlays should be subtle — a vignette and a single big headline; don't drown the frame.
Below-hero sections: light canvas (white in Neon mode, off-white in Warm Editorial, bone if going generic-warm), large Anton heading, body copy in Inter at 18–22px, CTA as a sharp pill (border-radius: 999px) — pink fill in Neon mode, brand-appropriate color otherwise.
For Hebrew: respect RTL, use Rubik 900 for headlines, Assistant 400/500 for body.

File references

| File | Purpose |

| --- | --- |

| references/extract-frames.py | ffmpeg-based frame extractor; optionally builds the full HTML in one go |

| references/landing-template.html | Self-contained landing-page skeleton with the scroll mechanic |

| references/design-notes.md | Typography, palette, and motion defaults |

Other skills for the same job

different authors, same section of the catalogue

AI Marketing Videos

by ComeOnOliver

×2

Create AI marketing videos for ads, promos, product launches, and brand content. Models: Veo, Seedance, Wan, FLUX for visuals, Kokoro for voiceover. Types: product demos, testimonials, explainers, social ads, brand videos. Use for: Facebook ads, YouTube ads, product launches, brand awareness. Triggers: marketing video, ad video, promo video, commercial, brand video, product video, explainer video, ad creative, video ad, facebook ad video, youtube ad, instagram ad, tiktok ad, promotional video, launch video

5k tokens

App Store Screenshots

by ComeOnOliver

×1

App Store and Google Play screenshot creation with exact platform specs. Covers iOS/Android dimensions, gallery ordering, device mockups, and preview videos. Use for: app store optimization, ASO, app screenshots, app preview, play store listing. Triggers: app store screenshots, aso, app store optimization, play store screenshots, app preview, app listing, ios screenshots, android screenshots, app store images, app mockup, device mockup, app gallery, store listing

Generate images using Nano Banana Pro (Gemini 3 Pro Preview). Use when creating app icons, logos, UI graphics, marketing banners, social media images, illustrations, diagrams, or any visual assets. Supports reference images for style transfer and character consistency. Triggers include phrases like 'generate an image', 'create a graphic', 'make an icon', 'design a logo', 'create a banner', 'same style as', 'keep the style', or any request needing visual content.

Generate and save images using Pollinations.ai's free, open-source API. No signup required. Supports URL-based generation, custom parameters (width, height, model, seed), and automatic file saving. Perfect for quick prototypes, marketing assets, and creative workflows.

| Create AI marketing videos for ads, promos, product launches, and brand content. product video, explainer video, ad creative, video ad, facebook ad video, youtube ad, instagram ad, tiktok ad, promotional video, launch video

5k tokens

App Store Screenshots

by ComeOnOliver

×1

Use when building App Store screenshot pages, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators with Next.js. Triggers on app store, screenshots, marketing assets, html-to-image, phone mockup.

30k tokens

Hallmark

by nexu-io

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.

139k tokens

Launch Openshell Gator

by NVIDIA

vendor

Launch and supervise OpenShell gator agents. Use when starting gator on issues or PRs, checking gator sandboxes, building the gator sandbox image, restarting stuck gators, inspecting gator logs, or experimenting with gator harness/model overrides. Trigger keywords - launch gator, start gator, run gator, gator sandbox, supervised gator, gator logs, restart gator.

5k tokens

How to use it

Copy the folder

Take hoodini/video-to-landing-page from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.