create-video-from-screenshot
Installation
SKILL.md
Create Onboarding Video
Produce a short, punchy onboarding video in HyperFrames that showcases one feature working. Output is meant to feel like an App Store preview zoomed into the moment that proves the feature works — not a tutorial, not a screen recording, not a marketing reel.
What you make
- Length: short. 3–8 seconds per onboarding screen, stitched together. Whole video rarely exceeds ~30s.
- Style: UI-first, never the whole screen. Each beat shows a piece of the feature in action — a single button being tapped, a toggle flipping, a row reordering, a sheet sliding up, a chart filling in — animated with nice UI-like transitions (springs, slides, scales, crossfades, masked reveals, shared-element swaps).
- What "pieces" means: crop, mask, or extract just the relevant component from the supplied still — the card, the input field, the tab bar, the empty state turning into a filled state. The rest of the UI is omitted, blurred, or implied by a tinted background. We are showcasing what the feature does, not what the whole app looks like.
- Tone: to the point. Each beat communicates one thing the feature does.
- Output: a HyperFrames composition (HTML) that previews live in the browser and renders to MP4.
Workflow
Follow this loop. Do not skip the intake — guessing at flows produces generic videos.
1. Intake — ask for stills + intent
For each onboarding screen the user wants to feature, collect: