CleanExpo/remotion-audio-sync
.claude/skills/remotion-audio-sync/SKILL.md
Generates ElevenLabs narration audio for CCW Remotion videos and syncs it with scene animations. Covers script writing, audio generation, Remotion Audio component integration, and timing alignment between voice and visuals.
$ install --global
skillsauthnpx skillsauth add CleanExpo/CCW-CRM remotion-audio-syncInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 12:51 PM232.2s1 file scanned
SKILL.md
- name:
- remotion-audio-sync
- description:
- >
CCW Intro Video Audio Scripts
Voice: Rachel (ID: 21m00Tcm4TlvDq8ikWAM) — default ElevenLabs voice Pacing: ~140 words/minute at natural speaking pace Style: Warm, direct, Australian business context. No corporate speak.
Narration files (stored in video/remotion/public/audio/):
| File | Video | Duration | Words | | ------------------------- | --------------------- | -------- | ---------- | | firstlook-narration.mp3 | FirstLookVideo | ~180s | ~420 words | | connections-narration.mp3 | ConnectionsGuideVideo | ~300s | ~700 words |
Audio Generation Steps
# Set your API key
export ELEVENLABS_API_KEY=your_key_here
# Generate audio for specific video
cd "C:\Users\PhillMcGurk\CCW COWORK\CCW-CRM"
node scripts/generate-intro-audio.js firstlook # FirstLookVideo only
node scripts/generate-intro-audio.js connections # ConnectionsGuideVideo only
node scripts/generate-intro-audio.js all # Both
# OR use npm scripts from remotion dir
cd video/remotion
npm run generate:audio:all
Remotion Audio Integration Pattern
import { Audio, staticFile } from 'remotion';
// In your composition component:
{
narrationPath && <Audio src={staticFile(narrationPath)} />;
}
staticFile()resolves paths relative tovideo/remotion/public/- Audio file must be in
video/remotion/public/audio/folder - Audio plays from frame 0 automatically
- No additional sync needed — audio and visuals both start at frame 0
Scene Timing Alignment
Match scene durations to narration segments:
| FirstLookVideo Scene | Start | Duration | Words | | -------------------- | ----- | -------- | ---------- | | HeroScene | 0s | 30s | ~70 words | | ProblemScene | 30s | 30s | ~70 words | | ModuleShowcaseScene | 60s | 45s | ~105 words | | WorkflowScene | 105s | 30s | ~70 words | | WhoItsForScene | 135s | 20s | ~47 words | | GetStartedScene | 155s | 25s | ~58 words |
| ConnectionsGuideVideo Scene | Start | Duration | Words | | --------------------------- | ----- | -------- | ---------- | | ConnectionsIntroScene | 0s | 20s | ~47 words | | Cin7 Step | 20s | 50s | ~117 words | | Xero Step | 70s | 50s | ~117 words | | Supabase Step | 120s | 50s | ~117 words | | Vercel+Railway Step | 170s | 60s | ~140 words | | VerificationScene | 230s | 40s | ~93 words | | AllConnectedScene | 270s | 30s | ~70 words |
If Audio and Visuals Fall Out of Sync
- Check word count of the narration segment vs scene duration
- Adjust scene
durationInFramesto match (duration_seconds x 30 = frames) - Re-render:
npm run render:firstlook - Preview in Studio:
npm start— scrub timeline to check alignment
Adding Audio to a New Video
- Write narration script (target: duration_seconds x 2.33 words)
- Add script constant to
scripts/generate-intro-audio.js - Add
generate:audio:[name]npm script - Add
<Audio src={staticFile(narrationPath)} />to composition - Add
narrationPathto composition defaultProps in Root.tsx - Run:
node scripts/generate-intro-audio.js [name]
.gitignore Note
MP3 files are gitignored (binary, too large). They must be regenerated on each machine:
video/remotion/public/audio/*.mp3
Add this line to the root .gitignore if not present.
Related Skills
CleanExpo/youtube-uploader
content-media
VerifiedTrustedCommunity
Autonomously uploads CCW HeyGen demo videos to YouTube as Unlisted, collects video IDs, and patches DemoVideoBanner.tsx + video-registry.json. One-time OAuth setup required. Handles resume, retries, and ID propagation.
1SKILL.mdUpdated Apr 16, 2026
CleanExpo/unfreeze
data-ai
VerifiedTrustedCommunity
Clear the freeze boundary set by /freeze, allowing edits to all directories again. Use when you want to widen edit scope without ending the session. Use when asked to "unfreeze", "unlock edits", "remove freeze", or "allow all edits". (gstack)
1SKILL.mdUpdated Apr 16, 2026
CleanExpo/.claude/skills/spec-interview
tools
VerifiedTrustedCommunity
# Spec Interview Skill **Name:** spec-interview **Triggers:** `/spec-interview`, when requirements unclear **Version:** 1.0.0 --- ## Purpose Interviews user to gather complete requirements before planning. --- ## Interview Questions When requirements are unclear, ask: ### 1. Feature Clarity **Question:** "What is this feature supposed to do?" **Why:** Need clear objective ### 2. User Impact **Question:** "Who will use this and why?" **Why:** Understand user needs ### 3. Success Criteri
1SKILL.mdUpdated Apr 16, 2026
CleanExpo/ship
development
VerifiedTrustedCommunity
Ship workflow: detect + merge base branch, run tests, review diff, bump VERSION, update CHANGELOG, commit, push, create PR. Use when asked to "ship", "deploy", "push to main", "create a PR", "merge and push", or "get it deployed". Proactively invoke this skill (do NOT push/PR directly) when the user says code is ready, asks about deploying, wants to push code up, or asks to create a PR. (gstack)
1SKILL.mdUpdated Apr 16, 2026