Demo Video
Plan polished 1920×1080 demo video scenes with consistent dark-mode visuals, motion timing, and edge-tts voice choices for launches and onboarding.
Overview
demo-video is an agent skill most often used in Launch (also Validate, Grow) that defines scene design, motion, typography, and voice guidance for product demo videos.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill demo-videoWhat is this skill?
- Documented color language table: trust, premium, success, problem, energy, and fixed dark background #0d0e12
- Animation timing rules: 0.5–0.8s entrances, 0.2–0.4s gaps, 0.3–0.5s crossfades, 1.0–2.0s post-animation hold
- 1920×1080 HTML scene layout: title top 15%, hero 65%, footer 20% with Inter typography scale
- edge-tts voice map (andrew, jenny, davis, emma) matched to demo tone
- Mandated cubic-bezier(0.16, 1, 0.3, 1) easing—no ease or linear defaults
- 1920×1080 scene layout with title 15%, hero 65%, footer 20%
- 4 edge-tts voice personas documented (andrew, jenny, davis, emma)
- Element entrance timing range 0.5–0.8s with specified cubic-bezier easing
Adoption & trust: 528 installs on skills.sh; 17.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a credible launch demo but lack a shared visual and pacing system, so drafts look inconsistent and off-brand.
Who is it for?
Indie SaaS founders shipping a narrated walkthrough for distribution pages or social launch week.
Skip if: Teams needing full non-linear video editing, live-action production, or brand systems unrelated to screen-based demos.
When should I use this skill?
You are planning a narrated product demo and need consistent scenes, motion, and voice direction before generating assets.
What do I get? / Deliverables
You produce scene-ready specs—colors, timing, layout, and voice—that an agent or renderer can turn into a cohesive dark-mode demo reel.
- Scene color and typography spec
- Timed storyboard with voice selection
- HTML scene scaffold at 1920×1080
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Demo videos primarily support getting the product in front of users, so Launch → distribution is canonical; the same system helps Validate prototypes and Grow lifecycle content. Scene specs are distribution assets—trailers, landing embeds, and social clips—not in-app UI implementation.
Where it fits
Apply problem/success color tokens when cutting a before-after clip for Product Hunt.
Draft a 30-second hero scene layout to test messaging on a pricing landing page.
Reuse pacing guide limits so onboarding module videos stay under duration caps.
How it compares
A design template for scripted product demos—not a stock footage library or CapCut-style general editor skill.
Common Questions / FAQ
Who is demo-video for?
Solo builders and marketers using coding agents to storyboard and style short product demonstration videos.
When should I use demo-video?
In Launch for distribution clips, in Validate when prototyping a narrative for a landing page video, and in Grow when refreshing onboarding or lifecycle explainers.
Is demo-video safe to install?
It is reference and styling guidance without bundled executors; review the Security Audits panel on this page if the repo adds scripts later.
SKILL.md
READMESKILL.md - Demo Video
# Scene Design System Reference material for demo video scene design — colors, typography, animation timing, voice options, and pacing. ## Color Language | Color | Meaning | Use for | |-------|---------|---------| | `#c5d5ff` | Trust | Titles, logo | | `#7c6af5` | Premium | Subtitles, badges | | `#4ade80` | Success | "After" states | | `#f28b82` | Problem | "Before" states | | `#fbbf24` | Energy | Callouts | | `#0d0e12` | Background | Always dark mode | ## Animation Timing ``` Element entrance: 0.5-0.8s (cubic-bezier(0.16, 1, 0.3, 1)) Between elements: 0.2-0.4s gap Scene transition: 0.3-0.5s crossfade Hold after last anim: 1.0-2.0s ``` ## Typography ``` Title: 48-72px, weight 800 Subtitle: 24-32px, weight 400, muted Bullets: 18-22px, weight 600, pill background Font: Inter (Google Fonts) ``` ## HTML Scene Layout (1920x1080) ```html <body> <h1 class="title">...</h1> <!-- Top 15% --> <div class="hero">...</div> <!-- Middle 65% --> <div class="footer">...</div> <!-- Bottom 20% --> </body> ``` Background: dark with subtle purple-blue glow gradients. Screenshots: always `border-radius: 12px` with `box-shadow`. Easing: always `cubic-bezier(0.16, 1, 0.3, 1)` — never `ease` or `linear`. ## Voice Options (edge-tts) | Voice | Best for | |-------|----------| | `andrew` | Product demos, launches | | `jenny` | Tutorials, onboarding | | `davis` | Enterprise, security | | `emma` | Consumer products | ## Pacing Guide | Duration | Max words | Fill | |----------|-----------|------| | 3-4s | 8-12 | ~70% | | 5-6s | 15-22 | ~75% | | 7-8s | 22-30 | ~80% | --- name: "demo-video" description: "Use when the user asks to create a demo video, product walkthrough, feature showcase, animated presentation, marketing video, or GIF from screenshots or scene descriptions. Orchestrates playwright, ffmpeg, and edge-tts MCPs to produce polished video content." --- # Demo Video You are a video producer. Not a slideshow maker. Every frame has a job. Every second earns the next. ## Overview Create polished demo videos by orchestrating browser rendering, text-to-speech, and video compositing. Think like a video producer — story arc, pacing, emotion, visual hierarchy. Turns screenshots and scene descriptions into shareable product demos. ## When to Use This Skill - User asks to create a demo video, product walkthrough, or feature showcase - User wants an animated presentation, marketing video, or product teaser - User wants to turn screenshots or UI captures into a polished video or GIF - User says "make a video", "create a demo", "record a demo", "promo video" ## Core Workflow ### 1. Choose a rendering mode Before starting, verify available tools: - **playwright MCP available?** — needed for automated screenshots. Fallback: ask user to screenshot the HTML files manually. - **edge-tts available?** — needed for narration audio. Fallback: output narration text files for user to record or use any TTS tool. - **ffmpeg available?** — needed for compositing. Fallback: output individual scene images + audio files with manual ffmpeg commands the user can run. If none are available, produce HTML scene files + `scenes.json` manifest + narration scripts. The user can composite manually or use any video editor. | Mode | How | When | |------|-----|------| | **MCP Orchestration** | HTML → playwright screenshots → edge-tts audio → ffmpeg composite | Use when playwright + edge-tts + ffmpeg MCPs are all connected | | **Manual** | Write HTML scene files, provide ffmpeg commands for user to run | Use when MCPs are not available | ### 2. Pick a story structure **The Classic Demo (30-60s):** Hook (3s) -> Problem (5s) -> Magic Moment (5s) -> Proof (15s) -> Social Proof (4s) -> Invite (4s) **The Problem-Solution (20-40s):** Before (6s) -> After (6s) -> How (10s) -> CTA (4s) **The 15-Second Teaser:** Hook (2s) -> Demo (8s) -> Logo (3s) -> Tagline (2s) ### 3. Design scenes **If no screenshots are provided:** - For C