Launch / Walkthrough Video
A repeatable pipeline for turning a product, feature, or page into a short motion video with narration, then publishing it to YouTube, embedding it on the page, and announcing it. It exists because doing this by hand means rediscovering a dozen non-obvious details every time (OAuth quirks, voice-over sync math, the click-to-play embed, loudness targets).
Default output: a 1080p / 30fps video, ~45–60s, with an emotive voice-over, uploaded unlisted first for the user to approve, then flipped public. Never publish a video publicly without the user hearing/seeing it — voices and pacing are subjective.
Configure this for your project
Before first use, fill in config.md (a few IDs and paths). The skill reads those instead of
hardcoded values, so it works for any product. The values you need:
- Your YouTube channel (the OAuth account must have it selected)
- Your OAuth client secret path and GCP project number (YouTube Data API v3 enabled)
- Where finished-video announcements go (Slack channel, Discord, etc.)
- Your brand colors and the product URL pattern
When to use it
Building any video for a page/feature/tool, adding a voice-over, or shipping a video to YouTube. For a broad "add videos to our best pages" request, pull the top pages first (from your analytics), then run this pipeline once per page — pilot one, get approval on the format, then batch the rest.
The pipeline (7 steps)
Work top to bottom. Each step has detail in the referenced file or script.
-
Understand the subject. Read the implementation / docs so the steps shown match real behavior. For a tool walkthrough, drive the live tool (Playwright) to see the actual input→output flow — that IS the walkthrough.
-
Capture real screenshots. Playwright against production, 1920×1080. Hide any promo banners / cookie bars first. See
references/video-production.md→ "Capturing screenshots". -
Build the Remotion video. Copy the
remotion-scaffold/structure. Scenes are frame-counted at 30fps insrc/theme.ts. Size each scene to its narration length (step 4). Full scene/animation patterns inreferences/video-production.md. -
Generate the voice-over.
scripts/tts_voiceover.py— OpenAIgpt-4o-mini-tts, voiceash, with aninstructionsprompt for emotion (without it the read is flat and robotic — this is the single most important VO detail). It generates per-scene clips, syncs them to each scene's start frame, and loudness-normalizes the mixed track. Re-time scenes intheme.tsif a clip overflows its scene, then re-render. -
Render + mux + encode.
npx remotion render, mux the VO track on with ffmpeg (-c:v copy), then encode a< 10 MBupload cut (libx264 -crf 25 -movflags +faststart). Commands inreferences/video-production.md→ "Render, mux, encode". -
Publish to YouTube.
scripts/youtube.py(wrapsyoutubeuploaderfor the upload, uses the Data API for everything else). Upload unlisted, get the user's OK, then set public. Readreferences/youtube-publishing.mdfirst — it has the auth setup, the OAuth redirect gotcha, the API-not-enabled failure, quota limits, and the metadata template. -
Embed + announce. Add a click-to-play facade section to the page (poster + play button; the YouTube iframe only mounts on click — keeps it off initial load). Then post the link to your team channel. Both patterns in
references/embed-and-announce.md.
Guardrails
- Unlisted → approve → public, every time. Uploading to the user's own channel needs their sign-off.
- The Google OAuth consent is the user's to give — you cannot click "Allow" for them. If auth
isn't set up, walk them through it (see
references/youtube-publishing.md), don't try to bypass it. - Keep the master render; only the upload cut is size-constrained.
- YouTube API quota ≈ 6 uploads / 24h. A batch bigger than that must be spread across days — say so instead of silently failing partway.
- CLI can't set a thumbnail — flag that the user should add one in Studio (or set via API separately).