elevenlabs-remotion-skill: Instructions file for Claude Code

ElevenLabs Voiceover Generation

Generate professional AI voiceovers for Remotion videos using ElevenLabs API.

Prerequisites

• ELEVENLABS_API_KEY in .env.local

Design System Integration

This skill automatically applies design rules when creating Remotion video compositions. The design system controls colors, typography, animations, and component styles.

Design File Priority

When creating videos, Claude will look for design rules in this order:

1. Project-specific design file: design.md or design-system.md in project root
2. Skill default: .claude/skills/remotion-elevenlabs-voiceover/design-system.md
3. Auto-extraction: Extract from existing codebase (see below)

Before Creating Videos

IMPORTANT: Before generating any Remotion video composition, Claude MUST:

1. Check for design file:

   # Look for design files in project
   ls design.md design-system.md 2>/dev/null || echo "No design file found"
   

2. If no design file exists, extract from project:

   • Read app/globals.css or styles/globals.css for CSS variables
   • Read tailwind.config.js or tailwind.config.ts for theme colors
   • Check existing Remotion components in remotion/ for established patterns
   • Look for brand assets in public/ (logo, fonts)

3. If no project context, check website:

   • If user provides a website URL, fetch and extract:
     • Color palette from CSS/computed styles
     • Typography (font families, sizes)
     • Logo and brand elements
   • Create a design.md based on extracted values

Design Extraction Workflow

When no design file exists:

1. Glob for: globals.css, tailwind.config.*, design.md
2. Read found files to extract:
   - CSS custom properties (--primary, --background, etc.)
   - Tailwind theme extensions (colors, fonts)
   - Existing component patterns
3. Check remotion/ folder for existing video components
4. If user mentions a website:
   - WebFetch the URL
   - Extract visible design tokens
5. Synthesize into consistent design system
6. Optionally create design.md for future use