Give Claude a website URL. It reads the site, downloads product images, and writes a 25-second launch video with your logo, brand colors, and real features. The full prompt + skill installation guide.
Remotion is a tool that creates video from React code. Claude knows React well — but without a skill, it doesn't know Remotion. Once the skill is installed, this prompt is enough.
https://your-product-url.com with your URL and paste into Claude.Use the Remotion best practices skill. Create a 25-second product demo and launch video (1080x1920, 30fps) for the product at https://your-product-url.com. SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top and 170px from the bottom. Side margins: 60px minimum. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels 28px minimum. STEP 1 — RESEARCH & ASSET DOWNLOAD: Visit the URL. Extract product name, logo, brand colors, tagline, core user flow, 3 key features, social proof. Download 2-3 product images the site already displays (hero images, UI screenshots, app previews) to public/product-1.png, product-2.png, etc. Show me what you found and a proposed 6-scene outline. Wait for approval before coding. STEP 2 — BUILD 6 SCENES: Scene 1 - Hook (3s): Pain-point question. Text slams in with spring from 2x scale. Dark background with brand-color radial glow. Scene 2 - Product Intro (3s): Logo/name scales in with spring. Tagline slides up. Particle burst with brand accent color. Scene 3 - Simulated Demo (8s): Recreate the core interaction as React components (no device frame — direct on dark background, 960px+ wide). Animated cursor moves to input -> types -> clicks button -> loading spinner -> results animate in. All text 36px+. Scene 4 - Product Image Showcase (5s): Display downloaded product images large (900px+ wide), centered, drop shadow, 16px rounded corners. Crossfade between 2-3 images with feature headline updating above/below each. Scene 5 - Feature Callouts (3s): Product image scales to 40% top. 3 feature lines stagger in from right with spring, icon + text (36px+) each. Scene 6 - Social Proof + CTA (3s): Number counts up from 0. Product URL pulses gently. Fade to black. CURSOR: White circle 12px, 50% opacity trail, smooth bezier paths. Never teleport. FONT: Inter (800 headlines, 400 body) or match site's Google Font. After building, launch Remotion Studio (npx remotion studio) so I can preview in browser.
1. Open Cowork → Settings → Skills 2. Create a new folder: remotion-best-practices/ 3. Inside it, create a file: SKILL.md 4. Put the best-practices instructions inside SKILL.md: - Standard folder structure for a Remotion project - How to build scenes in React (Composition + Sequence) - Using spring(), interpolate(), useCurrentFrame() - Safe Zone for different formats (9:16, 16:9, 1:1) - Minimum font sizes for mobile - Video export with ffmpeg 5. In every Remotion prompt — start with the line: "Use the Remotion best practices skill." 6. Claude will read the skill and follow it — fewer mistakes, more consistency between videos. Tip: you can copy a ready SKILL.md from github.com/anthropic/skills, or ask Claude itself to write a first version following this structure.
Set up once. Then it runs by itself.
Cowork → Settings → Skills. Create a folder remotion-best-practices and inside it SKILL.md as instructed above.
Claude Code or Cowork — new chat. The skill loads automatically.
Replace the URL with your product/site domain. Send. Claude proposes a 6-scene outline before it starts coding.
Approval → Claude downloads images, writes composition.tsx with 6 scenes, launches Remotion Studio in your browser.
Remotion Studio lets you tweak in real time. When you're happy — export MP4 in 9:16 for Reels.
Once a week — a new episode and a prompt or template like this one. No spam, unsubscribe anytime.
Your details are never shared.