Generates product demo videos and release walkthroughs via Remotion. Use when creating video documentation or animated demos.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
A collection of skills responsible for automatically generating product explanation videos.
This skill is used internally by the /generate-video command.
It executes the flow of codebase analysis → scenario proposal → parallel generation.
| Feature | Details |
|---|---|
| Best Practices | See references/best-practices.md |
| Codebase Analysis | See references/analyzer.md |
| Scenario Planning | See references/planner.md |
| Parallel Scene Generation | See references/generator.md |
| Visual Effects Library | See references/visual-effects.md |
| AI Image Generation | See references/image-generator.md |
| Image Quality Assessment | See references/image-quality-check.md |
/remotion-setup)GOOGLE_AI_API_KEY - for AI image generation/generate-video Flow/generate-video
│
├─[Step 1] Analysis (analyzer.md)
│ ├─ Framework detection
│ ├─ Key feature detection
│ ├─ UI component detection
│ └─ Project asset analysis (Plans.md, CHANGELOG, etc.)
│
├─[Step 2] Scenario Proposal (planner.md)
│ ├─ Auto-determine video type
│ ├─ Scene composition proposal
│ └─ User confirmation
│
├─[Step 2.5] Asset Generation (image-generator.md) ← NEW
│ ├─ Determine if assets are needed (intro, CTA, etc.)
│ ├─ Generate 2 images with Nano Banana Pro
│ ├─ Claude assesses quality (image-quality-check.md)
│ └─ OK → adopt / NG → regenerate (up to 3 times)
│
└─[Step 3] Parallel Generation (generator.md)
├─ Parallel scene generation (Task tool)
├─ Integration + transitions
└─ Final rendering
/generate-videoanalyzer.mdplanner.md + user confirmationgenerator.md| Type | Funnel Stage | Approx. Length | Auto-detection Criteria | Core Structure |
|---|---|---|---|---|
| LP/Ad Teaser | Awareness → Interest | 30-90s | New project | Pain → Result → CTA |
| Intro Demo | Interest → Consideration | 2-3 min | UI changes detected | Complete 1 use case |
| Release Notes | Consideration → Conviction | 1-3 min | CHANGELOG updated | Before/After focused |
| Architecture Overview | Conviction → Decision | 5-30 min | Major structural changes | Production use + evidence |
| Onboarding | Retention & Adoption | 30s - several min | First-time setup | Shortest path to Aha moment |
Details: references/best-practices.md
| Time | Scene | Content |
|---|---|---|
| 0-5s | Hook | Pain or desired outcome |
| 5-15s | Problem+Promise | Target user and promise |
| 15-55s | Workflow | Signature workflow |
| 55-70s | Differentiator | Basis for differentiation |
| 70-90s | CTA | Next step |
| Time | Scene | Content |
|---|---|---|
| 0-10s | Hook | Conclusion + pain |
| 10-30s | UseCase | Use case declaration |
| 30-140s | Demo | Full walkthrough on actual screens |
| 140-170s | Objection | Address one common concern |
| 170-180s | CTA | Call to action |
| Scene | Recommended Duration | Content |
|---|---|---|
| Intro | 3-5s | Logo + tagline |
| Feature Demo | 10-30s | Playwright capture |
| Architecture Diagram | 10-20s | Mermaid → animation |
| CTA | 3-5s | URL + contact |
Detailed templates: ${CLAUDE_SKILL_DIR}/references/best-practices.md
Strictly follow these rules for narrated videos:
| Rule | Value |
|---|---|
| Audio start | Scene start + 30f (1-second wait) |
| Scene length | 30f + audio length + 20f padding |
| Transition | 15f (overlap with adjacent scenes) |
| Scene start calculation | Previous scene start + previous scene length - 15f |
Pre-check: Verify audio length with ffprobe before designing scenes
| Item | Recommended Value |
|---|---|
| With narration | bgmVolume: 0.20 - 0.30 |
| Without narration | bgmVolume: 0.50 - 0.80 |
| File location | public/BGM/ |
| Rule | Value |
|---|---|
| Subtitle start | Same as audio start |
| Subtitle duration | Audio length + 10f |
| Font | Base64 embedding recommended |
A collection of effects for impactful videos:
| Effect | Use Case |
|---|---|
| GlitchText | Hook, titles |
| Particles | Background, CTA convergence |
| ScanLine | Analysis in-progress effect |
| ProgressBar | Parallel processing display |
| 3D Parallax | Card display |
Details: references/visual-effects.md
/remotion-setupout/ directoryout/assets/generated/GOOGLE_AI_API_KEY is not set, image generation is skipped (existing assets or placeholders are used)No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use when generating, vectorizing, or converting images to SVG — logos, icons, illustrations, or 'allow1'/'quiver' references.
The English summary is being prepared. Showing the original description.
Use when running the full team/breezing flow end-to-end — all tasks with parallel workers. Do NOT load for: single-task implementation, planning, review, release, or setup.
The English summary is being prepared. Showing the original description.
Reviews PRs that modify the Feature Table in CLAUDE.md. Use when a PR adds CC version rows or modifies docs/CLAUDE-feature-table.md.
The English summary is being prepared. Showing the original description.
Use when researching Claude Code or Codex upstream releases, selecting adaptations, or preparing Harness upgrades. Local-only; not for distribution.
The English summary is being prepared. Showing the original description.
Creates a single project slide or one-page visual summary for a repo. Use when generating a project intro image or promotional slide.
The English summary is being prepared. Showing the original description.
Operates Google Drive, Docs, Sheets, and Slides via gogcli. Use when listing, searching, reading, or updating Google Workspace files.
The English summary is being prepared. Showing the original description.