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:

Installs
2
GitHub Stars
6
First Seen
May 19, 2026
create-video-from-screenshot — almeidamarcell/claude-code-skills