remotion-spec-translator
installsforks
How to install remotion-spec-translator?
ncklrs/startup-os-skills/remotion-spec-translator
$npx -y skills add ncklrs/startup-os-skills --skill remotion-spec-translatorOrchestrates translation of motion designer video specifications into working Remotion code by coordinating specialized agents. Acts as pipeline coordinator that delegates to remotion-scaffold, remotion-animation, remotion-composition, and remotion-component-gen. Use when you hav
SKILL.md
| 1 | # Remotion Spec Translator |
| 2 | |
| 3 | Orchestrates the complete translation pipeline from motion design specifications to working Remotion code. This skill acts as a coordinator that delegates work to specialized skills for each aspect of the translation. |
| 4 | |
| 5 | ## What This Skill Does |
| 6 | |
| 7 | Orchestrates the translation by: |
| 8 | |
| 9 | 1. **Coordinating pipeline** — Calls specialized skills in correct order |
| 10 | 2. **Parsing specs** — Extracts requirements for each skill |
| 11 | 3. **Managing handoffs** — Ensures output from one skill feeds into next |
| 12 | 4. **Validating completeness** — Confirms all scenes implemented |
| 13 | 5. **Documenting workflow** — Tracks pipeline progress |
| 14 | |
| 15 | ## Scope Boundaries |
| 16 | |
| 17 | **IN SCOPE:** |
| 18 | - Pipeline orchestration and coordination |
| 19 | - Spec parsing and requirement extraction |
| 20 | - Skill delegation and sequencing |
| 21 | - Progress tracking and validation |
| 22 | - Workflow documentation |
| 23 | |
| 24 | **OUT OF SCOPE:** |
| 25 | - Direct code generation (delegated to specialist skills) |
| 26 | - Implementation details (handled by component/animation skills) |
| 27 | - Manual file creation (handled by scaffold skill) |
| 28 | |
| 29 | ## Input/Output Formats |
| 30 | |
| 31 | ### Input Format: VIDEO_SPEC.md |
| 32 | |
| 33 | Expects complete motion design specification (from `/motion-designer`): |
| 34 | |
| 35 | ```markdown |
| 36 | # Video Title: ProductDemo |
| 37 | |
| 38 | ## Overview |
| 39 | - Duration: 30 seconds |
| 40 | - Frame Rate: 30 fps |
| 41 | - Aspect Ratio: 16:9 (1920x1080) |
| 42 | - Total Scenes: 4 |
| 43 | |
| 44 | ## Color Palette |
| 45 | Primary: #FF6B35 - Ember Orange |
| 46 | Secondary: #4ECDC4 - Teal |
| 47 | Background: #0A0A0A - Black |
| 48 | Text: #FFFFFF - White |
| 49 | |
| 50 | ## Scene 1: Intro (0s - 5s) |
| 51 | Visual Description: Centered logo with smooth entrance |
| 52 | Animation Details: |
| 53 | - Logo: Scale 0.8 → 1.0, Spring (damping: 200) |
| 54 | - Subtitle: Fade in with upward slide |
| 55 | |
| 56 | ## Scene 2: Features (5s - 15s) |
| 57 | Visual Description: Three feature cards stagger in |
| 58 | Animation Details: |
| 59 | - Cards: Stagger delay 10 frames, slide from left |
| 60 | |
| 61 | ## Scene 3: Demo (15s - 25s) |
| 62 | Visual Description: Product screenshot with highlights |
| 63 | Animation Details: |
| 64 | - Screenshot: Fade in, scale 0.95 → 1.0 |
| 65 | - Highlights: Sequential pulse effect |
| 66 | |
| 67 | ## Scene 4: CTA (25s - 30s) |
| 68 | Visual Description: Call-to-action with button |
| 69 | Animation Details: |
| 70 | - Text: Fade in |
| 71 | - Button: Scale bounce effect |
| 72 | |
| 73 | ## Assets |
| 74 | - Logo: public/images/logo.svg (400x400) |
| 75 | - Product screenshot: public/images/product.png (1200x800) |
| 76 | ``` |
| 77 | |
| 78 | ### Output Format: TRANSLATION_COMPLETE.md |
| 79 | |
| 80 | Generates orchestration summary document: |
| 81 | |
| 82 | ```markdown |
| 83 | # Translation Complete: ProductDemo |
| 84 | |
| 85 | ## Status |
| 86 | ✅ Pipeline execution complete |
| 87 | ✅ All scenes implemented |
| 88 | ⏳ Ready for render |
| 89 | |
| 90 | ## Pipeline Execution Summary |
| 91 | |
| 92 | ### Step 1: Scaffold Generation (/remotion-scaffold) |
| 93 | ✅ Complete |
| 94 | - Created: Project structure |
| 95 | - Output: SCAFFOLD_MANIFEST.md |
| 96 | - Files: index.tsx, constants.ts, types.ts, 4 scene templates |
| 97 | |
| 98 | ### Step 2: Animation Configuration (/remotion-animation) |
| 99 | ✅ Complete |
| 100 | - Created: Animation parameters |
| 101 | - Output: ANIMATION_CONFIG.md |
| 102 | - Configs: Spring settings, interpolations, timing |
| 103 | |
| 104 | ### Step 3: Composition Structure (/remotion-composition) |
| 105 | ✅ Complete |
| 106 | - Created: Sequence layout |
| 107 | - Output: COMPOSITION_STRUCTURE.md |
| 108 | - Timing: All scene durations calculated |
| 109 | |
| 110 | ### Step 4: Scene Implementation (/remotion-component-gen) |
| 111 | ✅ Complete - 4/4 scenes |
| 112 | - Scene 1 (Intro): SCENE_COMPONENT.md → Scene1Intro.tsx |
| 113 | - Scene 2 (Features): SCENE_COMPONENT.md → Scene2Features.tsx |
| 114 | - Scene 3 (Demo): SCENE_COMPONENT.md → Scene3Demo.tsx |
| 115 | - Scene 4 (CTA): SCENE_COMPONENT.md → Scene4CTA.tsx |
| 116 | |
| 117 | ### Step 5: Render Configuration (/remotion-render-config) |
| 118 | ✅ Complete |
| 119 | - Created: Render settings |
| 120 | - Output: RENDER_CONFIG.md |
| 121 | - Target: YouTube (H.264, CRF 18) |
| 122 | |
| 123 | ## Generated Files |
| 124 | |
| 125 | ``` |
| 126 | src/remotion/compositions/ProductDemo/ |
| 127 | ├── index.tsx # ✅ Composition with all scenes |
| 128 | ├── constants.ts # ✅ Colors, springs, timing |
| 129 | ├── types.ts # ✅ TypeScript interfaces |
| 130 | └── scenes/ |
| 131 | ├── Scene1Intro.tsx # ✅ Implemented |
| 132 | ├── Scene2Features.tsx # ✅ Implemented |
| 133 | ├── Scene3Demo.tsx # ✅ Implemented |
| 134 | └── Scene4CTA.tsx # ✅ Implemented |
| 135 | ``` |
| 136 | |
| 137 | ## Next Steps |
| 138 | |
| 139 | 1. **Add assets** to public/ folders |
| 140 | - Logo: public/images/logo.svg |
| 141 | - Product screenshot: public/images/product.png |
| 142 | |
| 143 | 2. **Test in preview** |
| 144 | ```bash |
| 145 | npm run dev |
| 146 | ``` |
| 147 | |
| 148 | 3. **Verify timing** matches spec exactly |
| 149 | |
| 150 | 4. **Run render** when ready |
| 151 | ```bash |
| 152 | npm run render:youtube |
| 153 | ``` |
| 154 | |
| 155 | 5. **Review and iterate** if adjustments needed |
| 156 | |
| 157 | ## Asset Checklist |
| 158 | |
| 159 | Required assets from spec: |
| 160 | - [ ] public/images/logo.svg (400x400) |
| 161 | - [ ] public/images/product.png (1200x800) |
| 162 | |
| 163 | Use `/remotion-asset-coordinator` for asset sourcing guidance. |
| 164 | |
| 165 | ## Quality Checklist |
| 166 | |
| 167 | - [x] All scenes implemented |
| 168 | - [x] Timing matches spec |
| 169 | - [x] Animations configured |
| 170 | - [x] Co |
People who liked this also viewed
6 picksType
- lark-workflow-meeting-summary会议纪要整理工作流：汇总指定时间范围内的会议纪要并生成结构化报告。当用户需要整理会议纪要、生成会议周报、回顾一段时间内的会议内容时使用。SkillsJul 2026
- lark-workflow-standup-report日程待办摘要：编排 calendar +agenda 和 task +get-my-tasks，生成指定日期的日程与未完成任务摘要。适用于了解今天/明天/本周的安排。SkillsJul 2026
- lark-approval飞书审批：查询和处理审批待办/已办/实例，搜索可发起审批定义、查看定义详情并发起原生审批实例。当用户要处理审批任务、查看审批实例、搜索或发起审批时使用。审批待办不是飞书任务；非审批类待办走 lark-task。不负责创建审批定义；三方审批定义不走原生提单。SkillsJul 2026
- lark-okr飞书 OKR：管理目标与关键结果。查看和编辑 OKR 周期、目标、关键结果、对齐关系、量化指标和进展记录。当用户需要查看或创建 OKR、管理目标和关键结果、查看对齐关系时使用。不负责：待办任务管理（lark-task）、日程/会议安排（lark-calendar）、绩效评估SkillsJul 2026
- brainstormingYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.SkillsJul 2026
- simpleInvoke before any creative or architectural work — feature design, component creation, or behavioral changes. A streamlined brainstorming process optimized for fast, focused decision-making. Gen AgentSkillsMar 2026
