Modern Short Video Skill Skill

Modern Short Video Skill

Create professional, modern product launch videos using Remotion and React.

Prerequisites (MANDATORY)

WARNING: Do NOT skip this step. Skipping will result in missing rich expression opportunities.

This skill extends Remotion best practices. You MUST do both:

Load the skill first:
```
/remotion-best-practices
```
Read the SKILL.md of remotion-best-practices and identify which rules are relevant to the product (maps, charts, text animations, 3D, lottie, etc.)

Workflow

Step 1: Analyze Product & Select Rich Expressions (CRITICAL)

Before asking for screenshots, analyze the product and find relevant rich expressions from remotion-best-practices.

Replace static screenshots with dynamic content wherever possible:

Map app → animated map with route drawing
Dashboard → animated charts
Text app → typewriter effects
etc.

Read the relevant rule files from remotion-best-practices and use them.

Step 2: Device, Theme & BGM Questions

Use AskUserQuestion to ask:

Device Type: Is the product primarily for smartphone (SP) or PC/Desktop?
- SP (Smartphone) → Use phone mockup frame
- PC/Desktop → Use browser/desktop mockup frame
Screenshot Theme: Should screenshots be in Light mode or Dark mode?
- Dark mode (Recommended) → Blends with video background (#0a0a0a)
- Light mode → Higher contrast, screenshots stand out more
BGM (Background Music): Add background music?
- Yes (Recommended) → Download free music from Pixabay
- No → Create video without BGM

Step 3: Collect Screenshots

Note: Screenshots for scenes using rich expressions (Step 1) are not needed.

Required images (place in public/ folder):

| File | Purpose | Required | |------|---------|----------| | mockup.png | Main product screenshot (Mockups scene) | Yes | | feature-1.png | Feature 1 screenshot | Yes | | feature-2.png | Feature 2 screenshot | Optional | | feature-3.png | Feature 3 screenshot | Optional |

Step 4: Collect Content

Required information:

Product name
One-line tagline/concept
Feature 1: Title + short description
Feature 2: Title + short description (optional)
Feature 3: Title + short description (optional)
CTA text (e.g., "Try it free")
URL

Step 5: Verify Assets

ls public/*.png

Step 6: Create Composition

Create src/remotion/[ProductName]/[ProductName]Intro.tsx with all scenes.

Step 7: Register & Calculate Duration

Add to Root.tsx. IMPORTANT: Calculate durationInFrames correctly:

durationInFrames = Sum of scene durations - (transition duration × number of transitions)

See rules/duration-calculation.md for details.

Step 8: Test

Run pnpm run dev (or bun run remotion) and preview the video.

Scene Structure (8 Scenes)

┌─────────────────────────────────────────────────────────────┐
│  1. REVEAL     2. CONCEPT    3. MOCKUPS                     │
│  (2-3s)        (3-4s)        (3-4s)                         │
│  Logo/Name     Value prop    Product preview                │
├─────────────────────────────────────────────────────────────┤
│  4. FEATURE 1  5. FEATURE 2  6. FEATURE 3                   │
│  (3-4s each)   (optional)    (optional)                     │
│  Screenshot +  Screenshot +  Screenshot +                   │
│  Title/Desc    Title/Desc    Title/Desc                     │
├─────────────────────────────────────────────────────────────┤
│  7. OUTRO      8. CTA                                       │
│  (2-3s)        (3-4s)                                       │
│  Summary       URL + Action                                 │
└─────────────────────────────────────────────────────────────┘

Scene Details

| Scene | Duration | Content | Asset | |-------|----------|---------|-------| | 1. Reveal | 2-3s | Product name, minimal animation | - | | 2. Concept | 3-4s | Tagline, value proposition | - | | 3. Mockups | 3-4s | Device mockup with main screenshot | mockup.png or rich expression | | 4. Feature 1 | 3-4s | Feature title + screenshot | feature-1.png or rich expression | | 5. Feature 2 | 3-4s | Feature title + screenshot | feature-2.png or rich expression | | 6. Feature 3 | 3-4s | Feature title + screenshot | feature-3.png or rich expression | | 7. Outro | 2-3s | Product name + summary | - | | 8. CTA | 3-4s | URL, call to action | - |

Total Duration: 15-25 seconds (depending on feature count)

Design Rules

| Element | Do | Don't | |---------|-----|-------| | Background | Solid dark #0a0a0a | Gradients | | Typography | Single font (Inter/Noto Sans JP) | Multiple fonts | | Animation | Subtle fade/slide | Bouncy/flashy | | Mockups | Real screenshots or rich expressions | Placeholder graphics | | Text | Minimal, clear | Long paragraphs |

Detailed Guidelines

For comprehensive guidance, read these rule files:

rules/design-principles.md - Visual design system
rules/scene-structure.md - Scene composition patterns
rules/visual-elements.md - Mockups, typography, colors
rules/animation-patterns.md - Motion design patterns
rules/code-templates.md - Ready-to-use Remotion components
rules/duration-calculation.md - How to calculate total video duration
rules/bgm.md - Background music source and implementation

Quick Reference: Scene Components

// Scene order
<TransitionSeries>
  <RevealScene />      {/* 1. Logo/Name */}
  <ConceptScene />     {/* 2. Value proposition */}
  <MockupsScene />     {/* 3. Main product mockup */}
  <FeatureScene n={1} /> {/* 4. Feature 1 */}
  <FeatureScene n={2} /> {/* 5. Feature 2 (if provided) */}
  <FeatureScene n={3} /> {/* 6. Feature 3 (if provided) */}
  <OutroScene />       {/* 7. Summary */}
  <CTAScene />         {/* 8. Call to action */}
</TransitionSeries>

Checklist Before Delivery

[ ] Prerequisites loaded (/remotion-best-practices executed and relevant rules read)
[ ] Rich expressions used where applicable (maps, charts, text animations, etc.)
[ ] Screenshots collected for scenes not using rich expressions
[ ] Screenshots are high quality (2x resolution preferred)
[ ] Text is readable at 720p
[ ] Total duration 15-25 seconds
[ ] durationInFrames correctly calculated (subtract transition overlaps!)
[ ] No black frames at the end of video
[ ] Transitions are smooth (fade, 15 frames)
[ ] CTA and URL clearly visible
[ ] BGM added (optional, volume ~0.25)

Agent Skills: Modern Short Video Skill

Install this agent skill to your local

Skill Files