AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.
Video Generator (Remotion)
Create professional motion graphics videos programmatically with React and Remotion.
Default Workflow (ALWAYS follow this)
Scrape brand data (if featuring a product) using Firecrawl
Create the project in output/<project-name>/
Build all scenes with proper motion graphics
Install dependencies with npm install
Fix package.json scripts to use npx remotion (not bun):
Send the user the public URL (e.g. https://xxx.trycloudflare.com)
The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.
Rendering (only when user explicitly asks to export):
cd output/<project-name>
npx remotion render CompositionName out/video.mp4
Quick Start
# Scaffold projectcd output && npx --yes create-video@latest my-video --template blank
cd my-video && npm install
# Add motion libraries
npm install lucide-react
# Fix scripts in package.json (replace any "bun" references with "npx remotion")# Start dev server
npm run dev
# Expose publicly
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
Fetching Brand Data with Firecrawl
MANDATORY: When a video mentions or features any product/company, use Firecrawl to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency.
API Key: Set FIRECRAWL_API_KEY in .env (see TOOLS.md).
Usage
bash scripts/firecrawl.sh "https://example.com"
Returns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL.
