@conceptcraft/mindframes 0.1.6 → 0.1.8

package/dist/index.js

@@ -10,6 +10,64 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/lib/brand.ts
+import path from "path";
+function detectBrand() {
+  const binaryPath = process.argv[1] || "";
+  const binaryName = path.basename(binaryPath).replace(/\.(js|ts)$/, "");
+  const brandId = COMMAND_TO_BRAND[binaryName];
+  if (brandId) {
+    return BRANDS[brandId];
+  }
+  for (const [cmd2, id] of Object.entries(COMMAND_TO_BRAND)) {
+    if (binaryPath.includes(`/${cmd2}`) || binaryPath.includes(`\\${cmd2}`)) {
+      return BRANDS[id];
+    }
+  }
+  return BRANDS.mindframes;
+}
+var BRANDS, COMMAND_TO_BRAND, brand;
+var init_brand = __esm({
+  "src/lib/brand.ts"() {
+    "use strict";
+    BRANDS = {
+      conceptcraft: {
+        id: "conceptcraft",
+        name: "conceptcraft",
+        displayName: "ConceptCraft",
+        description: "CLI tool for ConceptCraft presentation generation",
+        commands: ["cc", "conceptcraft"],
+        apiUrl: "https://conceptcraft.ai",
+        docsUrl: "https://docs.conceptcraft.ai",
+        packageName: "@conceptcraft/cli",
+        configDir: ".conceptcraft",
+        apiKeyEnvVar: "CONCEPTCRAFT_API_KEY",
+        apiUrlEnvVar: "CONCEPTCRAFT_API_URL"
+      },
+      mindframes: {
+        id: "mindframes",
+        name: "mindframes",
+        displayName: "Mindframes",
+        description: "CLI tool for Mindframes presentation generation",
+        commands: ["mf", "mindframes"],
+        apiUrl: "https://mindframes.app",
+        docsUrl: "https://docs.mindframes.app",
+        packageName: "@conceptcraft/mindframes",
+        configDir: ".mindframes",
+        apiKeyEnvVar: "MINDFRAMES_API_KEY",
+        apiUrlEnvVar: "MINDFRAMES_API_URL"
+      }
+    };
+    COMMAND_TO_BRAND = {
+      cc: "conceptcraft",
+      conceptcraft: "conceptcraft",
+      mf: "mindframes",
+      mindframes: "mindframes"
+    };
+    brand = detectBrand();
+  }
+});
+
 // src/lib/config.ts
 import Conf from "conf";
 function getConfig() {
@@ -25,7 +83,7 @@ function getConfig() {
   };
 }
 function getApiKey() {
-  const envKey = process.env.CC_MINDFRAMES_API_KEY ?? process.env.CONCEPTCRAFT_API_KEY;
+  const envKey = process.env[brand.apiKeyEnvVar] ?? process.env.CC_SLIDES_API_KEY;
   if (envKey) {
     return envKey;
   }
@@ -35,7 +93,7 @@ function setApiKey(key) {
   config.set("apiKey", key);
 }
 function getApiUrl() {
-  const envUrl = process.env.NEXT_PUBLIC_API_URL ?? process.env.CONCEPTCRAFT_API_URL;
+  const envUrl = process.env[brand.apiUrlEnvVar] ?? process.env.CC_SLIDES_API_URL;
   if (envUrl) {
     return envUrl;
   }
@@ -97,6 +155,7 @@ var DEFAULT_API_URL, schema, config;
 var init_config = __esm({
   "src/lib/config.ts"() {
     "use strict";
+    init_brand();
     DEFAULT_API_URL = "https://www.mindframes.app";
     schema = {
       apiKey: {
@@ -128,7 +187,7 @@ var init_config = __esm({
       }
     };
     config = new Conf({
-      projectName: "mindframes",
+      projectName: brand.name,
       schema
     });
   }
@@ -440,7 +499,7 @@ async function request(endpoint, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
       // AUTH_ERROR
@@ -509,7 +568,7 @@ async function streamRequest(endpoint, body) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -585,7 +644,7 @@ async function uploadFile(filePath) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -745,7 +804,7 @@ async function exportPresentation(presentationId, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -779,7 +838,7 @@ async function importPresentation(fileBuffer, fileName, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -832,7 +891,7 @@ async function generateBlog(presentationId, documentCreatedAt, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -907,7 +966,7 @@ async function generateSpeech(ttsRequest) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'cc login' or set CC_SLIDES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -1025,7 +1084,7 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
     if (result.status === "completed" || result.status === "failed") {
       return result;
     }
-    await new Promise((resolve5) => setTimeout(resolve5, intervalMs));
+    await new Promise((resolve6) => setTimeout(resolve6, intervalMs));
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
@@ -1035,6 +1094,7 @@ var init_api = __esm({
     "use strict";
     init_config();
     init_auth();
+    init_brand();
     ApiError = class extends Error {
       constructor(message, statusCode, exitCode = 1) {
         super(message);
@@ -1132,10 +1192,10 @@ function generateState() {
 async function findAvailablePort(start, end) {
   for (let port = start; port <= end; port++) {
     try {
-      await new Promise((resolve5, reject) => {
+      await new Promise((resolve6, reject) => {
         const server = http.createServer();
         server.listen(port, () => {
-          server.close(() => resolve5());
+          server.close(() => resolve6());
         });
         server.on("error", reject);
       });
@@ -1193,7 +1253,7 @@ async function exchangeCodeForTokens(tokenEndpoint, code, codeVerifier, redirect
   return response.json();
 }
 function startCallbackServer(port, expectedState) {
-  return new Promise((resolve5, reject) => {
+  return new Promise((resolve6, reject) => {
     let timeoutId;
     let settled = false;
     const cleanup = () => {
@@ -1279,7 +1339,7 @@ function startCallbackServer(port, expectedState) {
         </html>
       `);
       cleanup();
-      resolve5({ code, state });
+      resolve6({ code, state });
     });
     server.listen(port);
     process.once("SIGINT", onCancel);
@@ -1395,60 +1455,11 @@ var init_login = __esm({
 });
 
 // src/index.ts
+init_brand();
+init_login();
 import { Command as Command20 } from "commander";
 import chalk13 from "chalk";
 
-// src/lib/brand.ts
-import path from "path";
-var BRANDS = {
-  conceptcraft: {
-    id: "conceptcraft",
-    name: "conceptcraft",
-    displayName: "ConceptCraft",
-    description: "CLI tool for ConceptCraft presentation generation",
-    commands: ["cc", "conceptcraft"],
-    apiUrl: "https://conceptcraft.ai",
-    docsUrl: "https://docs.conceptcraft.ai",
-    packageName: "@conceptcraft/cli",
-    configDir: ".conceptcraft"
-  },
-  mindframes: {
-    id: "mindframes",
-    name: "mindframes",
-    displayName: "Mindframes",
-    description: "CLI tool for Mindframes presentation generation",
-    commands: ["mf", "mindframes"],
-    apiUrl: "https://mindframes.app",
-    docsUrl: "https://docs.mindframes.app",
-    packageName: "@mindframes/cli",
-    configDir: ".mindframes"
-  }
-};
-var COMMAND_TO_BRAND = {
-  cc: "conceptcraft",
-  conceptcraft: "conceptcraft",
-  mf: "mindframes",
-  mindframes: "mindframes"
-};
-function detectBrand() {
-  const binaryPath = process.argv[1] || "";
-  const binaryName = path.basename(binaryPath).replace(/\.(js|ts)$/, "");
-  const brandId = COMMAND_TO_BRAND[binaryName];
-  if (brandId) {
-    return BRANDS[brandId];
-  }
-  for (const [cmd2, id] of Object.entries(COMMAND_TO_BRAND)) {
-    if (binaryPath.includes(`/${cmd2}`) || binaryPath.includes(`\\${cmd2}`)) {
-      return BRANDS[id];
-    }
-  }
-  return BRANDS.mindframes;
-}
-var brand = detectBrand();
-
-// src/index.ts
-init_login();
-
 // src/commands/logout.ts
 init_config();
 init_feature_cache();
@@ -2422,21 +2433,21 @@ Uploading ${options.file.length} file(s)...`));
   }
 });
 async function readStdin() {
-  return new Promise((resolve5) => {
+  return new Promise((resolve6) => {
     let data = "";
     process.stdin.setEncoding("utf8");
     if (process.stdin.isTTY) {
-      resolve5("");
+      resolve6("");
       return;
     }
     process.stdin.on("data", (chunk) => {
       data += chunk;
     });
     process.stdin.on("end", () => {
-      resolve5(data.trim());
+      resolve6(data.trim());
     });
     setTimeout(() => {
-      resolve5(data.trim());
+      resolve6(data.trim());
     }, 100);
   });
 }
@@ -3127,1609 +3138,1188 @@ var whoamiCommand = new Command13("whoami").description("Show current user and t
   }
 });
 
-// src/commands/skill.ts
+// src/commands/skill/index.ts
 init_output();
+init_brand();
 import { Command as Command14 } from "commander";
 import chalk12 from "chalk";
-import { mkdirSync, writeFileSync, existsSync as existsSync2 } from "fs";
-import { join } from "path";
-import { homedir } from "os";
-import { execSync } from "child_process";
-function generateSkillContent(b) {
-  const cmd2 = b.name;
-  const pkg = b.packageName;
-  const url = b.apiUrl;
-  const name = b.displayName;
-  return `---
-name: ${cmd2}
-description: Create AI-powered presentations and videos. Use for slides, decks, video content, voiceovers, and music generation.
-metadata:
-  tags: presentations, video, tts, music, animation, remotion
-video:
-  description: End-to-end AI video creation workflow with TTS voiceover and music generation. Use this skill when users want to create videos, promotional content, explainers, tourism videos, product demos, or any video content from an idea or topic. Handles the complete workflow - research, script writing, asset gathering, audio generation (voiceover + music), and orchestrates video creation. Use together with remotion-best-practices skill for Remotion-specific patterns. Triggers on requests like "create a video about X", "make a promotional video", "build a video for Y", or any video content creation task.
----
-
-# ${name} CLI
-
-Create professional presentations and videos directly from your terminal.
-
-## Prerequisites
 
-\`\`\`bash
-npm install -g ${pkg}
-${cmd2} login    # Authenticate (opens browser)
-${cmd2} whoami   # Verify setup
-\`\`\`
+// src/commands/skill/rules/video/content.ts
+var VIDEO_RULE_CONTENTS = [
+  {
+    filename: "video-creation-guide.md",
+    content: `# Video Creation Guide
 
-## Rules
+### Related Skills
 
-Read these for detailed usage:
+Use these installed skills for implementation details:
+- \`remotion-best-practices\` \u2014 Remotion patterns and API
+- \`threejs-*\` skills \u2014 for R3F/WebGL (particles, 3D elements)
 
-- [rules/presentations.md](rules/presentations.md) - Creating AI-powered presentations
-- [rules/video.md](rules/video.md) - Video creation workflow and commands
-- [rules/motion-standards.md](rules/motion-standards.md) - Animation quality standards
-- [rules/micro-interactions.md](rules/micro-interactions.md) - Animation components and patterns
-- **remotion-best-practices** skill (auto-installed) - Remotion-specific patterns
+---
 
-## Quick Reference
+## Core Rules
 
-### Presentations
+Your task is not "making slideshows" \u2014 you are **simulating a real interface** that obeys cinematic physics.
 
-\`\`\`bash
-# Create from context
-cat README.md | ${cmd2} create "Project Overview"
+### Hard Constraints
 
-# With files
-${cmd2} create "Product Demo" --file ./deck.pptx --file ./logo.png
+1. **No scene > 8 seconds** without cut or major action
+2. **No static pixels** \u2014 everything breathes, drifts, pulses
+3. **No linear interpolation** \u2014 use \`spring()\` physics
+4. **Scene overlap 15-20 frames** \u2014 no hard cuts
+5. **60 FPS mandatory** \u2014 30fps looks choppy
+6. **No screenshots for UI** \u2014 rebuild in React/CSS
 
-# With options
-${cmd2} create "API Docs" --slides 8 --tone educational --goal inform
-\`\`\`
+---
 
-### Video Creation
+## Code Organization
 
-\`\`\`bash
-# Scaffold project
-${cmd2} video init my-video
+- Create separate files: \`Button.tsx\`, \`Window.tsx\`, \`Cursor.tsx\`
+- Use Zod schemas for props validation
+- Extract animation configs to constants
 
-# Generate all assets (voiceover, music, images)
-${cmd2} video create --script "Your narration..." --output ./public
+\`\`\`tsx
+import { spring, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
 
-# Search for stock content
-${cmd2} image search -q "tropical beach" -n 5
-${cmd2} video search "tech workspace" -n 5
+// ALWAYS use spring for element entrances
+// NEVER use magic numbers
 \`\`\`
 
-### Audio Generation
+---
 
-\`\`\`bash
-# Text-to-speech
-${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
+## Aesthetics (Linear/Stripe Style)
 
-# Music generation
-${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
+\`\`\`css
+/* Shadows - soft, expensive */
+box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
 
-# Mix audio into video
-${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
+/* Borders - thin, barely visible */
+border: 1px solid rgba(255,255,255,0.1);
 \`\`\`
 
-## Assets
+- Fonts: Inter or SF Pro
+- Never pure \`#000000\` \u2014 use \`#050505\`
+- Never pure \`#FFFFFF\` \u2014 use \`#F0F0F0\`
 
-Copy animation components from \`assets/animation-components.tsx\` for Remotion videos.
+---
 
-## Asking Questions
+## Self-Check Before Render
 
-When you need to ask the user for preferences (voice, music, duration, etc.), use the \`AskUserQuestion\` tool if available. This provides a better UX with selectable options. See \`rules/video.md\` for the question format.
-`;
-}
-function generatePresentationsRule(b) {
-  const cmd2 = b.name;
-  const url = b.apiUrl;
-  return `---
-name: presentations
-description: Creating AI-powered presentations
----
+- [ ] Camera rig wraps entire scene with drift/zoom
+- [ ] Every UI element uses 2.5D rotation entrance
+- [ ] Cursor moves in curves with overshoot
+- [ ] Lists/grids stagger (never appear all at once)
+- [ ] Background has moving orbs + vignette + noise
+- [ ] Something is moving on EVERY frame
+- [ ] Scene transitions overlap (no hard cuts)
 
-# Presentations
+**If your video looks like PowerPoint with voiceover \u2014 START OVER.**
+`
+  },
+  {
+    filename: "animation-physics.md",
+    content: `# Animation Physics
 
-## Workflow
+## Spring Configurations
 
-1. **Gather context** - Read relevant files, code, or documentation
-2. **Create presentation** - Pass context to \`${cmd2} create\`
-3. **Share URL** - Return the presentation link to the user
+### Heavy UI (Modals, Sidebars)
+\`\`\`tsx
+config: { mass: 1, stiffness: 100, damping: 15 }
+\`\`\`
 
-## Create Command
+### Light UI (Tooltips, Badges)
+\`\`\`tsx
+config: { mass: 0.6, stiffness: 180, damping: 12 }
+\`\`\`
 
-Context is **required**. Provide via:
+### Standard (Snappy)
+\`\`\`tsx
+config: { mass: 1, damping: 15, stiffness: 120 }
+\`\`\`
 
-\`\`\`bash
-# Upload files (PDFs, PPTX, images, docs)
-${cmd2} create "Product Overview" --file ./deck.pptx --file ./logo.png
+---
 
-# Direct text context
-${cmd2} create "Topic Title" --context "Key points, data, facts..."
+## Staggering
 
-# From a text file
-${cmd2} create "Topic Title" --context-file ./notes.md
+**NEVER show a list all at once.**
 
-# Pipe content
-cat README.md | ${cmd2} create "Project Overview"
+\`\`\`tsx
+const STAGGER_FRAMES = 3; // 3-5 frames between items
 
-# From URLs
-${cmd2} create "Competitor Analysis" --sources https://example.com/report
+{items.map((item, i) => {
+  const delay = i * STAGGER_FRAMES;
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 120 },
+  });
 
-# Combine sources
-cat src/auth/*.ts | ${cmd2} create "Auth System" \\
-  --file ./architecture.png \\
-  --context "Focus on security patterns"
+  return (
+    <div style={{
+      opacity: progress,
+      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
+    }}>
+      {item}
+    </div>
+  );
+})}
 \`\`\`
 
-## Options
+---
 
-| Option | Description | Default |
-|--------|-------------|---------|
-| \`-n, --slides <count>\` | Number of slides (1-20) | 10 |
-| \`-m, --mode <mode>\` | Quality: \`instant\`, \`fast\`, \`balanced\`, \`best\` | balanced |
-| \`-t, --tone <tone>\` | Tone: \`professional\`, \`educational\`, \`creative\`, \`formal\`, \`casual\` | professional |
-| \`--amount <amount>\` | Density: \`minimal\`, \`concise\`, \`detailed\`, \`extensive\` | concise |
-| \`--audience <text>\` | Target audience | General Audience |
-| \`-g, --goal <type>\` | Purpose: \`inform\`, \`persuade\`, \`train\`, \`learn\`, \`entertain\`, \`report\` | - |
-| \`-f, --file <paths...>\` | Files to upload | - |
-| \`-l, --language <lang>\` | Output language | en |
-| \`-b, --brand <id>\` | Branding ID | - |
+## Cursor Movement
 
-## Other Commands
+**Cursor NEVER moves in straight lines.**
 
-\`\`\`bash
-${cmd2} list                          # List presentations
-${cmd2} get <id-or-slug>              # Get details
-${cmd2} export <id> -o deck.zip       # Export to ZIP
-${cmd2} import ./deck.zip             # Import presentation
-${cmd2} branding list                 # List brandings
-${cmd2} branding extract https://...  # Extract branding from URL
-\`\`\`
+\`\`\`tsx
+const progress = spring({
+  frame: frame - startFrame,
+  fps,
+  config: { damping: 20, stiffness: 80 },
+});
 
-## Output
+const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
+const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
 
+// THE ARC: Parabola that peaks mid-travel
+const arcHeight = 100;
+const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
+const cursorY = linearY - arcOffset;
 \`\`\`
-\u2713 Presentation created successfully
 
-  Title: Authentication System
-  Slides: 8
-  Generated in: 45s \xB7 12,500 tokens
+---
+
+## Click Interaction
 
-  Open: ${url}/en/view/presentations/auth-system-v1-abc123
+\`\`\`tsx
+// On click:
+const cursorScale = isClicking ? 0.95 : 1;
+const buttonScaleX = isClicking ? 1.02 : 1;
+const buttonScaleY = isClicking ? 0.95 : 1;
+// Release both with spring
 \`\`\`
-`;
-}
-function generateVideoRule(b) {
-  const cmd2 = b.name;
-  return `---
-name: video
-description: Video creation workflow - project-based UI replication AND stock-based videos
+
 ---
 
-# Video Creation
+## Timing Reference
+
+| Action | Frames (60fps) |
+|--------|----------------|
+| Element entrance | 15-20 |
+| Stagger gap | 3-5 |
+| Hold on key info | 45-60 |
+| Scene transition | 20-30 |
+| Fast interaction | 15-20 |
+`
+  },
+  {
+    filename: "scene-structure.md",
+    content: `# Scene Structure
 
-**Replicate the app's UI AS CLOSELY AS POSSIBLE - almost an exact copy.**
+## SceneWrapper
 
-The video should look like the REAL app. Same layout. Same colors. Same buttons. Same everything. If someone watches the video and then opens the app, they should recognize it immediately.
+\`\`\`tsx
+<SceneWrapper
+  durationInFrames={300}
+  transitionType="slideLeft"
+  cameraMotion="panRight"
+>
+  <FeatureLayer />
+  <CursorLayer />
+  <ParticleLayer />
+</SceneWrapper>
+\`\`\`
 
 ---
 
-## \u26D4 HARD RULES
+## Layer Structure (Z-Index)
 
-1. **NO GENERIC SHAPES** - Don't draw random rectangles. Replicate what the app actually looks like.
-2. **NO MADE-UP CONTENT** - Don't invent "Finding 1: Performance improved 45%". Use real content from the app.
-3. **READ BEFORE BUILDING** - Read the app's components to understand their visual structure before writing any code.
-4. **MATCH THE BRAND** - Use exact colors from tailwind.config, exact fonts, exact visual style.
-5. **ALWAYS FRESH PROJECT** - Delete existing video project, create new with \`${cmd2} video init\`.
+| Layer | Z-Index |
+|-------|---------|
+| Background orbs | 0 |
+| Vignette | 1 |
+| UI Base | 10 |
+| UI Elements | 20 |
+| Overlays | 30 |
+| Text/Captions | 40 |
+| Cursor | 50 |
 
 ---
 
-## \u{1F534} PHASE 0: READ REFERENCES FIRST
-
-**Before doing ANYTHING, read these files:**
+## Case Study: SaaS Task Tracker
 
-1. Read: rules/motion-standards.md (animation quality)
-2. Read: rules/micro-interactions.md (animation patterns)
-3. Read: rules/component-integration.md (patterns)
-4. Read: rules/project-video-workflow.md (full workflow)
-5. Skill: remotion-best-practices
+### Scene 1: "The Hook" (~5s)
 
----
+1. Dark background (\`#0B0C10\`), grid drifting
+2. Scattered circles magnetically attract \u2192 morph into logo
+3. Logo expands \u2192 becomes sidebar navigation
 
-## \u{1F3AF} TWO VIDEO MODES
+### Scene 2: "Micro-Interaction" (~6s)
 
-### Mode A: Project-Based Video (PREFERRED)
-Use when user has a project/app and wants to showcase it.
-- **Triggers:** "create video for my app", "product demo", "feature walkthrough", "promotional video for [project]"
-- **Approach:** Read components \u2192 replicate UI pixel-perfect \u2192 add animations
-- **Result:** Video looks IDENTICAL to the real app
+1. Modal "Create Issue" appears
+2. Text types character by character (non-uniform speed)
+3. \`CMD + K\` hint glows, keys animate
+4. Cursor flies to "Save" in arc, slows on approach
 
-### Mode B: Stock-Based Video
-Use ONLY when user has NO project or explicitly wants stock content.
-- **Triggers:** "create a video about tourism", "make a generic explainer"
-- **Approach:** Use \`${cmd2} video create\` with stock images
-- **Result:** Generic video with stock imagery
+### Scene 3: "The Connection" (~5s)
 
-**DEFAULT TO MODE A if user mentions their app/project.**
+1. Task card grabbed, scales 1.05, shadow deepens
+2. Other cards spread apart
+3. **Match Cut:** Zoom into avatar \u2192 color fills screen \u2192 becomes mobile notification background
 
 ---
 
-## Pre-Creation Questions
-
-Before creating a video, use \`AskUserQuestion\` tool (if available) to ask:
+## Composition
 
-\`\`\`json
-{
-  "questions": [
-    {
-      "question": "Which voice would you prefer for the narration?",
-      "header": "Voice",
-      "options": [
-        { "label": "Kore (Recommended)", "description": "Female, professional voice - best for narration" },
-        { "label": "Puck", "description": "Male, energetic voice - good for promos" },
-        { "label": "Rachel", "description": "Female, calm voice" },
-        { "label": "No voiceover", "description": "Music only, no narration" }
-      ],
-      "multiSelect": false
-    },
-    {
-      "question": "What background music style fits your video?",
-      "header": "Music",
-      "options": [
-        { "label": "Uplifting/positive", "description": "Energetic and inspiring" },
-        { "label": "Corporate/professional", "description": "Modern, polished business feel" },
-        { "label": "Cinematic/dramatic", "description": "Epic, impactful presentation" },
-        { "label": "Calm ambient", "description": "Soft, subtle background" }
-      ],
-      "multiSelect": false
-    },
-    {
-      "question": "How long should the video be?",
-      "header": "Duration",
-      "options": [
-        { "label": "15 seconds", "description": "Quick teaser" },
-        { "label": "30 seconds", "description": "Social media friendly" },
-        { "label": "60 seconds", "description": "Standard length" }
-      ],
-      "multiSelect": false
-    }
-  ]
-}
+\`\`\`tsx
+<AbsoluteFill>
+  <MovingBackground />
+  <Vignette />
+  <CameraRig>
+    <Sequence from={0} durationInFrames={100}>
+      <Scene1 />
+    </Sequence>
+    <Sequence from={85} durationInFrames={150}>  {/* 15 frame overlap! */}
+      <Scene2 />
+    </Sequence>
+  </CameraRig>
+  <Audio src={music} volume={0.3} />
+</AbsoluteFill>
 \`\`\`
+`
+  },
+  {
+    filename: "scene-transitions.md",
+    content: `# Scene Transitions
 
-If \`AskUserQuestion\` tool is not available, ask these questions in text format.
-
-## Audio-First Workflow
-
-**IMPORTANT:** This workflow ensures video and audio are always in sync. The CLI generates audio first, parses the script into sections, and calculates exact timing for each section. Scenes MUST use these timings.
-
-### Step 1: Write Script
+**No FadeIn/FadeOut.** Only contextual transitions.
 
-Write narration for the target duration. Structure: Hook \u2192 Key points \u2192 CTA
+---
 
-Tip: ~2.5 words per second for natural pacing.
+## Types
 
-### Step 2: Generate Assets (Audio-First)
+### 1. Object Persistence
+Same chart transforms (data, color, scale) while UI changes around it.
 
-\`\`\`bash
-${cmd2} video create \\
-  --script "Your narration script..." \\
-  --topic "topic for image search" \\
-  --voice Kore \\
-  --music-prompt "uplifting corporate" \\
-  --num-images 5 \\
-  --output ./public
-\`\`\`
+### 2. Mask Reveal
+Button expands to screen size via SVG \`clipPath\`.
 
-This generates:
-- \`public/audio/voiceover.wav\` - TTS voiceover (determines total duration)
-- \`public/audio/music.mp3\` - Background music (auto-matches voiceover length)
-- \`public/images/scene-*.jpg\` - Stock images
-- \`public/video-manifest.json\` - **Contains sections with exact TTS timestamps**
+### 3. Speed Ramps
+Scene A accelerates out, Scene B starts fast then slows.
 
-### Step 3: Read Manifest Sections
+---
 
-The manifest includes a \`sections\` array with **exact timing from TTS character-level timestamps**:
+## Match Cut Example
 
-\`\`\`json
-{
-  "voiceover": {
-    "path": "audio/voiceover.wav",
-    "duration": 15.2,
-    "timestamps": {
-      "characters": ["P", "u", "e", "r", "t", "o", " ", ...],
-      "characterStartTimesSeconds": [0, 0.05, 0.1, ...],
-      "characterEndTimesSeconds": [0.05, 0.1, 0.15, ...]
-    }
-  },
-  "sections": [
-    {
-      "id": 1,
-      "text": "Puerto Rico. La Isla del Encanto.",
-      "wordCount": 5,
-      "startTime": 0,
-      "endTime": 2.8,
-      "durationInSeconds": 2.8,
-      "durationInFrames": 84,
-      "imagePath": "images/scene-1.jpg"
-    },
-    {
-      "id": 2,
-      "text": "Discover five hundred years of history.",
-      "wordCount": 7,
-      "startTime": 2.8,
-      "endTime": 8.2,
-      "durationInSeconds": 5.4,
-      "durationInFrames": 162,
-      "imagePath": "images/scene-2.jpg"
-    }
-  ],
-  "totalDurationInFrames": 450,
-  "fps": 30
-}
+\`\`\`
+Scene A: Zoom into avatar
+         \u2193
+Avatar color fills screen
+         \u2193
+Scene B: That color IS the notification background
 \`\`\`
 
-**Key points:**
-- Section timing is derived from actual TTS audio timestamps (not estimated)
-- \`voiceover.timestamps\` contains character-level timing for word-by-word animations
-- Video duration will always match voiceover duration exactly
-
-### Step 4: Create Scenes (Match Section Timing)
+---
 
-**CRITICAL:** Use \`durationInFrames\` from each section. This ensures audio/video sync.
+## Overlapping Sequences (CRITICAL)
 
 \`\`\`tsx
-// Read manifest sections and create matching scenes
-import manifest from '../../public/video-manifest.json';
-
-// Scene durations MUST match manifest sections
-export const SECTION_1_DURATION = manifest.sections[0].durationInFrames; // 84
-export const SECTION_2_DURATION = manifest.sections[1].durationInFrames; // 162
-// ... etc
-
-export const FULL_VIDEO_DURATION = manifest.totalDurationInFrames; // 450
+<Sequence from={0} durationInFrames={100}>
+  <SceneOne />
+</Sequence>
+<Sequence from={85} durationInFrames={150}>  {/* 15 frames early! */}
+  <SceneTwo />
+</Sequence>
 \`\`\`
 
-Example scene component:
+---
+
+## TransitionSeries
 
 \`\`\`tsx
-// src/remotion/scenes/Scene1.tsx
-import { AbsoluteFill, Img, staticFile, useCurrentFrame, useVideoConfig, spring } from "remotion";
-import manifest from '../../../public/video-manifest.json';
+import { TransitionSeries, linearTiming } from '@remotion/transitions';
+import { slide } from '@remotion/transitions/slide';
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={100}>
+    <SceneOne />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={slide({ direction: 'from-bottom' })}
+    timing={linearTiming({ durationInFrames: 20 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={150}>
+    <SceneTwo />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
+\`\`\`
+`
+  },
+  {
+    filename: "polish-effects.md",
+    content: `# Polish Effects
 
-const section = manifest.sections[0];
-export const SCENE_1_DURATION = section.durationInFrames;
+## Reflection (Glass Glint)
 
-export const Scene1: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const progress = spring({ frame, fps, config: { damping: 15, stiffness: 100 } });
+Diagonal gradient sweeps every 5 seconds.
 
-  return (
-    <AbsoluteFill>
-      <Img src={staticFile(section.imagePath)} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-      <div style={{
-        position: 'absolute',
-        bottom: 100,
-        left: 0,
-        right: 0,
-        textAlign: 'center',
-        opacity: progress,
-        transform: \`translateY(\${(1 - progress) * 20}px)\`,
-      }}>
-        <h1 style={{ color: 'white', fontSize: 60, textShadow: '2px 2px 8px rgba(0,0,0,0.8)' }}>
-          {section.text}
-        </h1>
-      </div>
-    </AbsoluteFill>
-  );
-};
+\`\`\`tsx
+const cycleFrame = frame % 300;
+const sweepProgress = interpolate(cycleFrame, [0, 60], [-100, 200], {
+  extrapolateRight: 'clamp',
+});
 \`\`\`
 
-### Step 5: Update FullVideo.tsx
-
-\`\`\`tsx
-import { AbsoluteFill, Series, Audio, staticFile, useCurrentFrame, interpolate } from "remotion";
-import manifest from '../../public/video-manifest.json';
-import { Scene1, SCENE_1_DURATION } from "./scenes/Scene1";
-import { Scene2, SCENE_2_DURATION } from "./scenes/Scene2";
-// ... import all scenes
+---
 
-export const FULL_VIDEO_DURATION = manifest.totalDurationInFrames;
+## Background Breathing
 
-const BackgroundMusic: React.FC = () => {
-  const frame = useCurrentFrame();
-  const fadeIn = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: "clamp" });
-  const fadeOut = interpolate(frame, [FULL_VIDEO_DURATION - 20, FULL_VIDEO_DURATION], [1, 0], { extrapolateLeft: "clamp" });
-  return <Audio src={staticFile("audio/music.mp3")} volume={fadeIn * fadeOut * 0.25} />;
-};
+Background is NEVER static.
 
-export const FullVideo: React.FC = () => {
-  return (
-    <AbsoluteFill>
-      <Series>
-        <Series.Sequence durationInFrames={SCENE_1_DURATION}>
-          <Scene1 />
-        </Series.Sequence>
-        <Series.Sequence durationInFrames={SCENE_2_DURATION}>
-          <Scene2 />
-        </Series.Sequence>
-        {/* Add all sections */}
-      </Series>
-
-      <Audio src={staticFile("audio/voiceover.wav")} volume={1} />
-      <BackgroundMusic />
-    </AbsoluteFill>
-  );
-};
+\`\`\`tsx
+const orb1X = Math.sin(frame / 60) * 200;
+const orb1Y = Math.cos(frame / 80) * 100;
 \`\`\`
 
-### Step 6: Preview & Render
+---
 
-\`\`\`bash
-npm run dev     # Preview in Remotion Studio
-npm run render  # Output to out/video.mp4
-\`\`\`
+## Typewriter Effect
 
-## CLI Commands Reference
+\`\`\`tsx
+const charIndex = Math.floor(frame / 3);
+const showCursor = Math.floor(frame / 15) % 2 === 0;
 
-### ${cmd2} video create
+<span>
+  {text.slice(0, charIndex)}
+  {showCursor && <span>|</span>}
+</span>
+\`\`\`
 
-| Option | Required | Default | Description |
-|--------|----------|---------|-------------|
-| \`-s, --script <text>\` | Yes* | - | Narration script |
-| \`--script-file <path>\` | Yes* | - | Path to script file |
-| \`-t, --topic <text>\` | No | auto | Topic for image search |
-| \`-v, --voice <name>\` | No | Kore | TTS voice |
-| \`-m, --music-prompt <text>\` | No | auto | Music description |
-| \`-n, --num-images <n>\` | No | 5 | Number of images |
-| \`-o, --output <dir>\` | No | ./public | Output directory |
+---
 
-### ${cmd2} tts generate
+## Vignette & Noise
 
-\`\`\`bash
-${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
-${cmd2} tts voices  # List all voices
+\`\`\`tsx
+// Noise
+<AbsoluteFill style={{
+  backgroundImage: 'url(/noise.png)',
+  opacity: 0.03,
+  mixBlendMode: 'overlay',
+}} />
+
+// Vignette
+<AbsoluteFill style={{
+  background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%)',
+}} />
 \`\`\`
+`
+  },
+  {
+    filename: "advanced-techniques.md",
+    content: `# Advanced Techniques
 
-**Voices:** Kore (professional female), Puck (energetic male), Rachel (calm female), alloy (neutral)
+## Audio-Reactive
 
-### ${cmd2} music generate
+- **Kick:** \`scale(1.005)\` pulse
+- **Snare:** Trigger scene changes
+- **Hi-hats:** Cursor flicker, particle shimmer
 
-\`\`\`bash
-${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
-\`\`\`
+---
 
-**Good prompts:** "uplifting corporate", "calm ambient, soft piano", "cinematic orchestral"
+## Motion Blur (Fake)
 
-### ${cmd2} image search / video search
+\`\`\`tsx
+// Trail: Render 3-4 copies with opacity 0.3, 1-frame delay
 
-\`\`\`bash
-${cmd2} image search -q "tropical beach" -n 5 -s large
-${cmd2} video search "tech workspace" -n 5
+// Or drop shadow for fast movement:
+filter: \`drop-shadow(\${velocityX * 0.5}px \${velocityY * 0.5}px 10px rgba(0,0,0,0.3))\`
 \`\`\`
 
-### ${cmd2} mix create
+---
 
-Post-process audio into existing video:
+## 3D Perspective
 
-\`\`\`bash
-${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
+\`\`\`tsx
+<div style={{ perspective: '1000px' }}>
+  <div style={{
+    transform: 'rotateX(5deg) rotateY(10deg)',
+    transformStyle: 'preserve-3d',
+  }}>
+    {/* Your UI */}
+  </div>
+</div>
 \`\`\`
 
-## Audio Guidelines
+---
 
-| Element | Volume | Notes |
-|---------|--------|-------|
-| Voiceover | 100% | Primary audio |
-| Background music | 20-30% | Fade in/out over ~10-20 frames |
+## Kinetic Typography
 
-Generate music 5s longer than video for fade out.
+### Masked Reveal
+\`\`\`tsx
+<div style={{ overflow: 'hidden', height: 80 }}>
+  <h1 style={{
+    transform: \`translateY(\${interpolate(progress, [0, 1], [100, 0])}%)\`,
+  }}>
+    INTRODUCING
+  </h1>
+</div>
+\`\`\`
 
-## Animation Quality Checklist
+### Keyword Animation
+Animate keywords, not whole sentences.
+`
+  },
+  {
+    filename: "remotion-config.md",
+    content: `# Remotion Configuration
 
-Before rendering, ensure your video follows these standards from motion-standards.md:
+## FPS & Resolution
 
-1. **Physics over linearity** - Use \`spring()\` for all animations, never linear interpolate for movement
-2. **Orchestration** - Stagger element entrances (3-8 frame delays), never animate all at once
-3. **Virtual camera** - Add subtle zoom/scale even on static scenes (1.0 \u2192 1.03 over duration)
-4. **Micro-interactions** - Use components from micro-interactions.md for buttons, text reveals, highlights
+- **60 FPS mandatory** \u2014 30fps looks choppy
+- **1920\xD71080** Full HD
+- **Center:** \`{x: 960, y: 540}\`
 
 ---
 
-# \u{1F3AC} PROJECT-BASED VIDEO WORKFLOW (Mode A)
+## Timing
 
-**Use this when user has a project/app to showcase.**
+- 1 second = 60 frames
+- Fast interaction = 15-20 frames
+- No scene > 8 seconds without action
 
-## \u{1F4CB} PHASE 1: EXPLORE THE APP
-
-### 1.1 Find Brand Assets
-
-\`\`\`bash
-# Logo
-find src -name "*[Ll]ogo*" 2>/dev/null
-find public -name "*logo*" 2>/dev/null
+---
 
-# Colors - THIS IS CRITICAL
-cat tailwind.config.* | grep -A 30 "colors"
-cat src/app/globals.css | head -50
+## Entry-Action-Exit Structure
 
-# Fonts
-grep -r "fontFamily" tailwind.config.* src/app/layout.tsx
-\`\`\`
+| Phase | Duration |
+|-------|----------|
+| Entry | 0.0s - 0.5s |
+| Action | 0.5s - (duration - 1s) |
+| Exit | last 1s |
 
-### 1.2 Read Key UI Components
+---
 
-**Don't copy - just read to understand the visual structure:**
+## Font Loading
 
-\`\`\`bash
-# Find main components
-find src/components -name "*.tsx" | head -30
+\`\`\`tsx
+const [handle] = useState(() => delayRender());
 
-# Read them to understand layout, colors, structure
-cat src/components/slides/SlidesSidebar.tsx
-cat src/components/tools/ToolsPanel.tsx
-cat src/components/ui/button.tsx
+useEffect(() => {
+  document.fonts.ready.then(() => {
+    continueRender(handle);
+  });
+}, [handle]);
 \`\`\`
 
-**For each component, note:**
-- Layout structure (sidebar? grid? list?)
-- Colors used (bg-slate-900, text-teal-400, etc.)
-- Visual elements (badges, icons, thumbnails)
-- Typography (font sizes, weights)
-
-### 1.3 Document Your Findings
-
-\`\`\`markdown
-## Brand Discovery: [App Name]
+---
 
-### Colors (from tailwind.config)
-- Background: #0f172a (slate-900)
-- Surface: #1e293b (slate-800)
-- Primary: #14b8a6 (teal-500)
-- Accent: #f472b6 (pink-400)
-- Text: #ffffff / #94a3b8 (slate-400)
+## Zod Schema
 
-### Key UI Elements I Observed
-1. **Sidebar** - Dark bg, slide thumbnails with numbers
-2. **Main viewer** - Light slide content area
-3. **Tools panel** - Grid of cards with icons
+\`\`\`tsx
+export const SceneSchema = z.object({
+  titleText: z.string(),
+  buttonColor: z.string(),
+  cursorPath: z.array(z.object({ x: z.number(), y: z.number() })),
+});
 \`\`\`
 
 ---
 
-## \u{1F4CB} PHASE 2: PLAN THE VIDEO
+## SaaS Video Kit Components
 
-### Scene Structure
+| Component | Purpose |
+|-----------|---------|
+| \`MockWindow\` | macOS window with traffic lights |
+| \`SmartCursor\` | Bezier curves + click physics |
+| \`NotificationToast\` | Slide in, wait, slide out |
+| \`TypingText\` | Typewriter with cursor |
+| \`Placeholder\` | For logos/icons |
 
-\`\`\`markdown
-## Video Plan: [App Name] Demo
-
-### Scene 1: Intro (3s / 90 frames)
-**What to show:** Logo + tagline on dark background
-**Colors:** bg #0f172a, logo centered
-**Animation:** Logo scales in with spring, tagline fades up
+---
 
-### Scene 2: Sidebar UI (5s / 150 frames)
-**What to show:** Replicate the slides sidebar
-**Reference:** Read src/components/slides/SlidesSidebar.tsx
-**Build:** Dark sidebar with slide items, thumbnails
-**Animation:** Sidebar slides in, items stagger
+## Code Rules
 
-### Scene 3: Main Editor (5s / 150 frames)
-**What to show:** Replicate the slide viewer
-**Reference:** Read src/components/slides/SlideViewer.tsx
-**Animation:** Content fades in
+1. No \`transition: all 0.3s\` \u2014 use \`interpolate()\` or \`spring()\`
+2. Use \`AbsoluteFill\` for layout
+3. No magic numbers \u2014 extract to constants
+`
+  },
+  {
+    filename: "elite-production.md",
+    content: `# Elite Production
 
-### Scene 4: CTA (3s / 90 frames)
-**What to show:** Logo + CTA button + URL
-**Animation:** Logo fades in, button pulses
-\`\`\`
+For Stripe/Apple/Linear quality.
 
 ---
 
-## \u{1F528} PHASE 3: BUILD
-
-### 3.1 Create Fresh Project
+## Global Lighting Engine
 
-\`\`\`bash
-rm -rf ../appname-video
-${cmd2} video init ../appname-video
-cd ../appname-video
+\`\`\`tsx
+const lightSource = { x: 0.2, y: -0.5 };
+const gradientAngle = Math.atan2(lightSource.y, lightSource.x) * (180 / Math.PI);
+
+<button style={{
+  background: \`linear-gradient(\${gradientAngle}deg, rgba(255,255,255,0.1) 0%, transparent 50%)\`,
+  borderTop: '1px solid rgba(255,255,255,0.15)',
+  boxShadow: \`\${-lightSource.x * 20}px \${-lightSource.y * 20}px 40px rgba(0,0,0,0.3)\`,
+}} />
 \`\`\`
 
-### 3.2 Copy Brand Assets Only
+---
 
-\`\`\`bash
-# Logo
-cp ../myapp/public/logo.svg ./public/
+## Noise & Dithering
 
-# Tailwind config (for colors/fonts)
-cp ../myapp/tailwind.config.* ./
+Every background needs noise overlay (opacity 0.02-0.05). Prevents YouTube banding.
 
-# Global CSS
-cp ../myapp/src/app/globals.css ./src/styles/
-\`\`\`
+---
 
-### 3.3 Build Scene Components - PIXEL PERFECT
+## React Three Fiber
 
-**Each scene replicates what you observed, using Remotion:**
+For particles, 3D globes \u2014 use WebGL via \`@remotion/three\`, not CSS 3D.
 
 \`\`\`tsx
-// src/remotion/scenes/SidebarScene.tsx
-// Replicates: src/components/slides/SlidesSidebar.tsx
+import { ThreeCanvas } from '@remotion/three';
+
+<AbsoluteFill>
+  <HtmlUI />
+  <ThreeCanvas>
+    <Particles />
+  </ThreeCanvas>
+</AbsoluteFill>
+\`\`\`
 
-import React from "react";
-import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
+See \`threejs-*\` skills for implementation.
 
-const mockSlides = [
-  { id: 1, title: "Title Slide", selected: true },
-  { id: 2, title: "Overview", selected: false },
-  { id: 3, title: "Key Players", selected: false },
-];
+---
 
-export const SIDEBAR_SCENE_DURATION = 150;
+## Virtual Camera Rig
 
-export const SidebarScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+Move camera, not elements:
 
-  const sidebarProgress = spring({ frame, fps, config: { damping: 20, stiffness: 100 } });
-  const sidebarX = (1 - sidebarProgress) * -280;
+\`\`\`tsx
+const CameraProvider = ({ children }) => {
+  const frame = useCurrentFrame();
+  const panX = interpolate(frame, [0, 300], [0, -100]);
+  const zoom = interpolate(frame, [0, 300], [1, 1.05]);
 
   return (
-    <AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
-      {/* Sidebar - EXACT colors from tailwind.config */}
-      <div style={{
-        width: 280,
-        height: "100%",
-        backgroundColor: "#0f172a",
-        borderRight: "1px solid #1e293b",
-        transform: \`translateX(\${sidebarX}px)\`,
-        padding: 16,
-      }}>
-        {/* Header - EXACT styling from component */}
-        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
-          <span style={{ color: "#14b8a6", fontSize: 14, fontWeight: 500 }}>
-            SLIDES CONTROL
-          </span>
-        </div>
-
-        {/* Slide items - staggered animation */}
-        {mockSlides.map((slide, i) => {
-          const itemProgress = spring({
-            frame: frame - 10 - i * 8,
-            fps,
-            config: { damping: 15, stiffness: 100 },
-          });
-
-          return (
-            <div key={slide.id} style={{
-              opacity: itemProgress,
-              transform: \`translateX(\${(1 - itemProgress) * -20}px)\`,
-              marginBottom: 8,
-              padding: 12,
-              borderRadius: 8,
-              backgroundColor: slide.selected ? "#1e293b" : "transparent",
-              border: slide.selected ? "1px solid #14b8a6" : "1px solid transparent",
-            }}>
-              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
-                <div style={{ width: 48, height: 32, backgroundColor: "#334155", borderRadius: 4 }} />
-                <div>
-                  <span style={{ color: "#64748b", fontSize: 12 }}>
-                    SLIDE {String(i + 1).padStart(2, "0")}
-                  </span>
-                  {slide.selected && <span style={{ color: "#f87171", fontSize: 12, marginLeft: 8 }}>SELECTED</span>}
-                  <p style={{ color: "#ffffff", fontSize: 14, margin: 0 }}>{slide.title}</p>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </AbsoluteFill>
+    <div style={{
+      transform: \`translateX(\${panX}px) scale(\${zoom})\`,
+      transformOrigin: 'center',
+    }}>
+      {children}
+    </div>
   );
 };
 \`\`\`
 
-### 3.4 Key Principles: PIXEL-PERFECT Replication
-
-**The video UI should be indistinguishable from the real app.**
+---
 
-1. **EXACT colors** - Copy hex values directly from tailwind.config
-2. **EXACT spacing** - If \`p-4 gap-3\`, use \`padding: 16px, gap: 12px\`
-3. **EXACT typography** - Same font size, weight, color
-4. **EXACT borders** - Same border width, color, radius
-5. **EXACT layout** - Same flex direction, alignment, widths
-6. **Then add animations** - spring() entrances, stagger delays
+## Motion Rules
 
----
+- **Overshoot:** Modal scales to 1.02, settles to 1.0
+- **Overlap:** Scene B starts 15 frames before Scene A ends
+`
+  },
+  {
+    filename: "known-issues.md",
+    content: `# Known Issues & Fixes
 
-## \u{1F3AC} PHASE 4: AUDIO & RENDER
+## 1. Music Ends Before Video Finishes
 
-### Generate Audio
+**Problem:** Music duration is shorter than video duration, causing awkward silence at the end.
 
-\`\`\`bash
-${cmd2} video create \\
-  --script "Your narration..." \\
-  --music-prompt "modern uplifting tech" \\
-  --output ./public
-\`\`\`
+**Solution:** Loop music in Remotion using the \`loop\` prop:
 
-### Preview & Render
+\`\`\`tsx
+import { Audio } from 'remotion';
 
-\`\`\`bash
-npm run dev    # Preview
-npm run render # Output to out/video.mp4
+<Audio src={musicSrc} volume={0.3} loop />
 \`\`\`
 
+**How it works:**
+- Music automatically loops to fill video duration
+- Set volume to 0.3 (30% - less loud than voice)
+- Add fade out at the end for smooth ending
+
 ---
 
-## \u274C WHAT NOT TO DO
+## 2. Music Transitions Sound Abrupt
 
-### Bad: Generic rectangles
-\`\`\`tsx
-// \u274C NO
-<div style={{ background: "linear-gradient(#667eea, #764ba2)", width: 200, height: 150 }} />
-\`\`\`
+**Problem:** Music cuts harshly when scenes change or video ends.
 
-### Bad: Made-up content
+**Fix in Remotion:**
 \`\`\`tsx
-// \u274C NO
-<h2>Key Insights from Research</h2>
-<li>Finding 1: Performance improved by 45%</li>
-\`\`\`
+import { interpolate, Audio } from 'remotion';
+
+// Fade music in/out at scene boundaries
+const musicVolume = interpolate(
+  frame,
+  [0, 30, totalFrames - 60, totalFrames],
+  [0, 0.3, 0.3, 0],
+  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
+);
 
-### Bad: Not matching the app
-\`\`\`tsx
-// \u274C NO - App uses slate-900, not gray-800
-<div style={{ backgroundColor: "#1f2937" }}>
+<Audio src={music} volume={musicVolume} />
 \`\`\`
 
-### Good: Replicated UI with correct brand
+---
+
+## 3. Scene Transitions Too Harsh
+
+**Problem:** Scenes change abruptly without smooth transitions.
+
+**Fix:** Use \`@remotion/transitions\` with overlapping:
 \`\`\`tsx
-// \u2705 YES - Matches actual app colors and structure
-<div style={{ backgroundColor: "#0f172a", borderColor: "#1e293b" }}>
-  <span style={{ color: "#14b8a6" }}>SLIDES CONTROL</span>
-</div>
+import { TransitionSeries, springTiming } from '@remotion/transitions';
+import { slide } from '@remotion/transitions/slide';
+import { fade } from '@remotion/transitions/fade';
+
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={sceneA.frames}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={slide({ direction: 'from-right' })}
+    timing={springTiming({ config: { damping: 20 } })}
+  />
+  <TransitionSeries.Sequence durationInFrames={sceneB.frames}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
 \`\`\`
 
 ---
 
-## \u2705 Project Video Checklist
-
-### Before Building
-- [ ] Read motion-standards.md and micro-interactions.md
-- [ ] Found logo path
-- [ ] Found colors from tailwind.config
-- [ ] Read key components to understand visual structure
-- [ ] Documented findings
-- [ ] Planned scenes
-
-### While Building
-- [ ] Using exact colors from tailwind.config
-- [ ] Matching layout structure of real app
-- [ ] Using spring() for animations
-- [ ] Mock data is realistic
-
-### Before Render
-- [ ] Logo appears in intro and CTA
-- [ ] Colors match the app exactly
-- [ ] All scenes have smooth animations
-`;
-}
-function generateMotionStandardsRule() {
-  return `---
-name: motion-standards
-description: Animation quality standards for high-end video production
----
-
-# Motion Design Standards
+## 4. Voiceover Lacks Energy
 
-Generate videos that feel like high-end productions (Apple, Stripe, Linear quality).
+**Problem:** Voiceover sounds flat/monotone.
 
-**Follow these standards for every Remotion component.**
-
-## STANDARD 01: PHYSICS OVER LINEARITY
-
-- **Rule:** Never use linear interpolation for movement or scaling
-- **Implementation:** Use \`spring()\` for ALL entrance/exit animations
-- **Default config:** \`{ mass: 0.8, stiffness: 150, damping: 15 }\`
+**Fix:** Pass \`voiceSettings\` in scenes JSON:
+\`\`\`json
+{
+  "scenes": [...],
+  "voice": "Kore",
+  "voiceSettings": {
+    "style": 0.6,
+    "stability": 0.4,
+    "speed": 0.95
+  }
+}
+\`\`\`
 
-\`\`\`tsx
-// BAD
-const opacity = interpolate(frame, [0, 30], [0, 1]);
+- \`style\`: 0.5-0.7 for more expressive delivery
+- \`stability\`: 0.3-0.5 for more variation
+- \`speed\`: 0.9-1.0 slightly slower = more impactful
 
-// GOOD
-const progress = spring({ frame, fps, config: { mass: 0.8, stiffness: 150, damping: 15 } });
-\`\`\`
+---
 
-## STANDARD 02: ORCHESTRATION & CASCADE
+## 5. Video Duration Mismatch
 
-- **Rule:** NEVER animate all elements simultaneously
-- **Implementation:** Staggered entrances with 3-5 frames between items
+**Problem:** Brief says 30-45s but video is 20s (because scene duration = voiceover duration).
 
+**Fixes:**
+1. **Slow voice:** Use \`speed: 0.85\` in voiceSettings
+2. **Add padding in Remotion:** Hold last frame, add breathing room
 \`\`\`tsx
-// GOOD - cascading entrance
-<FadeIn delay={0}><Header /></FadeIn>
-<FadeIn delay={8}><Content /></FadeIn>
-<FadeIn delay={16}><Footer /></FadeIn>
-
-// GOOD - staggered list
-{items.map((item, i) => (
-  <SlideUp key={item.id} delay={i * 4}>
-    <ListItem data={item} />
-  </SlideUp>
-))}
+// Add 30 frames (0.5s) padding after voiceover ends
+const paddedDuration = voiceoverFrames + 30;
 \`\`\`
+3. **Brief should note:** "Duration based on voiceover length"
 
-## STANDARD 03: THE VIRTUAL CAMERA
+---
 
-- **Rule:** Even when UI is idle, add subtle movement
-- **Implementation:** Dolly zoom (slow push in)
+## 6. Not Using Project UI Components
 
-\`\`\`tsx
-const CinematicContainer = ({ children }) => {
-  const frame = useCurrentFrame();
-  const { durationInFrames } = useVideoConfig();
-  const scale = interpolate(frame, [0, durationInFrames], [1, 1.03]);
+**Problem:** Generic UI instead of pixel-perfect project components.
 
-  return (
-    <AbsoluteFill style={{ transform: \`scale(\${scale})\` }}>
-      {children}
-    </AbsoluteFill>
-  );
-};
-\`\`\`
+**Fix:** In Phase 1 Discovery:
+1. Find project's actual components (buttons, cards, modals, inputs)
+2. Copy their styles/structure into Remotion components
+3. Match colors, fonts, shadows, border-radius exactly
 
-## STANDARD 04: HUMAN SIMULATION
+\`\`\`tsx
+// DON'T: Generic button
+<button style={{ background: 'blue' }}>Click</button>
+
+// DO: Match project's actual button
+<button style={{
+  background: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
+  borderRadius: 8,
+  padding: '12px 24px',
+  boxShadow: '0 4px 14px rgba(99, 102, 241, 0.4)',
+  border: '1px solid rgba(255,255,255,0.1)',
+}}>Click</button>
+\`\`\`
 
-- **Rule:** NEVER move cursor in straight lines
-- **Implementation:** Use curved/Bezier paths for cursor movement
+---
 
-## STANDARD 05: TECHNICAL CONSTRAINTS
+## 7. Missing Physics & Lighting
 
-1. **Styling:** Tailwind CSS or inline styles
-2. **Layout:** Use \`AbsoluteFill\` for scene composition
-3. **State:** NO \`useState\` or \`useEffect\` - derive from \`useCurrentFrame()\`
+**Problem:** Video feels flat, no depth or motion.
 
-## Execution Checklist
+**Checklist:**
+- [ ] Global light source defined (affects all shadows/gradients)
+- [ ] Camera rig with subtle drift/zoom
+- [ ] Spring physics on ALL entrances (no linear)
+- [ ] Staggered animations (never all at once)
+- [ ] Background orbs/particles moving
+- [ ] Noise overlay (opacity 0.02-0.05)
+- [ ] Vignette for depth
+`
+  }
+];
 
-1. Analyze UI hierarchy
-2. Choreograph order of appearance
-3. Apply \`spring()\` physics
-4. Add subtle camera movement
-5. Human touches for interactions
-`;
-}
-function generateMicroInteractionsRule() {
+// src/commands/skill/generate-video-skill.ts
+function generateVideoSkillContent(context) {
+  const { name, cmd: cmd2, displayName } = context;
   return `---
-name: micro-interactions
-description: Animation components and patterns
+name: ${name}-video
+description: Use when user asks to create videos (product demos, explainers, social content, promos). Handles video asset generation, Remotion implementation, and thumbnail embedding.
 ---
 
-# Micro-Interactions
+# ${displayName} Video Creation CLI
 
-## Core Principles
+Create professional product videos directly from your terminal. The CLI generates AI-powered video assets (voiceover, music, images, stock videos) and provides tools for Remotion-based video production with React Three Fiber.
 
-1. **Subtle** - Effects enhance, never distract
-2. **Purposeful** - Every animation communicates something
-3. **Physics-based** - Use \`spring()\`, not linear easing
-4. **Continuous** - Always have something moving subtly
+**Stack:** Remotion (React video framework) + React Three Fiber (R3F) + Three.js for 3D/WebGL, particles, shaders, lighting.
 
-## Spring Configurations
+We create **elite product videos** (Stripe, Apple, Linear quality) using physics-based animation, dynamic lighting, and pixel-perfect UI components rebuilt from the real project \u2014 never boring screenshots or static images.
 
-\`\`\`tsx
-const SPRING_CONFIGS = {
-  snappy: { damping: 15, stiffness: 200, mass: 0.5 },
-  smooth: { damping: 20, stiffness: 100, mass: 1 },
-  bouncy: { damping: 8, stiffness: 150, mass: 0.8 },
-  gentle: { damping: 30, stiffness: 50, mass: 1 },
-};
-\`\`\`
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
 
-## Entry Animations
+---
 
-### Fade + Slide
+## CRITICAL: Professional Composition Rules
 
-\`\`\`tsx
-const AnimatedEntry = ({ delay = 0, direction = 'up', children }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+**These rules are MANDATORY for all marketing/product videos:**
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: { damping: 20, stiffness: 100 }
-  });
+### \u274C NEVER DO:
+1. **Walls of text** - No dense paragraphs or lists longer than 3 lines
+2. **Flying/floating cards** - No random floating animations across the screen
+3. **Stretched layouts** - No elements awkwardly stretched to fill space
+4. **Truncated text** - Never show "Text that gets cut off..."
+5. **Information overload** - Max 1-2 key points visible at once
+6. **Amateur motion** - No PowerPoint-style "fly in from left/right"
 
-  const directions = {
-    up: { x: 0, y: 30 },
-    down: { x: 0, y: -30 },
-    left: { x: 30, y: 0 },
-    right: { x: -30, y: 0 },
-  };
+### \u2705 ALWAYS DO:
+1. **Hierarchy first** - One clear focal point per scene (headline OR stat OR visual, not all)
+2. **Breathing room** - Generous whitespace (min 100px padding around elements)
+3. **Purposeful motion** - Cards appear with subtle spring (0-20px translateY), not fly across screen
+4. **Readable text** - Max 2-3 lines per card, 24px+ font size
+5. **Grid alignment** - Use invisible grid (3-column or 4-column layout)
+6. **Professional entrance** - Elements fade + slight translate (15px max), hold for 2-3s, then exit
 
-  const { x, y } = directions[direction];
+### Composition Examples:
 
-  return (
-    <div style={{
-      opacity: progress,
-      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
-    }}>
-      {children}
-    </div>
-  );
-};
+**\u274C BAD - Wall of Text:**
+\`\`\`tsx
+// DON'T: 10 bullet points crammed in a card
+<Card>
+  <ul>
+    {[...10items].map(item => <li>{item.longText}...</li>)}
+  </ul>
+</Card>
 \`\`\`
 
-### Staggered List
-
+**\u2705 GOOD - Single Focus:**
 \`\`\`tsx
-const StaggeredList = ({ children, itemDelay = 5 }) => (
-  <>
-    {React.Children.map(children, (child, i) => (
-      <AnimatedEntry delay={i * itemDelay}>{child}</AnimatedEntry>
-    ))}
-  </>
-);
+// DO: One headline, one supporting stat
+<AbsoluteFill style={{ alignItems: 'center', justifyContent: 'center' }}>
+  <h1 style={{ fontSize: 72, marginBottom: 40 }}>12 hours wasted</h1>
+  <p style={{ fontSize: 28, opacity: 0.7 }}>per week on manual tasks</p>
+</AbsoluteFill>
 \`\`\`
 
-## Interaction Simulation
-
-### Button Press
-
+**\u274C BAD - Flying Cards:**
 \`\`\`tsx
-const ButtonPress = ({ pressFrame, children }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  const isPressing = frame >= pressFrame && frame < pressFrame + 3;
-  const isReleasing = frame >= pressFrame + 3;
-
-  const releaseProgress = isReleasing ? spring({
-    frame: frame - pressFrame - 3,
-    fps,
-    config: { damping: 10, stiffness: 300 }
-  }) : 0;
-
-  const scale = isPressing ? 0.95 : (0.95 + releaseProgress * 0.05);
-
-  return <div style={{ transform: \`scale(\${scale})\` }}>{children}</div>;
-};
+// DON'T: Cards flying from random positions
+<Card style={{
+  transform: \`translateX(\${interpolate(progress, [0,1], [-500, 0])}px)\` // Flies from left
+}} />
 \`\`\`
 
-### Typed Text
-
+**\u2705 GOOD - Subtle Entrance:**
 \`\`\`tsx
-const TypedText = ({ text, startFrame = 0, speed = 2 }) => {
-  const frame = useCurrentFrame();
-  const charsToShow = Math.floor((frame - startFrame) / speed);
-
-  if (frame < startFrame) return null;
-
-  return (
-    <span>
-      {text.slice(0, Math.min(charsToShow, text.length))}
-      {charsToShow < text.length && (
-        <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
-      )}
-    </span>
-  );
-};
+// DO: Gentle spring entrance with minimal movement
+const progress = spring({ frame: frame - startFrame, fps, config: { damping: 20, stiffness: 100 }});
+<Card style={{
+  opacity: progress,
+  transform: \`translateY(\${interpolate(progress, [0,1], [15, 0])}px)\` // Subtle 15px drop
+}} />
 \`\`\`
 
-### Counting Number
+### Layout Grid System:
 
+**Use 12-column grid (like Bootstrap):**
 \`\`\`tsx
-const CountingNumber = ({ from = 0, to, startFrame = 0, duration = 30 }) => {
-  const frame = useCurrentFrame();
-  const progress = interpolate(frame - startFrame, [0, duration], [0, 1], {
-    extrapolateLeft: 'clamp', extrapolateRight: 'clamp'
-  });
-  const eased = 1 - Math.pow(1 - progress, 3);
-  return <span>{Math.round(from + (to - from) * eased)}</span>;
+const GRID = {
+  columns: 12,
+  gutter: 40,
+  padding: 120 // Edge padding
 };
+
+// Center 6 columns for main content
+const contentWidth = (1920 - (GRID.padding * 2) - (GRID.gutter * 5)) / 2;
 \`\`\`
 
-## Timing Guidelines
+**Positioning anchors:**
+- **Top-left:** Brand logo, context (10% from edges)
+- **Center:** Primary headline/stat/demo (50% transform)
+- **Bottom:** CTA or tagline (10% from bottom)
+- **Never:** Random floating between these zones
 
-| Effect | Duration |
-|--------|----------|
-| Entry animation | 15-25 frames |
-| Button press | 10-15 frames |
-| Highlight/focus | 30-60 frames |
-| Stagger delay | 3-8 frames |
-`;
-}
-function generateAnimationComponents() {
-  return `/**
- * Remotion Animation Components
- * Copy these into your project as needed.
- */
-
-import React from 'react';
-import { useCurrentFrame, useVideoConfig, interpolate, spring, Easing } from 'remotion';
-
-// Spring configurations
-export const SPRING_CONFIGS = {
-  snappy: { damping: 15, stiffness: 200, mass: 0.5 },
-  smooth: { damping: 20, stiffness: 100, mass: 1 },
-  bouncy: { damping: 8, stiffness: 150, mass: 0.8 },
-  gentle: { damping: 30, stiffness: 50, mass: 1 },
-};
+---
 
-// Animated entry with direction
-export const AnimatedEntry: React.FC<{
-  children: React.ReactNode;
-  delay?: number;
-  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
-  distance?: number;
-}> = ({ children, delay = 0, direction = 'up', distance = 30 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+## Prerequisites
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: SPRING_CONFIGS.smooth,
-  });
+Before using this skill, ensure you have:
 
-  const directions = {
-    up: { x: 0, y: distance },
-    down: { x: 0, y: -distance },
-    left: { x: distance, y: 0 },
-    right: { x: -distance, y: 0 },
-    none: { x: 0, y: 0 },
-  };
+1. **Load related skills:**
+   \`\`\`
+   remotion-best-practices
+   threejs-fundamentals
+   \`\`\`
 
-  const { x, y } = directions[direction];
+2. **Authenticate:**
+   \`\`\`bash
+   ${cmd2} login
+   \`\`\`
 
-  return (
-    <div style={{
-      opacity: interpolate(progress, [0, 1], [0, 1]),
-      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
-    }}>
-      {children}
-    </div>
-  );
-};
+3. **Remotion installed** (if creating videos):
+   \`\`\`bash
+   pnpm install remotion @remotion/cli
+   \`\`\`
 
-// Scale in animation
-export const ScaleIn: React.FC<{
-  children: React.ReactNode;
-  delay?: number;
-  from?: number;
-}> = ({ children, delay = 0, from = 0.8 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+---
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: SPRING_CONFIGS.bouncy,
-  });
+## Video Creation Workflow
 
-  return (
-    <div style={{
-      opacity: interpolate(progress, [0, 0.5], [0, 1], { extrapolateRight: 'clamp' }),
-      transform: \`scale(\${interpolate(progress, [0, 1], [from, 1])})\`,
-    }}>
-      {children}
-    </div>
-  );
-};
+### Phase 0: Load Skills (MANDATORY)
 
-// Staggered list
-export const StaggeredList: React.FC<{
-  children: React.ReactNode;
-  itemDelay?: number;
-  startFrame?: number;
-}> = ({ children, itemDelay = 5, startFrame = 0 }) => (
-  <>
-    {React.Children.map(children, (child, i) => (
-      <AnimatedEntry delay={startFrame + i * itemDelay}>{child}</AnimatedEntry>
-    ))}
-  </>
-);
+Before ANY video work, invoke these skills:
+\`\`\`
+remotion-best-practices
+threejs-fundamentals
+\`\`\`
 
-// Button press animation
-export const ButtonPress: React.FC<{
-  children: React.ReactNode;
-  pressFrame: number;
-}> = ({ children, pressFrame }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+### Phase 1: Discovery
 
-  const isPressing = frame >= pressFrame && frame < pressFrame + 3;
-  const isReleasing = frame >= pressFrame + 3;
+Explore current directory silently:
+- Understand what the product does (README, docs, code)
+- Find branding: logo, colors, fonts
+- Find UI components to copy into Remotion (buttons, cards, modals, etc.) \u2014 rebuild pixel-perfect, no screenshots
 
-  const releaseProgress = isReleasing ? spring({
-    frame: frame - pressFrame - 3,
-    fps,
-    config: { damping: 10, stiffness: 300 },
-  }) : 0;
+### Phase 2: Video Brief
 
-  const scale = isPressing ? 0.95 : 0.95 + releaseProgress * 0.05;
+Present a brief outline (scenes \u22648s each, duration, assets found) and get user approval before production.
 
-  return <div style={{ transform: \`scale(\${Math.min(1, scale)})\` }}>{children}</div>;
-};
+### Phase 3: Production
 
-// Typed text effect
-export const TypedText: React.FC<{
-  text: string;
-  startFrame?: number;
-  speed?: number;
-  showCursor?: boolean;
-}> = ({ text, startFrame = 0, speed = 2, showCursor = true }) => {
-  const frame = useCurrentFrame();
-  const charsToShow = Math.floor((frame - startFrame) / speed);
+1. **Generate audio assets** - \`${cmd2} video create\` with scenes JSON
+   - IMPORTANT: Music is generated LAST after all voiceover/audio to ensure exact duration match
+2. **Scaffold OUTSIDE project** - \`cd .. && ${cmd2} video init my-video\`
+3. **Copy assets + UI components** from project into video project
+4. **Implement** - follow rules below
 
-  if (frame < startFrame) return null;
+### Phase 4: Render & Thumbnail (REQUIRED)
 
-  const isTyping = charsToShow < text.length;
+\`\`\`bash
+# 1. Render the video (with voiceover and music already included)
+pnpm exec remotion render FullVideo
 
-  return (
-    <span>
-      {text.slice(0, Math.min(charsToShow, text.length))}
-      {showCursor && isTyping && (
-        <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
-      )}
-    </span>
-  );
-};
+# 2. ALWAYS embed thumbnail before delivering
+${cmd2} video thumbnail out/FullVideo.mp4 --frame 60
+\`\`\`
 
-// Counting number
-export const CountingNumber: React.FC<{
-  from?: number;
-  to: number;
-  startFrame?: number;
-  duration?: number;
-  format?: (n: number) => string;
-}> = ({ from = 0, to, startFrame = 0, duration = 30, format = String }) => {
-  const frame = useCurrentFrame();
+**Note:** Remotion videos include per-scene voiceovers and background music baked in during render.
 
-  const progress = interpolate(frame - startFrame, [0, duration], [0, 1], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
+---
 
-  const eased = 1 - Math.pow(1 - progress, 3);
-  const value = Math.round(from + (to - from) * eased);
+## Asset Generation
 
-  return <span>{format(value)}</span>;
-};
+Generate voiceover, music, and visual assets for each scene:
 
-// Floating element
-export const FloatingElement: React.FC<{
-  children: React.ReactNode;
-  amplitude?: number;
-  speed?: number;
-}> = ({ children, amplitude = 3, speed = 0.05 }) => {
-  const frame = useCurrentFrame();
-  const y = Math.sin(frame * speed) * amplitude;
+\`\`\`bash
+cat <<SCENES | ${cmd2} video create --output ./public
+{
+  "scenes": [
+    { 
+      "name": "Hook", 
+      "script": "Watch how we transformed this complex workflow into a single click.",
+      "imageQuery": "modern dashboard interface dark theme",
+      "videoQuery": "abstract tech particles animation"
+    },
+    { 
+      "name": "Demo", 
+      "script": "Our AI analyzes your data in real-time, surfacing insights that matter.",
+      "imageQuery": "data visualization charts analytics"
+    },
+    { 
+      "name": "CTA", 
+      "script": "Start your free trial today. No credit card required.",
+      "imageQuery": "call to action button modern"
+    }
+  ],
+  "voice": "Kore",
+  "voiceSettings": {
+    "style": 0.6,
+    "stability": 0.4,
+    "speed": 0.95
+  },
+  "musicPrompt": "upbeat corporate, positive energy, modern synth"
+}
+SCENES
+\`\`\`
 
-  return <div style={{ transform: \`translateY(\${y}px)\` }}>{children}</div>;
-};
+**Output:**
+- \`public/audio/Hook.mp3\` - scene voiceovers
+- \`public/audio/music.mp3\` - background music (30s max)
+- \`public/video-manifest.json\` - timing and metadata
+- Stock images/videos (if requested)
 
-// Highlight effect
-export const Highlight: React.FC<{
-  children: React.ReactNode;
-  startFrame: number;
-  duration?: number;
-}> = ({ children, startFrame, duration = 45 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+---
 
-  const isActive = frame >= startFrame && frame < startFrame + duration;
-  const progress = spring({
-    frame: isActive ? frame - startFrame : 0,
-    fps,
-    config: SPRING_CONFIGS.snappy,
-  });
+## Core Video Rules
 
-  const scale = isActive ? 1 + progress * 0.03 : 1;
+${VIDEO_RULE_CONTENTS.map((rule) => rule.content).join("\n\n---\n\n")}
 
-  return (
-    <div style={{
-      transform: \`scale(\${scale})\`,
-      boxShadow: isActive ? \`0 \${8 + progress * 12}px \${16 + progress * 24}px rgba(0,0,0,0.15)\` : undefined,
-    }}>
-      {children}
-    </div>
-  );
-};
+## Useful Commands
 
-// Cursor pointer
-export const CursorPointer: React.FC<{
-  path: Array<{ x: number; y: number; frame: number }>;
-  size?: number;
-}> = ({ path, size = 24 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+\`\`\`bash
+# Generate video assets
+${cmd2} video create < scenes.json
+cat scenes.json | ${cmd2} video create --output ./public
 
-  let x = path[0].x;
-  let y = path[0].y;
+# Initialize Remotion project
+${cmd2} video init my-video
 
-  for (let i = 0; i < path.length - 1; i++) {
-    const from = path[i];
-    const to = path[i + 1];
+# Embed thumbnail
+${cmd2} video thumbnail out/video.mp4 --frame 60
 
-    if (frame >= from.frame && frame <= to.frame) {
-      const progress = spring({
-        frame: frame - from.frame,
-        fps,
-        config: { damping: 20, stiffness: 80 },
-      });
+# Search for stock assets
+${cmd2} images search "mountain landscape" --limit 10
+${cmd2} videos search "ocean waves" --limit 5
 
-      x = interpolate(progress, [0, 1], [from.x, to.x]);
-      y = interpolate(progress, [0, 1], [from.y, to.y]);
-      break;
-    } else if (frame > to.frame) {
-      x = to.x;
-      y = to.y;
-    }
-  }
+# Generate audio
+${cmd2} audio generate "Your script here" --voice Kore
+${cmd2} music generate "upbeat corporate" --duration 30
+\`\`\`
 
-  return (
-    <div style={{
-      position: 'absolute',
-      left: \`\${x}%\`,
-      top: \`\${y}%\`,
-      transform: 'translate(-50%, -50%)',
-      zIndex: 1000,
-      pointerEvents: 'none',
-    }}>
-      <svg width={size} height={size} viewBox="0 0 24 24">
-        <path
-          d="M4 4 L4 20 L9 15 L13 22 L16 20 L12 13 L19 13 Z"
-          fill="white"
-          stroke="black"
-          strokeWidth="1.5"
-        />
-      </svg>
-    </div>
-  );
-};
-`;
-}
-function generateComponentIntegrationRule(b) {
-  const cmd2 = b.name;
-  return `---
-name: component-integration
-description: Integrating app components into Remotion videos
 ---
 
-# Integrating App Components into Remotion
+## Best Practices
 
-Use your actual React components OR replicate them pixel-perfect in Remotion videos.
+1. **Keep scenes under 8 seconds** without cuts or major action
+2. **Use spring physics** for all animations, never linear
+3. **Rebuild UI components** in React/CSS, no screenshots
+4. **Test with thumbnail embedding** before delivering
+5. **Music volume at 30%** (30-40% less loud than voice)
+6. **Read all video rules** in Phase 0 before implementation
 
-## Two Approaches
-
-### Approach A: Replicate UI (Recommended)
-Read your app's components, note every visual detail, build identical-looking components in Remotion.
+---
 
-**Why?** Your app components have hooks, state, and dependencies that don't work in Remotion. Replication is cleaner.
+## Troubleshooting
 
-### Approach B: Copy Components (When simple enough)
-For truly simple presentational components, you can copy them directly.
+If you encounter issues:
+- Check authentication: \`${cmd2} whoami\`
+- Verify asset generation: check \`video-manifest.json\`
+- Voiceover flat: increase style (0.5-0.7), decrease stability (0.3-0.5)
+- Duration mismatch: adjust \`voiceSettings.speed\` or add padding in Remotion
 
-\`\`\`bash
-cp -r ../my-app/src/components/Card ./src/app-components/
-cp ../my-app/tailwind.config.js ./
-\`\`\`
+For detailed troubleshooting, see "Known Issues" section above.
+`;
+}
 
+// src/commands/skill/generate-presentation-skill.ts
+function generatePresentationSkillContent(context) {
+  const { name, cmd: cmd2, displayName } = context;
+  return `---
+name: ${name}-presentation
+description: Use when user asks to create presentations (slides, decks, pitch decks). Generates AI-powered presentations with structured content and professional design.
 ---
 
-## Adapting Components
+# ${displayName} Presentation CLI
 
-### 1. Remove Interactivity
+Create professional presentations (slides, decks, pitch decks) directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content. Also supports searching for stock images and videos.
 
-\`\`\`tsx
-// BEFORE (interactive app)
-<Button onClick={handleSubmit}>Submit</Button>
-
-// AFTER (video-ready)
-<Button disabled style={{ pointerEvents: 'none' }}>Submit</Button>
-\`\`\`
+---
 
-### 2. Replace Dynamic Data
+## Authentication
 
-\`\`\`tsx
-// BEFORE (fetches from API)
-const { data } = useQuery('GET_USERS');
+\`\`\`bash
+# Login via OAuth
+${cmd2} login
 
-// AFTER (scripted data)
-const data = [
-  { id: 1, name: 'Sarah Chen', role: 'Designer' },
-  { id: 2, name: 'Alex Rivera', role: 'Developer' },
-];
+# Or set API key
+export ${name.toUpperCase().replace(/-/g, "_")}_API_KEY="your-key-here"
 \`\`\`
 
-### 3. Wrap with Animation
+---
 
-\`\`\`tsx
-import { FadeIn, SlideUp } from '../shared';
+## Creating Presentations
 
-<FadeIn delay={0}>
-  <Navbar />
-</FadeIn>
+### From Text
 
-<SlideUp delay={15}>
-  <Sidebar />
-</SlideUp>
+\`\`\`bash
+${cmd2} create "AI-powered product analytics platform"
 \`\`\`
 
----
-
-## Common Showcase Patterns
+### From File
 
-### Dashboard with Staggered Widgets
-
-\`\`\`tsx
-const DashboardShowcase = () => {
-  return (
-    <DashboardLayout>
-      <FadeIn delay={0}>
-        <Header user={mockUser} />
-      </FadeIn>
-
-      <div className="grid grid-cols-3 gap-4">
-        <SlideUp delay={15}><StatsWidget data={revenueData} /></SlideUp>
-        <SlideUp delay={23}><StatsWidget data={usersData} /></SlideUp>
-        <SlideUp delay={31}><StatsWidget data={ordersData} /></SlideUp>
-      </div>
-
-      <FadeIn delay={45}>
-        <ChartWidget data={chartData} />
-      </FadeIn>
-    </DashboardLayout>
-  );
-};
+\`\`\`bash
+${cmd2} create --file product-brief.md
 \`\`\`
 
-### Form with Typing Simulation
+### From URL
 
-\`\`\`tsx
-const FormShowcase = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  return (
-    <LoginForm>
-      <Input
-        label="Email"
-        value={<TextReveal text="sarah@example.com" startFrame={0} />}
-      />
-      <Input
-        label="Password"
-        type="password"
-        value={frame > fps * 2 ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
-      />
-    </LoginForm>
-  );
-};
+\`\`\`bash
+${cmd2} create --url https://company.com/product
 \`\`\`
 
-### Modal Slide-In
-
-\`\`\`tsx
-const ModalShowcase = () => {
-  const frame = useCurrentFrame();
-  const showModal = frame > 30;
+### From Piped Content
 
-  return (
-    <>
-      <PageBackground />
-      {showModal && (
-        <>
-          <FadeIn delay={30}>
-            <div className="absolute inset-0 bg-black/50" />
-          </FadeIn>
-          <SlideUp delay={35}>
-            <ConfirmationModal title="Confirm Delete" message="Are you sure?" isOpen />
-          </SlideUp>
-        </>
-      )}
-    </>
-  );
-};
+\`\`\`bash
+cat research.txt | ${cmd2} create
+pbpaste | ${cmd2} create
 \`\`\`
 
----
-
-## Troubleshooting
+### Advanced Options
 
-### Component uses hooks that don't work
-\`\`\`tsx
-// PROBLEM: useRouter, useAuth won't work
-// SOLUTION: Pass as props or mock the context
-const MockAuthProvider = ({ children }) => (
-  <AuthContext.Provider value={{ user: mockUser }}>
-    {children}
-  </AuthContext.Provider>
-);
+\`\`\`bash
+${cmd2} create "Topic" \\
+  --slides 10 \\
+  --style professional \\
+  --branding my-brand \\
+  --template minimal \\
+  --output presentation.zip
 \`\`\`
 
-### Component too large for frame
-\`\`\`tsx
-// Use transform scale to fit
-<div style={{ transform: 'scale(0.8)', transformOrigin: 'top left' }}>
-  <LargeComponent />
-</div>
-\`\`\`
-`;
-}
-function generateProjectVideoWorkflowRule(b) {
-  const cmd2 = b.name;
-  return `---
-name: project-video-workflow
-description: Create promotional videos using actual project UI
 ---
 
-# Project-Based Video Workflow
-
-Create promotional videos using **your actual project's UI** replicated in Remotion.
+## Presentation Options
 
-## When to Use
+- **\`--slides <count>\`** - Number of slides (default: 8-12 based on content)
+- **\`--style <style>\`** - Presentation style: professional, creative, minimal, corporate
+- **\`--branding <name>\`** - Use saved branding profile
+- **\`--template <name>\`** - Design template to use
+- **\`--output <file>\`** - Export to file (.zip, .pptx, .pdf)
+- **\`--format <format>\`** - Output format: human, json, quiet
 
-- User has existing React/Next.js/Vue project
-- User wants "product demo", "feature walkthrough", or "promotional video"
-- User mentions showcasing specific features/UI
-- User wants to animate their actual app interface
+---
 
-## Quick Start
+## Managing Presentations
 
 \`\`\`bash
-# 1. Scaffold video project
-${cmd2} video init my-app-promo
-cd my-app-promo
+# List all presentations
+${cmd2} list
+${cmd2} list --format json
+
+# Get presentation details
+${cmd2} get <id-or-slug>
 
-# 2. Generate audio assets
-${cmd2} video create \\
-  --script "Introducing our new app..." \\
-  --output ./public
+# Export presentation
+${cmd2} export <id-or-slug> -o presentation.zip
 
-# 3. Build scenes replicating your app's UI
+# Import presentation
+${cmd2} import ./presentation.zip
 
-# 4. Preview & Render
-npm run dev
-npm run render
+# Delete presentation
+${cmd2} delete <id-or-slug>
 \`\`\`
 
 ---
 
-## Full Workflow
-
-### Step 1: Analyze Project
+## Branding Management
 
 \`\`\`bash
-# Check framework
-cat package.json | grep -E "react|next|vue"
+# List saved brands
+${cmd2} branding list
 
-# List components
-ls -la src/components/
+# Extract branding from website
+${cmd2} branding extract https://company.com
 
-# Get colors
-cat tailwind.config.* | grep -A 30 "colors"
+# Use branding in presentation
+${cmd2} create "Topic" --branding company-brand
 \`\`\`
 
-**Identify:**
-- Framework: React, Next.js, Vue
-- Styling: Tailwind, CSS modules, styled-components
-- Key components: Forms, cards, modals, dashboards
-- Views to showcase
-
-### Step 2: Document Brand
+---
 
-\`\`\`markdown
-## Brand: [App Name]
+## Stock Asset Search
 
-### Colors (from tailwind.config)
-- Background: #0f172a
-- Surface: #1e293b
-- Primary: #14b8a6
-- Text: #ffffff
+\`\`\`bash
+# Search for images
+${cmd2} images search "mountain landscape" --limit 10
+${cmd2} images search "business team" --format json
 
-### Key Components
-1. Sidebar - Dark bg, navigation items
-2. Dashboard - Stats cards, charts
-3. Modal - Overlay, card
+# Search for videos
+${cmd2} videos search "ocean waves" --limit 5
+${cmd2} videos search "city timelapse" --orientation landscape
 \`\`\`
 
-### Step 3: Plan Scenes
-
-\`\`\`markdown
-## Scene Plan
+---
 
-### Scene 1: Intro (3s)
-- Logo centered
-- Tagline fades up
+## Best Practices
 
-### Scene 2: Dashboard (5s)
-- Stats widgets stagger in
-- Chart animates
+1. **Provide context** - More input = better presentations
+2. **Use branding** - Extract and apply brand consistency
+3. **Review content** - AI-generated content should be reviewed
+4. **Export for sharing** - Use \`--output\` to create shareable files
+5. **Iterate** - Regenerate specific slides if needed
 
-### Scene 3: Feature Demo (5s)
-- Sidebar slides in
-- Selection animates
+---
 
-### Scene 4: CTA (3s)
-- Logo + button
-\`\`\`
+## Troubleshooting
 
-### Step 4: Build Scenes
+**Authentication Issues:**
+\`\`\`bash
+# Check current user
+${cmd2} whoami
 
-Create scenes in \`src/remotion/scenes/\` that replicate your UI:
+# Re-authenticate
+${cmd2} logout
+${cmd2} login
+\`\`\`
 
-\`\`\`tsx
-// src/remotion/scenes/DashboardScene.tsx
-import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
+**Generation Failures:**
+- Ensure input is clear and has enough context
+- Try different styles or templates
+- Check API status and quotas
 
-export const DASHBOARD_SCENE_DURATION = 150;
+**Export Issues:**
+- Verify output format is supported
+- Check file permissions in output directory
+- Ensure presentation ID is correct
 
-const mockData = {
-  revenue: 125000,
-  users: 1234,
-  orders: 567,
-};
+---
 
-export const DashboardScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+## Examples
 
-  return (
-    <AbsoluteFill style={{ backgroundColor: "#0f172a", padding: 40 }}>
-      {/* Replicate your dashboard layout here */}
-      {/* Use EXACT colors from your tailwind.config */}
-    </AbsoluteFill>
-  );
-};
+**Quick pitch deck:**
+\`\`\`bash
+${cmd2} create "SaaS analytics platform for e-commerce" --slides 8 --style professional
 \`\`\`
 
-### Step 5: Generate Audio
-
+**From product brief:**
 \`\`\`bash
-${cmd2} video create \\
-  --script "Introducing [App]. The fastest way to..." \\
-  --music-prompt "modern uplifting tech" \\
-  --output ./public
+${cmd2} create --file brief.md --branding acme --output pitch.zip
 \`\`\`
 
-### Step 6: Render
-
+**Research presentation:**
 \`\`\`bash
-npm run dev      # Preview
-npm run render   # Final video
+cat research-notes.txt | ${cmd2} create --slides 15 --style minimal
 \`\`\`
-
----
-
-## Tips
-
-1. **Start simple** - Get basic scenes working before adding complex animations
-2. **Use mock data** - Pre-define realistic demo data
-3. **Match voiceover timing** - Sync visual transitions with narration
-4. **Keep scenes focused** - One main idea per scene
-5. **Test at 1x speed** - Preview at normal speed to catch timing issues
 `;
 }
-function generateAllSkillFiles(b) {
-  return {
-    "SKILL.md": generateSkillContent(b),
-    "rules/presentations.md": generatePresentationsRule(b),
-    "rules/video.md": generateVideoRule(b),
-    "rules/motion-standards.md": generateMotionStandardsRule(),
-    "rules/micro-interactions.md": generateMicroInteractionsRule(),
-    "rules/component-integration.md": generateComponentIntegrationRule(b),
-    "rules/project-video-workflow.md": generateProjectVideoWorkflowRule(b),
-    "assets/animation-components.tsx": generateAnimationComponents()
-  };
-}
-var EDITORS = [
+
+// src/commands/skill/installer.ts
+import { mkdirSync, writeFileSync, existsSync as existsSync2, rmSync } from "fs";
+import { join, resolve as resolve4, relative } from "path";
+import { homedir } from "os";
+
+// src/commands/skill/editors.ts
+var SUPPORTED_EDITORS = [
   { name: "Claude Code", dir: ".claude" },
   { name: "Cursor", dir: ".cursor" },
   { name: "Codex", dir: ".codex" },
@@ -4737,142 +4327,195 @@ var EDITORS = [
   { name: "Windsurf", dir: ".windsurf" },
   { name: "Agent", dir: ".agent" }
 ];
-var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skill for AI coding assistants`).addHelpText(
-  "after",
-  `
-${chalk12.bold("Examples:")}
-  ${chalk12.gray("# Install skill for all detected editors")}
-  $ ${brand.name} skill install
-
-  ${chalk12.gray("# Install to specific directory")}
-  $ ${brand.name} skill install --dir ~/.claude
-
-  ${chalk12.gray("# Install without remotion-best-practices")}
-  $ ${brand.name} skill install --skip-remotion
 
-  ${chalk12.gray("# Show skill content")}
-  $ ${brand.name} skill show
-`
-);
-skillCommand.command("install").description(`Install the ${brand.displayName} skill for AI coding assistants`).option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").option("--skip-remotion", "Skip installing remotion-best-practices skill").action(async (options) => {
-  const installed = [];
-  const skipped = [];
-  const errors = [];
+// src/commands/skill/installer.ts
+function validatePath(basePath, targetPath) {
+  const resolvedBase = resolve4(basePath);
+  const resolvedTarget = resolve4(basePath, targetPath);
+  const relativePath = relative(resolvedBase, resolvedTarget);
+  if (relativePath.startsWith("..") || resolve4(resolvedTarget) !== resolvedTarget.replace(/\.\./g, "")) {
+    throw new Error(`Invalid path: "${targetPath}" would escape base directory`);
+  }
+  return resolvedTarget;
+}
+function installSkillToPath(skillPath, content) {
+  const skillFile = join(skillPath, "SKILL.md");
+  mkdirSync(skillPath, { recursive: true });
+  writeFileSync(skillFile, content, "utf-8");
+}
+function installSkill(skillName, content, options = {}) {
+  const result = {
+    installed: [],
+    skipped: [],
+    errors: []
+  };
   const baseDir = options.local ? process.cwd() : homedir();
-  const skillFiles = generateAllSkillFiles(brand);
   if (options.dir) {
-    const skillPath = join(options.dir, "skills", brand.name);
     try {
-      installSkill(skillPath, skillFiles, options.force);
-      installed.push(options.dir);
+      const resolvedDir = resolve4(options.dir);
+      const skillPath = validatePath(resolvedDir, join("skills", skillName));
+      installSkillToPath(skillPath, content);
+      result.installed.push(options.dir);
     } catch (err) {
-      errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
+      result.errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
     }
   } else {
-    for (const editor of EDITORS) {
+    for (const editor of SUPPORTED_EDITORS) {
       const editorDir = join(baseDir, editor.dir);
-      const skillPath = join(editorDir, "skills", brand.name);
+      const skillPath = join(editorDir, "skills", skillName);
       const skillFile = join(skillPath, "SKILL.md");
       if (!existsSync2(editorDir)) {
         continue;
       }
       if (existsSync2(skillFile) && !options.force) {
-        skipped.push(editor.name);
+        result.skipped.push(editor.name);
         continue;
       }
       try {
-        installSkill(skillPath, skillFiles, options.force);
-        installed.push(editor.name);
+        installSkillToPath(skillPath, content);
+        result.installed.push(editor.name);
       } catch (err) {
-        errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
+        result.errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
       }
     }
   }
-  console.log();
-  if (installed.length > 0) {
-    success("Skill installed successfully");
-    console.log();
-    keyValue("Installed to", installed.join(", "));
-    keyValue("Files", Object.keys(skillFiles).length.toString());
+  return result;
+}
+function uninstallSkill(skillName, options = {}) {
+  const result = {
+    removed: [],
+    errors: []
+  };
+  const baseDir = options.local ? process.cwd() : homedir();
+  for (const editor of SUPPORTED_EDITORS) {
+    const skillPath = join(baseDir, editor.dir, "skills", skillName);
+    if (existsSync2(skillPath)) {
+      try {
+        rmSync(skillPath, { recursive: true });
+        result.removed.push(editor.name);
+      } catch (err) {
+        result.errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
   }
-  if (skipped.length > 0) {
-    console.log();
-    info(`Skipped (already exists): ${skipped.join(", ")}`);
-    console.log(chalk12.gray("  Use --force to overwrite"));
+  return result;
+}
+function getSupportedEditorNames() {
+  return SUPPORTED_EDITORS.map((e) => e.name);
+}
+
+// src/commands/skill/index.ts
+var skillContext = {
+  name: brand.name,
+  cmd: brand.commands[0],
+  displayName: brand.displayName
+};
+var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skills for AI coding assistants`).addHelpText(
+  "after",
+  `
+${chalk12.bold("Examples:")}
+  ${chalk12.gray("# Install video skill")}
+  $ ${brand.commands[0]} skill install video
+
+  ${chalk12.gray("# Install presentation skill")}
+  $ ${brand.commands[0]} skill install presentation
+
+  ${chalk12.gray("# Install both skills")}
+  $ ${brand.commands[0]} skill install
+
+  ${chalk12.gray("# Install to specific directory")}
+  $ ${brand.commands[0]} skill install video --dir ~/.claude
+
+  ${chalk12.gray("# Show skill content")}
+  $ ${brand.commands[0]} skill show video
+`
+);
+skillCommand.command("install").description(`Install ${brand.displayName} skills for AI coding assistants`).argument("[type]", "Skill type: video, presentation, or omit for both").option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").action(async (type, options) => {
+  const skillsToInstall = [];
+  if (!type || type === "video") {
+    skillsToInstall.push({
+      name: `${brand.name}-video`,
+      content: generateVideoSkillContent(skillContext)
+    });
   }
-  if (errors.length > 0) {
-    console.log();
-    for (const err of errors) {
-      error(err);
-    }
+  if (!type || type === "presentation") {
+    skillsToInstall.push({
+      name: `${brand.name}-presentation`,
+      content: generatePresentationSkillContent(skillContext)
+    });
   }
-  if (installed.length === 0 && skipped.length === 0 && errors.length === 0) {
-    info("No supported AI coding assistants detected.");
-    console.log();
-    console.log(chalk12.gray("Supported editors: " + EDITORS.map((e) => e.name).join(", ")));
-    console.log(chalk12.gray("Use --dir <path> to install to a specific directory"));
+  if (type && type !== "video" && type !== "presentation") {
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
   }
-  if (installed.length > 0 && !options.skipRemotion) {
-    console.log();
-    info("Installing remotion-best-practices skill...");
-    try {
-      execSync("npx -y skills add https://github.com/remotion-dev/skills --skill remotion-best-practices --all", {
-        stdio: "inherit",
-        timeout: 6e4
-      });
-      success("remotion-best-practices skill installed");
-    } catch (err) {
-      warn("Could not install remotion-best-practices skill automatically");
-      console.log(chalk12.gray("  Run manually: npx skills add remotion-dev/skills"));
+  console.log();
+  for (const skill of skillsToInstall) {
+    info(`Installing ${skill.name}...`);
+    const result = installSkill(skill.name, skill.content, {
+      dir: options.dir,
+      local: options.local,
+      force: options.force
+    });
+    if (result.installed.length > 0) {
+      success(`${skill.name} installed successfully`);
+      keyValue("  Installed to", result.installed.join(", "));
     }
+    if (result.skipped.length > 0) {
+      info(`  Skipped (already exists): ${result.skipped.join(", ")}`);
+      console.log(chalk12.gray("    Use --force to overwrite"));
+    }
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        error(`  ${err}`);
+      }
+    }
+    if (result.installed.length === 0 && result.skipped.length === 0 && result.errors.length === 0) {
+      info("  No supported AI coding assistants detected");
+      console.log(chalk12.gray("  Supported editors: " + getSupportedEditorNames().join(", ")));
+      console.log(chalk12.gray("  Use --dir <path> to install to a specific directory"));
+    }
+    console.log();
   }
-  console.log();
 });
-skillCommand.command("show").description("Display the skill content").option("-a, --all", "Show all files").action((options) => {
-  const files = generateAllSkillFiles(brand);
-  if (options.all) {
-    for (const [path2, content] of Object.entries(files)) {
-      console.log(chalk12.bold.cyan(`
-=== ${path2} ===
-`));
-      console.log(content);
-    }
+skillCommand.command("show").description("Display skill content").argument("[type]", "Skill type: video or presentation (default: video)").action((type = "video") => {
+  if (type === "video") {
+    console.log(generateVideoSkillContent(skillContext));
+  } else if (type === "presentation") {
+    console.log(generatePresentationSkillContent(skillContext));
   } else {
-    console.log(files["SKILL.md"]);
-    console.log(chalk12.gray("\nUse --all to show all files"));
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
   }
 });
-skillCommand.command("uninstall").description(`Remove the ${brand.displayName} skill from AI coding assistants`).option("-g, --global", "Uninstall globally (from home directory)", true).option("-l, --local", "Uninstall locally (from current directory)").action(async (options) => {
-  const { rmSync } = await import("fs");
-  const removed = [];
-  const baseDir = options.local ? process.cwd() : homedir();
-  for (const editor of EDITORS) {
-    const skillPath = join(baseDir, editor.dir, "skills", brand.name);
-    if (existsSync2(skillPath)) {
-      try {
-        rmSync(skillPath, { recursive: true });
-        removed.push(editor.name);
-      } catch {
-      }
-    }
+skillCommand.command("uninstall").description(`Remove ${brand.displayName} skills from AI coding assistants`).argument("[type]", "Skill type: video, presentation, or omit for both").option("-g, --global", "Uninstall globally (from home directory)", true).option("-l, --local", "Uninstall locally (from current directory)").action(async (type, options) => {
+  const skillsToRemove = [];
+  if (!type || type === "video") {
+    skillsToRemove.push(`${brand.name}-video`);
+  }
+  if (!type || type === "presentation") {
+    skillsToRemove.push(`${brand.name}-presentation`);
+  }
+  if (type && type !== "video" && type !== "presentation") {
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
   }
   console.log();
-  if (removed.length > 0) {
-    success("Skill uninstalled");
-    keyValue("Removed from", removed.join(", "));
-  } else {
-    info("No installed skills found");
+  for (const skillName of skillsToRemove) {
+    const result = uninstallSkill(skillName, { local: options.local });
+    if (result.removed.length > 0) {
+      success(`${skillName} uninstalled`);
+      keyValue("  Removed from", result.removed.join(", "));
+    } else {
+      info(`  ${skillName} not found`);
+    }
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        warn(`  Failed to remove: ${err}`);
+      }
+    }
   }
   console.log();
 });
-function installSkill(skillPath, files, force) {
-  mkdirSync(join(skillPath, "rules"), { recursive: true });
-  mkdirSync(join(skillPath, "assets"), { recursive: true });
-  for (const [relativePath, content] of Object.entries(files)) {
-    const filePath = join(skillPath, relativePath);
-    writeFileSync(filePath, content, "utf-8");
-  }
-}
 
 // src/commands/tts.ts
 init_api();
@@ -5130,7 +4773,7 @@ async function downloadFile2(url, outputPath) {
   const buffer = await response.arrayBuffer();
   await writeFile4(outputPath, Buffer.from(buffer));
 }
-var mixCommand = new Command17("create").description("Mix audio tracks into a video").requiredOption("--video <url>", "Input video file/URL").option("--music <url>", "Background music file/URL").option("--voice <url>", "Voiceover file/URL").option("--music-volume <percent>", "Music volume 0-100", "50").option("--voice-volume <percent>", "Voice volume 0-100", "100").option("-o, --output <path>", "Output file path").option("--no-wait", "Do not wait for completion").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var mixCommand = new Command17("create").description("Mix audio tracks into a video (music will loop to match video duration)").requiredOption("--video <url>", "Input video file/URL").option("--music <url>", "Background music file/URL (will loop if shorter than video)").option("--voice <url>", "Voiceover file/URL").option("--music-volume <percent>", "Music volume 0-100 (default: 30, recommended for mix with voice)", "30").option("--voice-volume <percent>", "Voice volume 0-100", "100").option("-o, --output <path>", "Output file path").option("--no-wait", "Do not wait for completion").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   if (!options.music && !options.voice) {
     error("At least one of --music or --voice must be provided");
     process.exit(EXIT_CODES.INVALID_INPUT);
@@ -5299,9 +4942,10 @@ init_output();
 init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
-import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm } from "fs/promises";
-import { join as join2, resolve as resolve4 } from "path";
-import { execSync as execSync2, spawn } from "child_process";
+import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm, cp } from "fs/promises";
+import { join as join2, resolve as resolve5 } from "path";
+import { execSync, spawn } from "child_process";
+import ffmpegPath from "ffmpeg-static";
 var DEFAULT_TEMPLATE = "inizio-inc/remotion-composition";
 var DEFAULT_FPS = 30;
 function parseScriptIntoSections(script) {
@@ -5391,6 +5035,26 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
   }
   return results;
 }
+async function readStdin2() {
+  if (process.stdin.isTTY) {
+    return null;
+  }
+  return new Promise((resolve6) => {
+    let data = "";
+    process.stdin.setEncoding("utf-8");
+    process.stdin.on("data", (chunk) => {
+      data += chunk;
+    });
+    process.stdin.on("end", () => resolve6(data.trim() || null));
+    process.stdin.on("error", () => resolve6(null));
+    setTimeout(() => {
+      if (!data) resolve6(null);
+    }, 100);
+  });
+}
+function toFilename(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
 async function downloadFile3(url, outputPath) {
   if (url.startsWith("data:")) {
     const matches = url.match(/^data:[^;]+;base64,(.+)$/);
@@ -5420,72 +5084,207 @@ function getExtension(url) {
   }
   return "jpg";
 }
-var createCommand2 = new Command19("create").description("Create video assets (voiceover, music, images)").option("-s, --script <text>", "Narration script text").option("--script-file <path>", "Path to script file").option("-t, --topic <text>", "Topic for image search (inferred from script if not provided)").option("-d, --duration <seconds>", "Target duration (auto-calculated from script if not set)").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description (auto-generated if not provided)").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var createCommand2 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing...").start() : null;
   try {
-    let script = options.script;
-    if (options.scriptFile) {
+    const stdinData = await readStdin2();
+    let scenesInput = null;
+    if (stdinData) {
       try {
-        script = await readFile2(options.scriptFile, "utf-8");
-      } catch (err) {
-        spinner?.stop();
-        error(`Failed to read script file: ${err instanceof Error ? err.message : "Unknown error"}`);
-        process.exit(EXIT_CODES.INVALID_INPUT);
+        const parsed = JSON.parse(stdinData);
+        if (parsed.scenes && Array.isArray(parsed.scenes)) {
+          scenesInput = parsed;
+        }
+      } catch {
       }
     }
-    if (!script || script.trim().length === 0) {
-      spinner?.stop();
-      error("Either --script or --script-file is required");
-      process.exit(EXIT_CODES.INVALID_INPUT);
-    }
-    script = script.trim();
-    const topic = options.topic || script.split(".")[0].slice(0, 50);
-    const numImages = parseInt(options.numImages, 10);
-    if (isNaN(numImages) || numImages < 1 || numImages > 20) {
-      spinner?.stop();
-      error("Number of images must be between 1 and 20");
-      process.exit(EXIT_CODES.INVALID_INPUT);
+    if (!scenesInput && options.scriptFile) {
+      try {
+        const fileContent = await readFile2(options.scriptFile, "utf-8");
+        const parsed = JSON.parse(fileContent);
+        if (parsed.scenes && Array.isArray(parsed.scenes)) {
+          scenesInput = parsed;
+        }
+      } catch {
+      }
     }
+    const voice = scenesInput?.voice || options.voice;
+    const musicPrompt = scenesInput?.musicPrompt || options.musicPrompt || "uplifting background music, positive energy";
     const audioDir = join2(options.output, "audio");
     const imagesDir = join2(options.output, "images");
+    const videosDir = join2(options.output, "videos");
     if (spinner) spinner.text = "Creating directories...";
     await mkdir(audioDir, { recursive: true });
     await mkdir(imagesDir, { recursive: true });
+    await mkdir(videosDir, { recursive: true });
     let totalCost = 0;
-    if (spinner) spinner.text = "Generating voiceover...";
-    const ttsResult = await generateSpeech({
-      text: script,
-      options: { voice: options.voice }
-    });
-    const voiceoverPath = join2(audioDir, `voiceover.${ttsResult.format}`);
-    await writeFile5(voiceoverPath, ttsResult.audioData);
-    totalCost += ttsResult.cost;
-    const voiceoverInfo = {
-      path: `audio/voiceover.${ttsResult.format}`,
-      duration: ttsResult.duration,
-      voice: options.voice,
-      provider: ttsResult.provider,
-      cost: ttsResult.cost,
-      timestamps: ttsResult.timestamps
-      // Include for word-level sync
-    };
-    if (format === "human") {
-      spinner?.stop();
-      success(`Voiceover: ${voiceoverPath} (${ttsResult.duration.toFixed(1)}s)`);
-      spinner?.start();
-    }
-    if (spinner) spinner.text = "Analyzing script sections...";
-    const sectionTexts = parseScriptIntoSections(script);
-    const sections = calculateSectionTiming(sectionTexts, ttsResult.duration, DEFAULT_FPS, ttsResult.timestamps);
-    if (format === "human") {
-      spinner?.stop();
-      const timingSource = ttsResult.timestamps ? "TTS timestamps" : "word estimation";
-      success(`Sections: ${sections.length} sections (timing from ${timingSource})`);
-      spinner?.start();
+    let scenes = [];
+    let totalDuration = 0;
+    const allImages = [];
+    const allVideos = [];
+    if (scenesInput && scenesInput.scenes.length > 0) {
+      if (format === "human") {
+        spinner?.stop();
+        info(`Processing ${scenesInput.scenes.length} scenes...`);
+        spinner?.start();
+      }
+      let currentTime = 0;
+      for (let i = 0; i < scenesInput.scenes.length; i++) {
+        const scene = scenesInput.scenes[i];
+        const filename = toFilename(scene.name);
+        if (spinner) spinner.text = `[${scene.name}] Generating speech...`;
+        const ttsResult = await generateSpeech({
+          text: scene.script,
+          options: {
+            voice,
+            voiceSettings: scenesInput.voiceSettings
+          }
+        });
+        const audioPath = join2(audioDir, `${filename}.${ttsResult.format}`);
+        await writeFile5(audioPath, ttsResult.audioData);
+        totalCost += ttsResult.cost;
+        const durationInSeconds = ttsResult.duration;
+        const durationInFrames = Math.round(durationInSeconds * DEFAULT_FPS);
+        const sceneData = {
+          id: i + 1,
+          name: scene.name,
+          text: scene.script,
+          wordCount: scene.script.split(/\s+/).length,
+          startTime: currentTime,
+          endTime: currentTime + durationInSeconds,
+          durationInSeconds,
+          durationInFrames,
+          audioPath: `audio/${filename}.${ttsResult.format}`
+        };
+        if (scene.imageQuery) {
+          if (spinner) spinner.text = `[${scene.name}] Searching image...`;
+          try {
+            const imageResults = await searchImages({
+              query: scene.imageQuery,
+              options: { maxResults: 1, size: "large", safeSearch: true }
+            });
+            const imgs = imageResults.data.results.flatMap((r) => r.results);
+            totalCost += imageResults.data.totalCost;
+            if (imgs.length > 0) {
+              const img = imgs[0];
+              const ext = getExtension(img.url);
+              const imgFilename = `${filename}.${ext}`;
+              const imgPath = join2(imagesDir, imgFilename);
+              await downloadFile3(img.url, imgPath);
+              sceneData.imagePath = `images/${imgFilename}`;
+              allImages.push({
+                path: `images/${imgFilename}`,
+                url: img.url,
+                width: img.width,
+                height: img.height,
+                query: scene.imageQuery
+              });
+            }
+          } catch (err) {
+            if (format === "human") {
+              spinner?.stop();
+              warn(`[${scene.name}] Image search failed: ${err instanceof Error ? err.message : "Unknown"}`);
+              spinner?.start();
+            }
+          }
+        }
+        if (scene.videoQuery) {
+          if (spinner) spinner.text = `[${scene.name}] Searching video...`;
+          try {
+            const videoResults = await searchVideos({
+              query: scene.videoQuery,
+              options: { maxResults: 1, license: "free" }
+            });
+            const vids = videoResults.data.results.flatMap((r) => r.results);
+            totalCost += videoResults.data.totalCost;
+            if (vids.length > 0) {
+              const vid = vids[0];
+              const vidUrl = vid.previewUrl || vid.downloadUrl;
+              if (vidUrl) {
+                const vidFilename = `${filename}.mp4`;
+                const vidPath = join2(videosDir, vidFilename);
+                await downloadFile3(vidUrl, vidPath);
+                sceneData.videoPath = `videos/${vidFilename}`;
+                allVideos.push({
+                  path: `videos/${vidFilename}`,
+                  url: vidUrl,
+                  width: vid.width,
+                  height: vid.height,
+                  duration: vid.duration,
+                  query: scene.videoQuery
+                });
+              }
+            }
+          } catch (err) {
+            if (format === "human") {
+              spinner?.stop();
+              warn(`[${scene.name}] Video search failed: ${err instanceof Error ? err.message : "Unknown"}`);
+              spinner?.start();
+            }
+          }
+        }
+        scenes.push(sceneData);
+        currentTime += durationInSeconds;
+        totalDuration += durationInSeconds;
+        if (format === "human") {
+          spinner?.stop();
+          const assets = [
+            `audio: ${durationInSeconds.toFixed(1)}s`,
+            sceneData.imagePath ? "image" : null,
+            sceneData.videoPath ? "video" : null
+          ].filter(Boolean).join(", ");
+          success(`  ${scene.name}: ${assets}`);
+          spinner?.start();
+        }
+      }
+    } else {
+      let script = options.script;
+      if (options.scriptFile) {
+        try {
+          script = await readFile2(options.scriptFile, "utf-8");
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to read script file: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.INVALID_INPUT);
+        }
+      }
+      if (!script || script.trim().length === 0) {
+        spinner?.stop();
+        error("Provide scenes via stdin JSON, --script-file with scenes JSON, or --script for legacy mode");
+        process.exit(EXIT_CODES.INVALID_INPUT);
+      }
+      script = script.trim();
+      const _topic = options.topic || script.split(".")[0].slice(0, 50);
+      void _topic;
+      if (spinner) spinner.text = "Generating voiceover...";
+      const ttsResult = await generateSpeech({
+        text: script,
+        options: { voice }
+      });
+      const voiceoverPath = join2(audioDir, `voiceover.${ttsResult.format}`);
+      await writeFile5(voiceoverPath, ttsResult.audioData);
+      totalCost += ttsResult.cost;
+      totalDuration = ttsResult.duration;
+      const sectionTexts = parseScriptIntoSections(script);
+      const sectionsWithTiming = calculateSectionTiming(sectionTexts, ttsResult.duration, DEFAULT_FPS, ttsResult.timestamps);
+      scenes = sectionsWithTiming.map((s, i) => ({
+        ...s,
+        name: `Section${i + 1}`,
+        audioPath: `audio/voiceover.${ttsResult.format}`
+      }));
+      if (format === "human") {
+        spinner?.stop();
+        success(`Voiceover: ${voiceoverPath} (${ttsResult.duration.toFixed(1)}s)`);
+        spinner?.start();
+      }
     }
-    const musicDuration = Math.min(30, Math.ceil(ttsResult.duration) + 5);
-    const musicPrompt = options.musicPrompt || "uplifting background music, positive energy";
+    const musicDuration = Math.min(30, Math.ceil(totalDuration));
+    console.log(`[Music Generation] Requesting music:`, {
+      prompt: musicPrompt,
+      requestedDuration: musicDuration,
+      totalAudioDuration: totalDuration
+    });
     if (spinner) spinner.text = "Generating music...";
     let musicResult = await generateMusic({
       prompt: musicPrompt,
@@ -5509,78 +5308,37 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       await downloadFile3(musicResult.audioUrl, musicPath);
     }
     totalCost += musicResult.cost || 0;
+    const actualMusicDuration = musicResult.duration || musicDuration;
+    console.log(`[Music Generation] Received music:`, {
+      requestedDuration: musicDuration,
+      returnedDuration: musicResult.duration,
+      actualUsedDuration: actualMusicDuration,
+      totalAudioDuration: totalDuration,
+      difference: actualMusicDuration - totalDuration,
+      audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
+    });
     const musicInfo = {
       path: "audio/music.mp3",
-      duration: musicResult.duration || musicDuration,
+      duration: actualMusicDuration,
       prompt: musicPrompt,
       cost: musicResult.cost || 0
     };
     if (format === "human") {
       spinner?.stop();
       success(`Music: ${musicPath} (${musicInfo.duration}s)`);
-      spinner?.start();
-    }
-    if (spinner) spinner.text = "Searching for images...";
-    const imageResults = await searchImages({
-      query: topic,
-      options: {
-        maxResults: numImages,
-        size: "large",
-        safeSearch: true
-      }
-    });
-    const allImages = imageResults.data.results.flatMap(
-      (providerResult) => providerResult.results.map((img) => ({
-        ...img,
-        provider: providerResult.providerName
-      }))
-    );
-    totalCost += imageResults.data.totalCost;
-    const downloadedImages = [];
-    for (let i = 0; i < Math.min(allImages.length, numImages); i++) {
-      const img = allImages[i];
-      const ext = getExtension(img.url);
-      const filename = `scene-${i + 1}.${ext}`;
-      const imagePath = join2(imagesDir, filename);
-      if (spinner) spinner.text = `Downloading image ${i + 1}/${Math.min(allImages.length, numImages)}...`;
-      try {
-        await downloadFile3(img.url, imagePath);
-        downloadedImages.push({
-          path: `images/${filename}`,
-          url: img.url,
-          width: img.width,
-          height: img.height,
-          query: topic
-        });
-      } catch (err) {
-        if (format === "human") {
-          spinner?.stop();
-          warn(`Failed to download image ${i + 1}: ${err instanceof Error ? err.message : "Unknown error"}`);
-          spinner?.start();
-        }
+      if (actualMusicDuration < totalDuration) {
+        warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${totalDuration.toFixed(1)}s).`);
+        warn(`Consider using audio looping or extending music in Remotion.`);
       }
-    }
-    if (format === "human") {
-      spinner?.stop();
-      success(`Images: Downloaded ${downloadedImages.length} images to ${imagesDir}`);
       spinner?.start();
     }
-    const sectionsWithImages = sections.map((section, index) => {
-      const imageIndex = index % downloadedImages.length;
-      return {
-        ...section,
-        imagePath: downloadedImages[imageIndex]?.path
-      };
-    });
     if (spinner) spinner.text = "Writing manifest...";
-    const totalDurationInFrames = Math.round(ttsResult.duration * DEFAULT_FPS);
+    const totalDurationInFrames = Math.round(totalDuration * DEFAULT_FPS);
     const manifest = {
-      topic,
-      script,
-      voiceover: voiceoverInfo,
       music: musicInfo,
-      images: downloadedImages,
-      sections: sectionsWithImages,
+      images: allImages,
+      videos: allVideos,
+      scenes,
       totalDurationInFrames,
       fps: DEFAULT_FPS,
       totalCost,
@@ -5600,26 +5358,26 @@ var createCommand2 = new Command19("create").description("Create video assets (v
     console.log();
     success("Video assets created successfully!");
     console.log();
-    info(`Topic: ${topic}`);
-    info(`Voiceover: ${voiceoverInfo.path} (${voiceoverInfo.duration.toFixed(1)}s, ${voiceoverInfo.voice})`);
+    info(`Scenes: ${scenes.length} (${totalDurationInFrames} frames at ${DEFAULT_FPS}fps)`);
+    for (const scene of scenes) {
+      const assets = [
+        scene.audioPath ? "audio" : null,
+        scene.imagePath ? "image" : null,
+        scene.videoPath ? "video" : null
+      ].filter(Boolean).join(", ");
+      info(`  - ${scene.name}: ${scene.durationInSeconds.toFixed(1)}s [${assets}]`);
+    }
     info(`Music: ${musicInfo.path} (${musicInfo.duration}s)`);
-    info(`Sections: ${sections.length} (${totalDurationInFrames} frames at ${DEFAULT_FPS}fps)`);
-    info(`Images: ${downloadedImages.length} downloaded`);
     info(`Manifest: ${manifestPath}`);
     console.log();
     info(`Total cost: $${totalCost.toFixed(4)}`);
-    console.log();
-    info("Next steps:");
-    info("  1. Create Remotion scenes matching section timings in manifest");
-    info("  2. Each section has exact durationInFrames - use these for sync");
-    info("  3. Run: npx remotion render FullVideo out/video.mp4");
   } catch (err) {
     spinner?.stop();
     error(err instanceof Error ? err.message : "Unknown error");
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var searchCommand2 = new Command19("search").description("Search for stock videos").argument("<query>", "Search query").option("-n, --max-results <count>", "Maximum number of results", "10").option("-o, --orientation <type>", "Video orientation: landscape, portrait, square, any", "any").option("-l, --license <type>", "License type: free, premium, any", "any").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (query, options) => {
+var searchCommand2 = new Command19("search").description("Search for stock videos").argument("<query>", "Search query").option("-n, --max-results <count>", "Maximum number of results", "10").option("-o, --orientation <type>", "Video orientation: landscape, portrait, square, any", "any").option("-l, --license <type>", "License type: free, premium, any", "free").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (query, options) => {
   const { maxResults, orientation, license, format } = options;
   const spinner = format === "human" ? ora12("Searching for videos...").start() : null;
   try {
@@ -5663,11 +5421,11 @@ var searchCommand2 = new Command19("search").description("Search for stock video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--no-install", "Skip pnpm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
+var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--type <type>", "Video type: landscape (16:9) or tiktok (9:16)", "landscape").option("--no-install", "Skip pnpm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing video project...").start() : null;
   try {
-    const targetDir = resolve4(process.cwd(), name);
+    const targetDir = resolve5(process.cwd(), name);
     try {
       await access(targetDir);
       spinner?.stop();
@@ -5675,14 +5433,22 @@ var initCommand = new Command19("init").description("Create a new Remotion video
       process.exit(EXIT_CODES.INVALID_INPUT);
     } catch {
     }
+    const templatePattern = /^[a-zA-Z0-9_-]+\/[a-zA-Z0-9_.-]+(\/[a-zA-Z0-9_.-]+)*(#[a-zA-Z0-9_.-]+)?$/;
+    if (!templatePattern.test(options.template)) {
+      spinner?.stop();
+      error(`Invalid template format: "${options.template}". Expected format: owner/repo or owner/repo#branch`);
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
     if (spinner) spinner.text = `Downloading template from ${options.template}...`;
     try {
-      execSync2(`npx --yes degit ${options.template} "${targetDir}"`, {
+      execSync(`npx --yes degit ${options.template} "${targetDir}"`, {
         stdio: "pipe"
       });
     } catch {
       if (spinner) spinner.text = "Cloning template...";
-      execSync2(`git clone --depth 1 https://github.com/${options.template}.git "${targetDir}"`, {
+      const repoMatch = options.template.match(/^([a-zA-Z0-9_-]+\/[a-zA-Z0-9_.-]+)/);
+      const repo = repoMatch ? repoMatch[1] : options.template;
+      execSync(`git clone --depth 1 https://github.com/${repo}.git "${targetDir}"`, {
         stdio: "pipe"
       });
       await rm(join2(targetDir, ".git"), { recursive: true, force: true });
@@ -5715,12 +5481,37 @@ var initCommand = new Command19("init").description("Create a new Remotion video
         spinner?.start();
       }
     }
+    if (options.type === "tiktok") {
+      if (spinner) spinner.text = "Configuring for TikTok (9:16)...";
+      const constantsPath = join2(targetDir, "types/constants.ts");
+      try {
+        let constantsContent = await readFile2(constantsPath, "utf-8");
+        constantsContent = constantsContent.replace(
+          /export const VIDEO_WIDTH = 1920;/,
+          "export const VIDEO_WIDTH = 1080; // TikTok 9:16"
+        ).replace(
+          /export const VIDEO_HEIGHT = 1080;/,
+          "export const VIDEO_HEIGHT = 1920; // TikTok 9:16"
+        ).replace(
+          /export const VIDEO_FPS = 60;/,
+          "export const VIDEO_FPS = 30; // TikTok standard"
+        );
+        await writeFile5(constantsPath, constantsContent, "utf-8");
+        if (format === "human") {
+          spinner?.stop();
+          success("Configured for TikTok (1080x1920 @ 30fps)");
+          spinner?.start();
+        }
+      } catch {
+      }
+    }
     spinner?.stop();
     if (format === "json") {
       printJson({
         name,
         path: targetDir,
         template: options.template,
+        type: options.type,
         installed: options.install
       });
       return;
@@ -5731,6 +5522,11 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     }
     console.log();
     success(`Video project "${name}" created successfully!`);
+    if (options.type === "tiktok") {
+      info("Format: TikTok/Reels/Shorts (1080x1920 @ 30fps)");
+    } else {
+      info("Format: Landscape (1920x1080 @ 60fps)");
+    }
     console.log();
     info("Next steps:");
     info(`  cd ${name}`);
@@ -5739,17 +5535,158 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     }
     info("  pnpm dev             # Preview in Remotion Studio");
     info("  cc video create ...  # Generate assets to public/");
-    info("  pnpm render          # Render final video");
+    if (options.type === "tiktok") {
+      info("  pnpm exec remotion render TikTokVideo  # Render TikTok video");
+    } else {
+      info("  pnpm exec remotion render FullVideo    # Render final video");
+    }
   } catch (err) {
     spinner?.stop();
     error(err instanceof Error ? err.message : "Unknown error");
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2);
+function getFfmpegPath() {
+  if (!ffmpegPath) {
+    throw new Error("ffmpeg-static binary not found. Try reinstalling the CLI.");
+  }
+  return ffmpegPath;
+}
+var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail/poster image into a video file for preview in Slack, Twitter, etc.").argument("<video>", "Video file to add thumbnail to (e.g., out/video.mp4)").option("-i, --image <path>", "Thumbnail image to embed (if not provided, extracts from video)").option("-f, --frame <number>", "Frame number to extract as thumbnail (default: 30)", "30").option("-c, --composition <id>", "Remotion composition to extract frame from (uses Remotion still)").option("-o, --output <path>", "Output video path (default: overwrites input)").option("--json", "Output as JSON").option("-q, --quiet", "Only output the file path").action(async (videoPath, options) => {
+  const format = options.json ? "json" : options.quiet ? "quiet" : "human";
+  const spinner = format === "human" ? ora12("Processing...").start() : null;
+  try {
+    let ffmpeg;
+    try {
+      ffmpeg = getFfmpegPath();
+    } catch (err) {
+      spinner?.stop();
+      error(err instanceof Error ? err.message : "ffmpeg not available");
+      process.exit(EXIT_CODES.GENERAL_ERROR);
+    }
+    const videoFullPath = resolve5(process.cwd(), videoPath);
+    try {
+      await access(videoFullPath);
+    } catch {
+      spinner?.stop();
+      error(`Video file not found: ${videoPath}`);
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
+    const frameNum = parseInt(options.frame, 10);
+    if (isNaN(frameNum) || frameNum < 0) {
+      spinner?.stop();
+      error("Invalid frame number. Must be a non-negative integer.");
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
+    let thumbnailPath = options.image;
+    let tempThumbnail = false;
+    if (!thumbnailPath) {
+      const tempDir = join2(process.cwd(), ".tmp-thumbnail");
+      await mkdir(tempDir, { recursive: true });
+      thumbnailPath = join2(tempDir, "thumb.png");
+      tempThumbnail = true;
+      if (options.composition) {
+        if (spinner) spinner.text = `Extracting frame ${frameNum} from ${options.composition}...`;
+        const args = [
+          "exec",
+          "remotion",
+          "still",
+          options.composition,
+          thumbnailPath,
+          `--frame=${frameNum}`
+        ];
+        try {
+          execSync(`pnpm ${args.join(" ")}`, {
+            stdio: "pipe",
+            cwd: process.cwd()
+          });
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to extract frame from composition: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.GENERAL_ERROR);
+        }
+      } else {
+        if (spinner) spinner.text = `Extracting frame ${frameNum} from video...`;
+        try {
+          execSync(
+            `"${ffmpeg}" -y -i "${videoFullPath}" -vf "select=eq(n\\,${frameNum})" -vframes 1 "${thumbnailPath}"`,
+            { stdio: "pipe" }
+          );
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to extract frame from video: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.GENERAL_ERROR);
+        }
+      }
+    } else {
+      thumbnailPath = resolve5(process.cwd(), thumbnailPath);
+      try {
+        await access(thumbnailPath);
+      } catch {
+        spinner?.stop();
+        error(`Thumbnail image not found: ${options.image}`);
+        process.exit(EXIT_CODES.INVALID_INPUT);
+      }
+    }
+    const outputPath = options.output ? resolve5(process.cwd(), options.output) : videoFullPath;
+    const needsTempOutput = outputPath === videoFullPath;
+    const tempOutput = needsTempOutput ? videoFullPath.replace(/\.mp4$/, ".thumb-temp.mp4") : outputPath;
+    if (spinner) spinner.text = "Embedding thumbnail into video...";
+    try {
+      execSync(
+        `"${ffmpeg}" -y -i "${videoFullPath}" -i "${thumbnailPath}" -map 0 -map 1 -c copy -disposition:v:1 attached_pic "${tempOutput}"`,
+        { stdio: "pipe" }
+      );
+      if (needsTempOutput) {
+        await rm(videoFullPath);
+        await cp(tempOutput, videoFullPath);
+        await rm(tempOutput);
+      }
+    } catch (err) {
+      spinner?.stop();
+      error(`Failed to embed thumbnail: ${err instanceof Error ? err.message : "Unknown error"}`);
+      process.exit(EXIT_CODES.GENERAL_ERROR);
+    }
+    if (tempThumbnail) {
+      try {
+        await rm(join2(process.cwd(), ".tmp-thumbnail"), { recursive: true });
+      } catch {
+      }
+    }
+    spinner?.stop();
+    const finalOutput = options.output || videoPath;
+    if (format === "json") {
+      printJson({
+        video: finalOutput,
+        thumbnail: options.image || `frame ${frameNum}`,
+        composition: options.composition || null
+      });
+      return;
+    }
+    if (format === "quiet") {
+      console.log(resolve5(process.cwd(), finalOutput));
+      return;
+    }
+    console.log();
+    success(`Thumbnail embedded: ${finalOutput}`);
+    if (options.image) {
+      keyValue("Thumbnail", options.image);
+    } else if (options.composition) {
+      keyValue("Source", `${options.composition} frame ${frameNum}`);
+    } else {
+      keyValue("Source", `Video frame ${frameNum}`);
+    }
+    console.log();
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Failed to process thumbnail");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
 // src/index.ts
-var VERSION = "0.1.6";
+var VERSION = "0.1.8";
 var program = new Command20();
 var cmdName = brand.commands[0];
 program.name(cmdName).description(brand.description).version(VERSION, "-v, --version", "Show version number").option("--debug", "Enable debug logging").option("--no-color", "Disable colored output").configureOutput({