matteotitta Onboarding Video
Renders a short, punchy onboarding video that demonstrates one product feature in action. Output is brand-bound MP4 via the Hyperframes engine. Length: 3–8 seconds per beat, stitched into a ~15–30 second video. Style: cropped pieces of the UI animating through the interaction that proves the feature works — never the whole screen.
This is the rendered counterpart to /onboarding-video-script. The script skill writes the talk track for a founder to read aloud over a screen-recorded video; this skill renders the video itself, motion-graphics style, from stills. They compose — script the talk track first, then render the visual layer (optional pairing).
Inherits the rendering engine, brand-kit binding, and DESIGN.md token contract from /product-ui-frames (the generic product-UI animation engine). Adds four craft rules on top: UI-pieces doctrine, caption discipline, cursor discipline, stills-intake gate.
The body holds decision-grade context (when to invoke, validation gate, the four rules summarised). Full craft for each rule lives in the premium reference.
Doctrine inherited (Step 7 — 0626 rollout)
Output complies with:
output-tenets.md— the seven tenetsoutput-simplicity.md— length caps, three-layer source placement, robot-tells bandesign-production.md— DESIGN.md contract for visual output- Step 6 calibration: see [[feedback_execution_doctrine_refinements_step6]]
Refinements applied to this skill:
| Code | Refinement | How it lands in onboarding-video |
|---|---|---|
| R1 | Source placement (three layers) | Rendered MP4 is end-customer-facing. No source frames in the video itself. Brand-kit citations + DESIGN.md tokens live in sidecar metadata for QA only. Captions never carry [VERIFIED:...] overlays. |
| R3 | Product-update tone | Captions frame as "[Product] does X" not "we are thrilled to introduce X." Even on launch-day onboarding videos. The visual demonstrates; the caption labels — neither oversells. |
| R6 | CTA hierarchy | End-card CTA names the product-action tied to the feature being demonstrated — "open [Feature] in the dashboard" — NOT sign-up (viewer already signed up to see onboarding). Per Step 6 warm-base = product-action rule. |
| R9 | Action-oriented section names | Caption beats are verb-led ("Connect / See the runway / Open Reporting") — not status-led ("Setup / Dashboard view / Features"). |
Claude Code triggers
Invoke when user says:
- "Onboarding video"
- "Product feature demo video"
- "App preview / App Store preview"
- "First-run video"
- "Render onboarding clip"
- "Stills-driven onboarding video"
- "Onboarding MP4"
Do NOT invoke when:
- User wants a script for founder to read →
/onboarding-video-script - User wants a generic brand video (no UI, no stills) →
/product-ui-frames - User wants a sales demo →
/demo-script - User wants a YouTube channel video →
/youtube-scripts - User wants in-product UI copy (tooltips, modals) — out of catalog
Input requirements
Required (all must be locked)
| Input | Description | Source |
|---|---|---|
| brand-kit | Locked DESIGN.md tokens (colors, typography, rounded, spacing) | brand-kit skill output (status: locked) |
| positioning | Locked primary anchor + differentiators the video reflects | positioning skill output (status: locked) |
| product-messaging | Locked messaging library — captions pull from value props | product-messaging skill output (status: locked) |
| stills | 2–4 screenshots per onboarding screen, with state label + intent statement per screen | User-uploaded, formatted per the premium reference |
Recommended (improve quality)
| Input | How it helps |
|---|---|
icp-behavioural |
Persona-specific framing of which feature to lead with |
tov-guidelines |
Caption tone — same rules as locked product-messaging but more granular |
onboarding-video-script |
If the script already exists, captions can pull headline phrasing directly |
Validation gate — refuse to run if missing
- All four required inputs present and
status: locked(not draft / review) - At least one onboarding screen with 2–4 stills + state labels + intent statement
- Target duration chosen (15s / 30s / 60s)
- Aspect ratio chosen (1080×1920 portrait default; 1920×1080 landscape and 1080×1080 square allowed)
If any required input is missing or unlocked, ask before generating. Do not invent UI from descriptions — that's the failure this skill exists to prevent.
The four craft rules (decision-grade)
Each rule has a dedicated reference file with quantitative thresholds, anti-patterns, and Hyperframes/GSAP code patterns. The summaries below are decision-grade — enough to know when a rule is violated, not enough to implement from scratch.
Rule 1 — UI pieces, not whole screens
Each beat shows a piece of the feature in action: a button being tapped, a toggle flipping, a row reordering, a chart filling. Crop, mask, or extract the focal component from the supplied still and place it on a tinted brand-bound background. The rest of the UI is omitted, blurred, or implied.
Quantitative: focal element occupies ≥60% of canvas. Chrome blurred or tinted (never full opacity). One feature per beat.
Full craft → the premium reference
Rule 2 — Caption discipline
Captions anchor to a fixed top band (200–240px reserve), rise from below (60px offset, Easing.bezier(0.16, 1, 0.3, 1)), ~54px @ 1080w default, weight 700. Persist across cuts when text is identical. Never below the focal UI; never drift between beats.
Full craft → the premium reference
Rule 3 — Cursor discipline
Cursor leads every tap. Fades in at focal area center, moves in one straight segment to the target (any direction, including diagonal), then triggers the tap ripple. Persists across multiple taps on the same UI; resets (fade out + fresh fade-in) only on new UI. Forbidden: off-frame entry, multi-segment paths, curves, fade-out between same-UI taps.
Three primitives by function: Pointer (persistent dot, leads eye), TapDot (ripple at tap moment), GlowRing (illustrative-only, no tap implied). Code patterns parallel the source's Remotion components but built in Hyperframes/GSAP.
Full craft → the premium reference
Rule 4 — Stills-intake gate
2–4 stills per onboarding screen, with state labels (resting / mid-interaction / result) and a one-sentence intent statement per screen. Refuse to run without them. This is the anti-hallucination gate — the model does not invent UI from descriptions.
Full craft → the premium reference
Brand binding (required, not optional)
DESIGN.md tokens flow into the rendered output via the brand-kit-mapper inherited from /product-ui-frames. Per design-production.md, this skill follows the canonical token-citation discipline: no hardcoded hex codes, font names, or radii in composition code. Captions, focal-area backgrounds, cursor colors, and overlay surfaces all reference DESIGN.md tokens.
Specific mappings → the premium reference.
Process at a glance
| Phase | Purpose | Output |
|---|---|---|
| 1. Intake | Gather brand-kit + positioning + messaging + stills with intent statements | Validation pass / fail |
| 2. Plan beats | One beat per onboarding screen; identify the focal UI piece for each | Beat list (3–5 typical) |
| 3. Compose | Build HTML composition per beat with Hyperframes blocks + craft rules | index.html + sidecar metadata |
| 4. Render + iterate | npx hyperframes render → preview → adjust timing/easing |
MP4 + revision loop |
Full runbook → the premium reference.
Anti-hallucination guardrails
- Don't invent UI from descriptions. If a screen wasn't uploaded as a still, it doesn't go in the video. Mark missing screens as
[STILL MISSING — request from user]. - Don't invent features. Only animate interactions the stills support (resting → mid → result).
- Don't invent metrics. Captions pulled from locked product-messaging only; no "saves you N hours" claims unless that's a locked messaging value.
- Don't fake brand colors. All chrome/caption/cursor colors must trace to DESIGN.md tokens; no approximation from prose.
- Don't skip the cursor on tap beats. Every tap, click, or selection requires a
Pointerthat visibly travels to the target. No teleporting.
Integration with other skills
| Skill | Relationship | Usage |
|---|---|---|
| brand-kit | Required upstream | DESIGN.md tokens for all visual binding |
| positioning | Required upstream | Primary anchor that captions reflect |
| product-messaging | Required upstream | Locked value props that captions pull from |
| onboarding-video-script | Sibling (script ↔ render pair) | Optional pairing: script first, render visual layer second |
| product-ui-frames | Parent (generic engine) | Inherits engine, brand-kit-mapper, output template |
| icp-behavioural | Recommended upstream | Persona-specific feature selection |
| tov-guidelines | Recommended upstream | Caption tone granularity |
| lifecycle / email-nurture | Downstream | Onboarding video embeds in onboarding email sequences |
| linkedin-weekly-content | Downstream | Short cut variant for LinkedIn distribution |
| demo-script | Sibling | Different audience (sales) and goal (close vs. activate) |
MCP data integration
Level: 2 — Execution
| Source | What to pull | Tool | When |
|---|---|---|---|
| Product URL (web) | Page content for caption sourcing if messaging is thin | mcp__plugin_exa_exa__web_fetch_exa per .claude/rules/exa-protocol.md |
Only when locked messaging lacks specifics for a beat |
| Product URL (clean extract) | Rich page extract for dense feature tables | mcp__firecrawl__firecrawl_scrape |
Fallback if Exa returns thin |
| Stills | User-uploaded screenshots | Direct file input | Always required |
Fallback (no MCP): Stills-only mode — all captions sourced from locked product-messaging, no web supplementation.
Design cycle (post-authoring phases)
Per .claude/rules/design-production.md, run these phases before final delivery:
- Layout — focal-element placement validated per `design-reviewer/the premium reference
- Distill — caption text passes voice review (no banned buzzwords)
- Typeset — typography tokens from brand-kit applied, no hardcoded font families
- Polish — easing curves match canonical UI ease-out, no bounce on routine state transitions
- Harden — passes
/design-reviewerfor final ship-ready gate - Cognitive load — ≤7±2 visible elements per beat
- Final review — run
/design-revieweras universal review hook for visual output
Attribution
This skill was developed via /steal analysis of bidah/skill-set/create-onboarding-video (May 2026). The source repo has no LICENSE — cite-only attribution. The four craft rules (UI-pieces, caption, cursor, stills-intake) are adapted from the source's operating-rules section, rebuilt in our conventions (Hyperframes/GSAP engine, DESIGN.md token binding, B2B SaaS framing). See .claude/discovery/0526-bidah-create-onboarding-video-steal-analysis.md for the full analysis.
Final ship gate
Run /premortem --output before ship. See /premortem skill for the 5 execution domains (will-it-resonate / will-it-convert / will-it-stay-on-brand / will-stakeholder-push-back / will-it-degrade-over-time) and output template.
Trivial-case escape: ## Premortem\nNo failure modes — trivial change satisfies the contract for genuinely trivial outputs.