product-video
Plan an animated product video end-to-end: pick the video type, define the animation style and pacing, write a beat-by-beat shot list, and produce ready-to-run keyframe prompts. Use whenever the user wants a product video, product animation, launch video, promo or ad video, animated product reveal, 360 spin, feature showcase, or 'a short video for my product' — even if they only say 'I need a video for the launch' or 'make my product look good in motion'. Also use to storyboard a video another tool will render. Produces a Product Video Production Spec: concept, beat sheet with timings and transitions, keyframe prompt list for fal-ai/nano-banana-pro, and audio/CTA direction.
- Installs
- 210
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/sanky369/vibe-building-skills --skill product-video- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads product-video automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Product Video
Turn a product and a goal into a complete Product Video Production Spec — one chosen video concept, a beat-by-beat shot list with timings, an animation and pacing plan, and generation-ready keyframe prompts. The governing principle: one video communicates one thing. Every beat either builds toward the single message (the reveal, the benefit, the transformation) or it gets cut. You produce the plan and the keyframes; rendering the motion happens downstream.
When to use / when not to
- Use for product-centric motion content: reveals, feature showcases, product-in-action, transformations, 360 spins.
- If the video is fronted by a person (presenter, testimonial, UGC) → use
skills/creative/talking-head. - If the video will be rendered programmatically in Remotion (UI demos, code tutorials, data viz) → use
skills/creative/remotion-script-writer; you can still run this skill first to define concept and beats, then hand the beat sheet over. - If the user needs static assets (posts, banners) →
skills/creative/social-graphics. - If there is no brand style guide yet and the user cares about brand consistency → run
skills/creative/creative-strategistfirst; its style guide feeds this skill.
Intake
Ask in one tight batch, only what's missing:
- Product — what is it and what's the one thing the video must communicate (new launch? a feature? a benefit? a before/after)?
- Where it runs — TikTok/Reels/Shorts, product page, YouTube pre-roll, trade show loop? (This decides aspect ratio, duration, pacing.)
- What the viewer should do after — the CTA.
- Brand style — is there a
skills/creative/creative-strategiststyle guide or existing brand assets to match?
Infer from context instead of asking: aspect ratio from platform, mood from product category, style from any existing brand materials in the project. Don't stall: if the product and goal are clear, state your assumptions for the rest ("Assuming Reels, 12s, vertical, energetic — say otherwise") and proceed.
Workflow
1. Choose the video type (decision rule, not a menu)
| If the message is… | Type | Duration | Beat structure |
|---|---|---|---|
| "This exists / it's new" | Reveal | 5–15s | hidden/obscured → reveal animation (fade, slide, rotate) → hero shot |
| "It does these 2–4 things" | Feature Showcase | 15–30s | feature 1 highlight → feature 2 → feature 3 → full product |
| "Here's the benefit in use" | In Action | 10–20s | product in environment → product being used → outcome shown |
| "Look at the change" | Transformation | 10–15s | before state → morph → after state |
| "Just show the object" (e-commerce, listings) | 360 Spin | 5–10s | continuous smooth rotation, clean background |
Commit to one type with a one-line reason. Offer a single backup only if two genuinely fit. Never showcase more than 4 features — cut to the strongest.
2. Set pacing from platform
- Fast (5–10s, quick snappy cuts): social feeds, ads, anything skippable. Hook in the first 2 seconds.
- Medium (10–20s, smooth transitions): product pages, marketing site, email embeds.
- Slow (20–30s, deliberate luxurious moves): premium/luxury products, storytelling. Only choose slow if the product's price point earns the patience.
Aspect ratio by placement: 9:16 vertical (TikTok/Reels/Shorts/Stories), 16:9 (YouTube, web hero), 1:1 or 4:5 (feed posts). These map directly to --aspect-ratio values in the CLI.
3. Pick one animation style
Match to brand personality — pick exactly one and use its phrase verbatim in every keyframe prompt so frames stay consistent:
| Brand feel | Style | Prompt phrase |
|---|---|---|
| Elegant, calm | Smooth Fade | "smooth fade transitions, gentle pacing, elegant" |
| Modern, energetic | Dynamic Slide | "dynamic slide transitions, elements slide in, energetic pacing" |
| Cinematic, bold | Zoom & Rotate | "zoom and rotate moves, dynamic pacing, cinematic" |
| Sophisticated, fluid | Morphing | "smooth morphing transitions, fluid animation, sophisticated" |
| High-tech | Particle Effects | "particle effects, product materializes/dissolves, high-tech" |
4. Write the beat sheet
Break the duration into 3–6 beats. For each beat: time range, what's on screen, camera/motion, and the transition out. Every beat must advance the single message; the last beat always holds the product + CTA for ≥2 seconds.
5. Write keyframe prompts
One keyframe per beat (two for a transformation's before/after). Each prompt = subject + state at that beat + the animation-style phrase + lighting + the same style/lighting descriptors across all frames (consistency is what makes frames read as one video). All keyframes use identical background and lighting descriptions unless the beat explicitly changes location.
If FAL_API_KEY (or FAL_KEY) is set, generate the keyframes now with the repo CLI — model fal-ai/nano-banana-pro via docs/fal_api.py:
python docs/creative_cli.py custom \
--category "video-keyframes" --name "beat-1-hero" \
--prompt "<keyframe prompt>" --aspect-ratio 9:16 --resolution 2K
If no key is set, deliver the prompts as ready-to-run commands. Note: nano-banana-pro generates still keyframes only — the motion between them is produced downstream (Remotion, a video generation tool, or an editor).
6. Self-check against the quality bar, then deliver the spec.
Required output format
Always deliver this structure:
# Product Video Production Spec — [Product]
## Overview
- **Message (one sentence):** ...
- **Type:** Reveal | Feature Showcase | In Action | Transformation | 360 Spin — [one-line reason]
- **Platform / placement:** ... · **Aspect ratio:** ... · **Duration:** ...s · **Pacing:** Fast/Medium/Slow
- **Animation style:** [style + verbatim prompt phrase]
- **CTA:** ...
## Beat sheet
| # | Time | On screen | Camera / motion | Transition out |
|---|------|-----------|-----------------|----------------|
| 1 | 0–3s | ... | ... | ... |
| 2 | 3–7s | ... | ... | ... |
(final beat: product + CTA, held ≥2s)
## Keyframes
### KF-1 (beat 1) — [label]
> [full nano-banana-pro prompt]
`python docs/creative_cli.py custom --category "video-keyframes" --name "kf-1" --prompt "..." --aspect-ratio [ratio] --resolution 2K`
(repeat per beat; identical style/lighting descriptors across all)
## Audio direction
- Music: [genre/energy matched to pacing] · Sound design: [key moments] · VO: [none, or one line per beat]
## Production notes
- [render path: Remotion via skills/creative/remotion-script-writer / video gen tool / editor]
- [anything beat-specific: logo timing, text overlays, loop point for trade-show/spin videos]
Quality bar (check before delivering)
- One message; if you can't state it in one sentence, restart at step 1.
- Hook lands within the first 2 seconds for Fast pacing, 4 for Medium.
- Beat count 3–6; no beat shorter than 1.5s; timings sum exactly to the stated duration.
- Every keyframe prompt contains the same animation-style phrase and the same lighting/background descriptors (unless the beat changes location) — inconsistent frames are the #1 failure mode.
- Prompts specify "smooth", "fluid" motion language — never leave motion quality implicit.
- CTA present in the final beat, held ≥2 seconds.
- No invented performance claims ("this format gets 3x engagement") — pacing/duration guidance above is heuristic, label it as such if asked.
Integration
skills/creative/creative-strategist→ feeds in: the style guide (colors, mood, lighting language) that all keyframe prompts must obey.skills/creative/product-photography→ feeds in: existing hero-shot prompts/lighting setups reused as the video's hero frame for consistency.skills/creative/image-generation→ consumes: keyframe prompts, if the user wants deeper control over generation than the CLI one-liners.skills/creative/remotion-script-writer→ consumes: the beat sheet + keyframes, when the video will be rendered as a Remotion composition.skills/creative/social-graphics→ consumes: hero keyframes as source imagery for supporting static posts.
FAQ
What does the product-video skill do?
Plan an animated product video end-to-end: pick the video type, define the animation style and pacing, write a beat-by-beat shot list, and produce ready-to-run keyframe prompts. Use whenever the user wants a product video, product animation, launch video, promo or ad video, animated product reveal, 360 spin, feature showcase, or 'a short video for my product' — even if they only say 'I need a video for the launch' or 'make my product look good in motion'. Also use to storyboard a video another tool will render. Produces a Product Video Production Spec: concept, beat sheet with timings and transitions, keyframe prompt list for fal-ai/nano-banana-pro, and audio/CTA direction.
How do I install product-video?
Run npx skills add https://github.com/sanky369/vibe-building-skills --skill product-video in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/product-video/ (personal) or .claude/skills/product-video/ (project).
Which AI agents can use product-video?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is product-video safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains product-video?
It is published by sanky369 in sanky369/vibe-building-skills. It has 210 recorded installs.
More from sanky369/vibe-building-skills
social-graphics
sanky369/vibe-building-skills
Produce platform-correct social media graphics: pick the right dimensions and layout per platform, write the headline/body/CTA copy, build the generation prompt, and generate the image via the repo's FAL.ai pipeline. Use whenever the user wants a social post visual, Instagram post/story/carousel, LinkedIn graphic, Twitter/X image, TikTok thumbnail, Pinterest pin, launch announcement graphic, or 'something to post about X' — even if they never name a platform. Also use to adapt one design across several platforms. Produces a Social Graphic Spec per asset (platform, dimensions, layout, copy, full generation prompt) plus generated images when FALAPIKEY is available.
direct-response-copy
sanky369/vibe-building-skills
Write copy engineered to drive one specific action — landing pages, sales pages, opt-in pages, ads, promotional emails — using an eight-part direct-response architecture (hook, problem, mechanism, solution, proof, objections, CTA, urgency). Use when the user says 'write my landing page / sales page / ad', 'this page isn't converting', 'rewrite my homepage copy', 'write copy for my lead magnet page', or any request for persuasive copy with a measurable action at the end. Produces the full copy draft, section-labeled against the architecture, plus hook alternatives and a conversion checklist.
tweet-writer
sanky369/vibe-building-skills
Write high-engagement tweets and X/Twitter threads, grounded in live research of what's currently working in the user's niche: researches viral examples via web search, then drafts hook variants, a single-tweet version, and a thread version with alternates to test. Use when the user says 'write a tweet about X', 'turn this into a thread', 'help me go viral', 'grow my X/Twitter account', 'my tweets get no engagement', or shares an idea/article to tweet — any X/Twitter content request. Produces a Tweet Package: 3 hook options, final single tweet, full thread, and posting notes.
typography-system
sanky369/vibe-building-skills
Build or repair a typography system: a modular type scale, font choices and loading, hierarchy, line-height/line-length, and fluid sizing — delivered as tokens (Tailwind fontSize config or CSS variables) applied to real components. Use when the user says 'the text looks off', 'fonts are inconsistent', 'headings don't stand out', 'pick fonts for me', 'it's hard to read', 'too many font sizes', or when an audit finds font-size sprawl. Chooses the scale ratio from product density (dense app vs marketing vs editorial), verifies contrast and measure, and produces the type tokens plus a migration map from existing rogue sizes.
remotion-script-writer
sanky369/vibe-building-skills
Write a complete, render-ready Remotion video script as structured JSON: analyze the user's codebase or product, break the video into timed scenes, specify every visual element, animation, transition, and voiceover line, and list required assets and Remotion packages. Use whenever the user wants a Remotion video, a programmatic/code-rendered video, a product demo video of their app, an animated coding tutorial, a data-visualization video, or short-form animated social content — trigger on 'make a video of my app', 'Remotion', 'animated demo', 'code walkthrough video', 'render a video from code'. Produces a Remotion Script JSON (videoMetadata, scenes[], requiredAssets, technicalRequirements) that Remotion agent tooling can implement directly.
color-system
sanky369/vibe-building-skills
Build or repair a color system: full brand and neutral ramps, semantic color tokens, contrast-verified pairings, dark mode, and status colors — delivered as a tokens file (CSS variables / Tailwind theme) with every text pairing's contrast ratio computed. Use when the user says 'the colors look off', 'colors clash', 'add dark mode', 'is this accessible', 'pick a palette', 'too many blues in the codebase', 'make it match our brand', or when contrast failures are found. Extracts the de facto palette from the code first, consolidates drift into ramps, chooses harmony deliberately, and verifies WCAG AA on every shipped pair in both modes.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image