🎬 Setup: Initialize Remotion Project with Agent Skills

[yonatangross]

Overview\nInitialize a Remotion project with agent skills from skills.sh to enable programmatic video creation for all demo videos in this milestone.\n\n## Prerequisites\n- Node.js 18+ or Bun\n- Claude Code with skills.sh integration\n\n## Setup Steps\n\n### Step 1: Create Remotion Project\n\n\nProject Structure Created:\n\n\n### Step 2: Install Remotion Agent Skills\n\n\nSkills Installed (29 Rule Files):\n| Category | Capabilities |\n|----------|-------------|\n| Media Handling | Import images, videos, GIFs, fonts, SVGs |\n| Animation | Interpolation, spring curves, easing, text animate, transitions |\n| Audio Control | Import, trim, volume, speed, pitch, mixing |\n| Advanced | Three.js 3D, Lottie animations, TailwindCSS, data viz, SRT captions |\n\n### Step 3: Prepare Assets Directory\n\n\nRequired Assets:\n| Directory | Content |\n|-----------|---------|\n| | Terminal captures of plugin features in action |\n| | Syntax-highlighted code examples (PNG/SVG) |\n| | OrchestKit logo, plugin icons |\n| | Royalty-free background tracks (10-60s loops) |\n\n### Step 4: Configure Render Settings\nUpdate :\n\n\n## Render Specifications\n| Format | Resolution | FPS | Codec | Use Case |\n|--------|-----------|-----|-------|----------|\n| MP4 (Hero) | 1920x1080 | 60 | H.264 | YouTube, Landing page |\n| MP4 (Social) | 1080x1080 | 30 | H.264 | Twitter, LinkedIn |\n| GIF (README) | 800x450 | 15 | GIF | GitHub README (< 2MB) |\n| WebM (Web) | 1280x720 | 30 | VP9 | Documentation site |\n\n## Audio Guidelines\nRecommended Sources (Royalty-Free):\n- Epidemic Sound (subscription)\n- Artlist (subscription)\n- YouTube Audio Library (free)\n- Pixabay Music (free, CC0)\n\nStyle: Tech/Electronic, upbeat, 100-120 BPM\nVolume: -12dB to -6dB (background, not distracting)\n\n## Validation Checklist\n- [ ] Remotion project initialized\n- [x] Skills installed and verified in \n- [ ] Assets directories created\n- [ ] Test render works: \n- [ ] Sample composition renders successfully\n\n## Blocks\nThis issue blocks all demo video issues (#187, #190-#195).\n\n## References\n- skills.sh - Remotion Best Practices\n- Remotion Agent Skills Docs\n

[yonatangross]

Dependencies

Blocked by: None (this is the starting point)

Blocks:

• 📹 Create demo GIF for README #187 - Hero GIF
• 📹 Demo: Core plugins (ork-core, ork-context, ork-memory) #190 - Core plugins demo
• 📹 Demo: AI/LLM plugins (ork-rag, ork-langgraph, ork-llm) #191 - AI/LLM plugins demo
• 📹 Demo: Backend plugins (ork-fastapi, ork-database, ork-async) #192 - Backend plugins demo
• 📹 Demo: Frontend plugins (ork-react, ork-ui-design, ork-frontend-*) #193 - Frontend plugins demo
• 📹 Demo: Testing, Security, DevOps plugins #194 - DevOps plugins demo
• 📹 Demo: Other plugins (ork-accessibility, ork-mcp, ork-product, ork-workflows) #195 - Other plugins demo

Priority: CRITICAL - Must complete first before any video work can begin.