@conceptcraft/mindframes 0.1.9 → 0.1.11

package/dist/index.js

@@ -1,17 +1,46 @@
 #!/usr/bin/env node
 import { createRequire } from 'module'; const require = createRequire(import.meta.url);
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
+
+// src/index.ts
+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",
+    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"
+  }
+};
+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)$/, "");
@@ -26,50 +55,52 @@ function detectBrand() {
   }
   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();
-  }
-});
+var brand = detectBrand();
+
+// src/commands/login.ts
+import { Command } from "commander";
+import chalk3 from "chalk";
+import ora from "ora";
+import http from "http";
+import { randomBytes, createHash } from "crypto";
+import open from "open";
 
 // src/lib/config.ts
 import Conf from "conf";
+var DEFAULT_API_URL = "https://www.mindframes.app";
+var schema = {
+  apiKey: {
+    type: "string"
+  },
+  apiUrl: {
+    type: "string",
+    default: DEFAULT_API_URL
+  },
+  defaultTeamId: {
+    type: "string"
+  },
+  // OAuth tokens (preferred over API key)
+  accessToken: {
+    type: "string"
+  },
+  refreshToken: {
+    type: "string"
+  },
+  tokenExpiresAt: {
+    type: "number"
+  },
+  // OAuth client registration (cached per-server)
+  clientId: {
+    type: "string"
+  },
+  clientSecret: {
+    type: "string"
+  }
+};
+var config = new Conf({
+  projectName: brand.name,
+  schema
+});
 function getConfig() {
   return {
     apiKey: getApiKey(),
@@ -151,47 +182,6 @@ function setOAuthClient(clientId, clientSecret) {
   config.set("clientId", clientId);
   config.set("clientSecret", clientSecret);
 }
-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: {
-        type: "string"
-      },
-      apiUrl: {
-        type: "string",
-        default: DEFAULT_API_URL
-      },
-      defaultTeamId: {
-        type: "string"
-      },
-      // OAuth tokens (preferred over API key)
-      accessToken: {
-        type: "string"
-      },
-      refreshToken: {
-        type: "string"
-      },
-      tokenExpiresAt: {
-        type: "number"
-      },
-      // OAuth client registration (cached per-server)
-      clientId: {
-        type: "string"
-      },
-      clientSecret: {
-        type: "string"
-      }
-    };
-    config = new Conf({
-      projectName: brand.name,
-      schema
-    });
-  }
-});
 
 // src/lib/output.ts
 import chalk from "chalk";
@@ -358,40 +348,25 @@ function formatJson(data) {
 function printJson(data) {
   console.log(formatJson(data));
 }
-var init_output = __esm({
-  "src/lib/output.ts"() {
-    "use strict";
-    init_config();
-  }
-});
 
-// src/types/media.ts
-var init_media = __esm({
-  "src/types/media.ts"() {
-    "use strict";
-  }
-});
+// src/lib/feature-cache.ts
+import Conf2 from "conf";
+
+// src/lib/auth.ts
+import chalk2 from "chalk";
 
 // src/types/index.ts
-var EXIT_CODES;
-var init_types = __esm({
-  "src/types/index.ts"() {
-    "use strict";
-    init_media();
-    EXIT_CODES = {
-      SUCCESS: 0,
-      GENERAL_ERROR: 1,
-      AUTH_ERROR: 2,
-      NOT_FOUND: 3,
-      RATE_LIMIT: 4,
-      NETWORK_ERROR: 5,
-      INVALID_INPUT: 6
-    };
-  }
-});
+var EXIT_CODES = {
+  SUCCESS: 0,
+  GENERAL_ERROR: 1,
+  AUTH_ERROR: 2,
+  NOT_FOUND: 3,
+  RATE_LIMIT: 4,
+  NETWORK_ERROR: 5,
+  INVALID_INPUT: 6
+};
 
 // src/lib/auth.ts
-import chalk2 from "chalk";
 async function refreshAccessToken() {
   const refreshToken = getRefreshToken();
   const clientId = getClientId();
@@ -440,21 +415,15 @@ function hasAuth() {
 }
 async function requireAuth() {
   if (!hasAuth()) {
-    const { confirm: confirm4 } = await import("@inquirer/prompts");
-    try {
-      const shouldLogin = await confirm4({
-        message: chalk2.red("Not authenticated.") + " Log in now?",
-        default: true
-      });
-      if (!shouldLogin) {
-        console.log(chalk2.gray("\nTip: You can also set CC_MINDFRAMES_API_KEY environment variable."));
-        process.exit(EXIT_CODES.AUTH_ERROR);
-      }
-      const { runLoginFlow: runLoginFlow2 } = await Promise.resolve().then(() => (init_login(), login_exports));
-      await runLoginFlow2({ browser: true });
-    } catch {
-      process.exit(EXIT_CODES.AUTH_ERROR);
-    }
+    const cmd2 = brand.commands[0];
+    const envVar = brand.apiKeyEnvVar;
+    console.error(chalk2.red("\u2717 Not authenticated."));
+    console.error();
+    console.error(chalk2.bold("To authenticate, run:"));
+    console.error(chalk2.cyan(`  ${cmd2} login`));
+    console.error();
+    console.error(chalk2.gray(`Or set ${envVar} environment variable.`));
+    process.exit(EXIT_CODES.AUTH_ERROR);
   }
 }
 function maskApiKey(key) {
@@ -472,13 +441,6 @@ function isValidApiKeyFormat(key) {
   const validPrefixes = ["cc_slides_", "mcp_", "cc_sk_", "sk_"];
   return validPrefixes.some((prefix) => key.startsWith(prefix));
 }
-var init_auth = __esm({
-  "src/lib/auth.ts"() {
-    "use strict";
-    init_config();
-    init_types();
-  }
-});
 
 // src/lib/api.ts
 import { readFileSync, statSync } from "fs";
@@ -495,6 +457,14 @@ async function getAuthHeaders() {
   }
   return {};
 }
+var ApiError = class extends Error {
+  constructor(message, statusCode, exitCode = 1) {
+    super(message);
+    this.statusCode = statusCode;
+    this.exitCode = exitCode;
+    this.name = "ApiError";
+  }
+};
 async function request(endpoint, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
@@ -870,13 +840,13 @@ async function importPresentation(fileBuffer, fileName, options = {}) {
   return result;
 }
 async function listBrandings() {
-  return request("/api/branding");
+  return request("/api/cli/branding");
 }
 async function getBranding(id) {
   return request(`/api/branding/${id}`);
 }
 async function extractBranding(url, teamId) {
-  return request("/api/branding/extract", {
+  return request("/api/cli/branding/extract", {
     method: "POST",
     body: { url, teamId }
   });
@@ -1022,6 +992,51 @@ async function generateSpeech(ttsRequest) {
     timestamps
   };
 }
+async function generateSpeechBatch(batchRequest) {
+  const apiUrl = getApiUrl();
+  if (!hasAuth()) {
+    throw new ApiError(
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
+      401,
+      2
+    );
+  }
+  const authHeaders = await getAuthHeaders();
+  let response;
+  try {
+    response = await fetch(`${apiUrl}/api/cli/tts/batch`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...authHeaders
+      },
+      body: JSON.stringify(batchRequest)
+    });
+  } catch (error2) {
+    throw new ApiError(
+      `Network error: ${error2 instanceof Error ? error2.message : "Unknown error"}`,
+      0,
+      5
+    );
+  }
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => "Unknown error");
+    let errorMessage;
+    try {
+      const errorJson = JSON.parse(errorText);
+      errorMessage = errorJson.error || errorJson.message || errorText;
+    } catch {
+      errorMessage = errorText;
+    }
+    throw new ApiError(errorMessage, response.status, response.status === 401 ? 2 : 1);
+  }
+  const result = await response.json();
+  result.results = result.results.map((r) => ({
+    ...r,
+    audioData: Buffer.from(r.audioData, "base64")
+  }));
+  return result;
+}
 async function getVoices() {
   return request("/api/cli/tts");
 }
@@ -1088,26 +1103,14 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
-var ApiError;
-var init_api = __esm({
-  "src/lib/api.ts"() {
-    "use strict";
-    init_config();
-    init_auth();
-    init_brand();
-    ApiError = class extends Error {
-      constructor(message, statusCode, exitCode = 1) {
-        super(message);
-        this.statusCode = statusCode;
-        this.exitCode = exitCode;
-        this.name = "ApiError";
-      }
-    };
-  }
-});
 
 // src/lib/feature-cache.ts
-import Conf2 from "conf";
+var cache = new Conf2({
+  projectName: "conceptcraft",
+  configName: "feature-cache"
+});
+var FRESH_TTL = 60 * 60 * 1e3;
+var STALE_TTL = 24 * 60 * 60 * 1e3;
 function hashApiKey(key) {
   let hash = 0;
   for (let i = 0; i < key.length; i++) {
@@ -1153,33 +1156,11 @@ function invalidateCache() {
 function getCachePath() {
   return cache.path;
 }
-var cache, FRESH_TTL, STALE_TTL;
-var init_feature_cache = __esm({
-  "src/lib/feature-cache.ts"() {
-    "use strict";
-    init_api();
-    init_config();
-    cache = new Conf2({
-      projectName: "conceptcraft",
-      configName: "feature-cache"
-    });
-    FRESH_TTL = 60 * 60 * 1e3;
-    STALE_TTL = 24 * 60 * 60 * 1e3;
-  }
-});
 
 // src/commands/login.ts
-var login_exports = {};
-__export(login_exports, {
-  loginCommand: () => loginCommand,
-  runLoginFlow: () => runLoginFlow
-});
-import { Command } from "commander";
-import chalk3 from "chalk";
-import ora from "ora";
-import http from "http";
-import { randomBytes, createHash } from "crypto";
-import open from "open";
+var CLI_CLIENT_NAME = "ConceptCraft CLI";
+var CALLBACK_PORT_START = 8765;
+var CALLBACK_PORT_END = 8775;
 function generateCodeVerifier() {
   return randomBytes(32).toString("base64url");
 }
@@ -1427,43 +1408,22 @@ async function runLoginFlow(options) {
     throw err;
   }
 }
-var CLI_CLIENT_NAME, CALLBACK_PORT_START, CALLBACK_PORT_END, loginCommand;
-var init_login = __esm({
-  "src/commands/login.ts"() {
-    "use strict";
-    init_config();
-    init_output();
-    init_feature_cache();
-    CLI_CLIENT_NAME = "ConceptCraft CLI";
-    CALLBACK_PORT_START = 8765;
-    CALLBACK_PORT_END = 8775;
-    loginCommand = new Command("login").description("Authenticate with ConceptCraft (opens browser)").option("--no-browser", "Print URL instead of opening browser").action(async (options) => {
-      console.log();
-      if (hasOAuthTokens()) {
-        warn("You are already logged in.");
-        info("Run 'conceptcraft logout' to log out first, or continue to re-authenticate.");
-        console.log();
-      }
-      try {
-        await runLoginFlow(options);
-        process.exit(0);
-      } catch {
-        process.exit(1);
-      }
-    });
+var loginCommand = new Command("login").description("Authenticate with ConceptCraft (opens browser)").option("--no-browser", "Print URL instead of opening browser").action(async (options) => {
+  console.log();
+  if (hasOAuthTokens()) {
+    warn("You are already logged in.");
+    info("Run 'conceptcraft logout' to log out first, or continue to re-authenticate.");
+    console.log();
+  }
+  try {
+    await runLoginFlow(options);
+    process.exit(0);
+  } catch {
+    process.exit(1);
   }
 });
 
-// src/index.ts
-init_brand();
-init_login();
-import { Command as Command20 } from "commander";
-import chalk13 from "chalk";
-
 // src/commands/logout.ts
-init_config();
-init_feature_cache();
-init_output();
 import { Command as Command2 } from "commander";
 import { confirm } from "@inquirer/prompts";
 var logoutCommand = new Command2("logout").description("Log out and clear authentication").option("--all", "Clear all config including API key").action(async (options) => {
@@ -1503,11 +1463,6 @@ var logoutCommand = new Command2("logout").description("Log out and clear authen
 });
 
 // src/commands/config.ts
-init_config();
-init_auth();
-init_api();
-init_feature_cache();
-init_output();
 import { Command as Command3 } from "commander";
 import chalk4 from "chalk";
 import { input, password, confirm as confirm2, select } from "@inquirer/prompts";
@@ -1711,13 +1666,10 @@ var configCommand = new Command3("config").description("Manage CLI configuration
 );
 
 // src/commands/create.ts
-init_api();
-init_auth();
 import { Command as Command4 } from "commander";
 import chalk6 from "chalk";
 
 // src/lib/streaming.ts
-init_output();
 import { createParser } from "eventsource-parser";
 import chalk5 from "chalk";
 import ora3 from "ora";
@@ -1979,7 +1931,6 @@ async function streamTextContent(response, options = {}) {
 }
 
 // src/commands/create.ts
-init_output();
 import { readFileSync as readFileSync2, existsSync } from "fs";
 import { resolve } from "path";
 var VALID_GOALS = [
@@ -2461,10 +2412,6 @@ function isUrl(str) {
 }
 
 // src/commands/list.ts
-init_api();
-init_auth();
-init_config();
-init_output();
 import { Command as Command5 } from "commander";
 var listCommand = new Command5("list").description("List presentations").option("-n, --limit <count>", "Number of results to return", "20").option(
   "-f, --format <format>",
@@ -2528,9 +2475,6 @@ var listCommand = new Command5("list").description("List presentations").option(
 });
 
 // src/commands/get.ts
-init_api();
-init_auth();
-init_output();
 import { Command as Command6 } from "commander";
 import chalk7 from "chalk";
 var getCommand = new Command6("get").description("Get presentation details").argument("<slug>", "Presentation slug (e.g., my-presentation-v1-abc123)").option(
@@ -2573,9 +2517,6 @@ var getCommand = new Command6("get").description("Get presentation details").arg
 });
 
 // src/commands/delete.ts
-init_api();
-init_auth();
-init_output();
 import { Command as Command7 } from "commander";
 import { confirm as confirm3 } from "@inquirer/prompts";
 var deleteCommand = new Command7("delete").description("Delete a presentation").argument("<slug>", "Presentation slug (e.g., my-presentation-v1-abc123)").option("-f, --force", "Skip confirmation prompt").option("-q, --quiet", "Suppress output").action(async (slug, options) => {
@@ -2611,9 +2552,6 @@ var deleteCommand = new Command7("delete").description("Delete a presentation").
 });
 
 // src/commands/export.ts
-init_api();
-init_auth();
-init_output();
 import { Command as Command8 } from "commander";
 import { writeFile } from "fs/promises";
 import { resolve as resolve2 } from "path";
@@ -2655,10 +2593,6 @@ function formatBytes(bytes) {
 }
 
 // src/commands/import.ts
-init_api();
-init_auth();
-init_output();
-init_config();
 import { Command as Command9 } from "commander";
 import { readFile } from "fs/promises";
 import { resolve as resolve3, basename as basename2 } from "path";
@@ -2748,10 +2682,6 @@ var importCommand = cmd.option("--dry-run", "Validate without importing").option
 });
 
 // src/commands/branding.ts
-init_api();
-init_auth();
-init_config();
-init_output();
 import { Command as Command10 } from "commander";
 import chalk8 from "chalk";
 import ora6 from "ora";
@@ -2925,13 +2855,9 @@ var brandingCommand = new Command10("branding").description("Manage brand profil
 );
 
 // src/commands/derive.ts
-init_api();
-init_auth();
-init_feature_cache();
 import { Command as Command11 } from "commander";
 import chalk9 from "chalk";
 import ora7 from "ora";
-init_output();
 function createBlogCommand() {
   return new Command11("blog").description("Generate a blog post from a presentation").argument("<slug>", "Presentation slug").option("--words <count>", "Target word count (50-2000)", "300").option(
     "--tone <tone>",
@@ -3055,8 +2981,6 @@ function buildDeriveCommand() {
 }
 
 // src/commands/ideas.ts
-init_auth();
-init_output();
 import { Command as Command12 } from "commander";
 import chalk10 from "chalk";
 var ideasCommand = new Command12("ideas").description("Generate presentation topic ideas").option("--context <text>", "Custom context for idea generation").option("--count <n>", "Number of ideas to generate", "5").option("-f, --format <format>", "Output format (human, json)", "human").action(async (options) => {
@@ -3080,10 +3004,6 @@ var ideasCommand = new Command12("ideas").description("Generate presentation top
 });
 
 // src/commands/whoami.ts
-init_api();
-init_auth();
-init_feature_cache();
-init_output();
 import { Command as Command13 } from "commander";
 import chalk11 from "chalk";
 var whoamiCommand = new Command13("whoami").description("Show current user and team information").option("-f, --format <format>", "Output format (human, json)", "human").action(async (options) => {
@@ -3139,21 +3059,19 @@ var whoamiCommand = new Command13("whoami").description("Show current user and t
 });
 
 // src/commands/skill/index.ts
-init_output();
-init_brand();
 import { Command as Command14 } from "commander";
 import chalk12 from "chalk";
 
 // src/commands/skill/generate-main-skill.ts
 function generateMainSkillContent(context) {
-  const { name, cmd: cmd2, displayName } = context;
-  const envPrefix = name.toUpperCase().replace(/-/g, "_");
+  const { name, cmd: cmd2 } = context;
+  const envPrefix = name.toUpperCase().replace(/[^A-Z0-9]/g, "_");
   return `---
 name: ${name}
-description: ${displayName} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${name}-video, ${name}-presentation) for detailed workflows.
+description: ${name} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${name}-video, ${name}-presentation) for detailed workflows.
 ---
 
-# ${displayName} CLI
+# ${name} CLI
 
 A comprehensive CLI for AI-powered content creation. Generate presentations, video assets, voiceovers, music, and search stock media - all from your terminal.
 
@@ -3177,14 +3095,20 @@ A comprehensive CLI for AI-powered content creation. Generate presentations, vid
 
 ## Authentication
 
+**IMPORTANT:** Most commands require authentication. If a command fails with "Not authenticated", run:
+
 \`\`\`bash
-# Login via OAuth (recommended)
 ${cmd2} login
+\`\`\`
 
-# Or set API key directly
+This opens a browser for OAuth login. Alternatively, set an API key:
+
+\`\`\`bash
 export ${envPrefix}_API_KEY="your-key-here"
+\`\`\`
 
-# Verify authentication
+**Verify authentication:**
+\`\`\`bash
 ${cmd2} whoami
 \`\`\`
 
@@ -3560,1040 +3484,276 @@ ${cmd2} --version           # Version info
 }
 
 // src/commands/skill/rules/video/content.ts
-var VIDEO_RULE_CONTENTS = [
-  {
-    filename: "video-creation-guide.md",
-    content: `# Video Creation Guide
-
-### Related Skills
-
-Use these installed skills for implementation details:
-- \`remotion-best-practices\` \u2014 Remotion patterns and API
-- \`threejs-*\` skills \u2014 for R3F/WebGL (particles, 3D elements)
+var THUMBNAIL_RULES = `Consider creating separate thumbnail component with Remotion (can be captured with remotion still, not used in actual video).
 
----
-
-## Core Rules
+**High-CTR principles:**
+- Expressive faces (emotion, not neutral) boost CTR 20-30%
+- High contrast, bold colors (yellow, orange stand out)
+- Simple: 3 main elements max (face + text + 1 visual)
+- Mobile-first: readable at 320px width (70% of views)
+- Minimal text: 3-5 words, bold legible fonts (60-80px)
+- Rule of thirds composition
 
-Your task is not "making slideshows" \u2014 you are **simulating a real interface** that obeys cinematic physics.
+**Specs:** 1280x720, <2MB, 16:9 ratio
 
-### Hard Constraints
-
-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
+Can capture: \`pnpm exec remotion still ThumbnailScene out/thumb.png\`
+`;
+var MOTION_DESIGN_GUIDELINES = `# Motion Design Principles
 
----
+**Core Philosophy:** "Atomic, Kinetic Construction" - nothing is static. Elements arrive and leave via physics-based transitions.
 
-## Code Organization
+## Design System Approach
 
-- Create separate files: \`Button.tsx\`, \`Window.tsx\`, \`Cursor.tsx\`
-- Use Zod schemas for props validation
-- Extract animation configs to constants
+**Separate content from logic:**
+- Theme object: colors (primary, accent, background, text), fonts, corner radiuses in config
+- Scene object: define by duration in frames and content type, not timecodes
+- Avoid hardcoding: colors, text, data values can be passed via props or config file
 
-\`\`\`tsx
-import { spring, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
+## Animation Physics (Spring-Based)
 
-// ALWAYS use spring for element entrances
-// NEVER use magic numbers
-\`\`\`
+**Spring Pop:**
+- UI cards, bubbles, logos "pop" with bounce
+- \`spring()\` function works well: low mass (0.5), moderate damping (10-12), high stiffness (100-200)
+- Spring value can map to scale (0 to 1) and opacity (0 to 1)
+- Consider \`transform-origin\` placement (center for bubbles, top for dropdowns)
 
----
+**Kinetic Typography:**
+- Text entering line-by-line or word-by-word (not all at once)
+- Can split text into arrays, stagger with delays (index * 5 frames)
+- \`interpolate()\` works for opacity [0,1] and translateY [20px, 0px] - slide up
+- Cubic easing works well for slide-up motion
 
-## Aesthetics (Linear/Stripe Style)
+**Constructed UI:**
+- Building UI from HTML/CSS divs works better than screenshots
+- If user shares project: study actual UI components (buttons, cards, modals) and implement pixel-perfect recreations - match colors, fonts, shadows, border-radius
+- Bar charts: can animate height/width from 0% to target
+- Line charts: can animate SVG path \`stroke-dashoffset\`
+- Donut charts: can animate \`stroke-dasharray\` of SVG circle
+- Numbers: counter component interpolating from 0 to target over 30-60 frames
 
-\`\`\`css
-/* Shadows - soft, expensive */
-box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
+## Visual Composition
 
-/* Borders - thin, barely visible */
-border: 1px solid rgba(255,255,255,0.1);
-\`\`\`
+**Background Ambience:**
+- Static backgrounds feel flat - consider faint dots/patterns
+- Slow oscillation works well: \`Math.sin(frame / 100)\` applied to position/rotation for "floating" effect
+- Parallax adds depth: background moves slower than foreground
 
-- Fonts: Inter or SF Pro
-- Never pure \`#000000\` \u2014 use \`#050505\`
-- Never pure \`#FFFFFF\` \u2014 use \`#F0F0F0\`
+**SVG Handling:**
+- Inline SVGs allow control of fill color via theme (better than img tags)
+- Chat bubbles can be constructed with SVG paths or heavy border-radius
+- Animating bubble "tail" separately adds polish
 
----
+**Scene Transitions:**
+- Scenes can slide or camera can "pan" to new area
+- Slide-out approach: Scene A \`translateX\` 0% to -100%, Scene B 100% to 0%
+- Spatial pan approach: place scenes on giant canvas, animate parent container transform
 
-## Self-Check Before Render
+## Suggested Component Architecture
 
-- [ ] 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)
+Consider these reusable patterns:
+- KineticText: text, delay, style props - handles word-splitting and stagger
+- SmartCard: container with Spring Pop entry and glassmorphism styles
+- AnimatedCounter: from, to, duration props - number ticking
+- ProgressBar/ChartElement: percentage, color props - growth animation from 0
 
-**If your video looks like PowerPoint with voiceover \u2014 START OVER.**
-`
-  },
-  {
-    filename: "animation-physics.md",
-    content: `# Animation Physics
+**Motion Blur (optional):** Can simulate by stretching element in direction of movement on fast transitions.
+`;
+var SVG_ANIMATION_GUIDELINES = `# SVG Line Animation (Write-On Effect)
 
-## Spring Configurations
+**Core Concept:** "Invisible Ink Rule" - lines draw in (don't fade in), as if hand-drawn in real-time.
 
-### Heavy UI (Modals, Sidebars)
-\`\`\`tsx
-config: { mass: 1, stiffness: 100, damping: 15 }
-\`\`\`
+**Animation approach:**
+- Setting \`pathLength="1"\` on SVG path elements normalizes length
+- Animating \`strokeDashoffset\` from 1 (hidden) to 0 (drawn) creates write-on effect
+- \`strokeDasharray: 1\` with interpolate \`[1, 0]\` over 20-30 frames works well
+- \`stroke-linecap="round"\` creates friendly hand-drawn look
 
-### Light UI (Tooltips, Badges)
-\`\`\`tsx
-config: { mass: 0.6, stiffness: 180, damping: 12 }
-\`\`\`
+**Draw & vanish sequence:**
+- Draw in: 20 frames (offset 1\u21920)
+- Hold: 10 frames
+- Draw out: fade opacity or continue offset
 
-### Standard (Snappy)
-\`\`\`tsx
-config: { mass: 1, damping: 15, stiffness: 120 }
-\`\`\`
+**Reusable component pattern:**
+- Props: path data (d), color, width, delay, type (underline/spark/circle/arrow)
+- Pre-defined path dictionaries work better than generating random coordinates
+- Positioning with top/left/scale/rotation props for text accents
+`;
+var ASSET_USAGE_GUIDELINES = `# Asset Usage & Optimization
 
----
+**For project-specific videos:** Study the project first - extract logos, colors, fonts, actual UI components. Recreate components pixel-perfect in Remotion (match exact colors, shadows, border-radius, fonts). Use project's actual branding and design system for authentic look.
 
-## Staggering
+**CLI provides flexible asset search** - images and videos can be used creatively throughout compositions.
 
-**NEVER show a list all at once.**
+**Video assets (from CLI video search):**
+- Full-screen backgrounds (with overlays/text)
+- Embedded in UI cards or windows alongside text
+- Picture-in-picture style elements
+- Background layers with reduced opacity
+- Transitional footage between scenes
 
-\`\`\`tsx
-const STAGGER_FRAMES = 3; // 3-5 frames between items
+**Image assets (from CLI image search):**
+- Scene backgrounds (static or with animation)
+- Embedded elements within compositions
+- UI component content (cards, panels)
+- Layered for depth and parallax effects
 
-{items.map((item, i) => {
-  const delay = i * STAGGER_FRAMES;
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: { damping: 15, stiffness: 120 },
-  });
+**Dynamic backgrounds (Three.js/WebGL):**
+- Three.js/React Three Fiber for performance-optimized animated backgrounds
+- Particle systems, procedural gradients, geometric patterns
+- SVG animations for abstract shapes and patterns
+- WebGL shaders for dynamic effects
+- Combines well with static assets for depth
 
-  return (
-    <div style={{
-      opacity: progress,
-      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
-    }}>
-      {item}
-    </div>
-  );
-})}
-\`\`\`
+**Best approach:** Mix CLI assets (images/videos) with generated elements (Three.js, SVG) for rich, performant compositions.
+`;
 
+// src/commands/skill/generate-video-skill.ts
+function generateVideoSkillContent(context) {
+  const { name, cmd: cmd2 } = context;
+  return `---
+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.
 ---
 
-## Cursor Movement
-
-**Cursor NEVER moves in straight lines.**
-
-\`\`\`tsx
-const progress = spring({
-  frame: frame - startFrame,
-  fps,
-  config: { damping: 20, stiffness: 80 },
-});
-
-const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
-const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
+# ${name} Video Creation CLI
 
-// THE ARC: Parabola that peaks mid-travel
-const arcHeight = 100;
-const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
-const cursorY = linearY - arcOffset;
-\`\`\`
+Generate video assets (voiceover, music, images, stock videos) and render with Remotion.
 
 ---
 
-## Click Interaction
+## Prerequisites
 
-\`\`\`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
+**Authenticate:**
+\`\`\`bash
+${cmd2} login
 \`\`\`
 
 ---
 
-## 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
-
-## SceneWrapper
-
-\`\`\`tsx
-<SceneWrapper
-  durationInFrames={300}
-  transitionType="slideLeft"
-  cameraMotion="panRight"
->
-  <FeatureLayer />
-  <CursorLayer />
-  <ParticleLayer />
-</SceneWrapper>
-\`\`\`
+## Video Creation Workflow
 
----
+### 1. Generate Assets
 
-## Layer Structure (Z-Index)
+Generate voiceover, music, and visual assets:
 
-| Layer | Z-Index |
-|-------|---------|
-| Background orbs | 0 |
-| Vignette | 1 |
-| UI Base | 10 |
-| UI Elements | 20 |
-| Overlays | 30 |
-| Text/Captions | 40 |
-| Cursor | 50 |
+\`\`\`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"
+    },
+    { 
+      "name": "Demo", 
+      "script": "Our AI analyzes your data in real-time, surfacing insights that matter."
+    }
+  ],
+  "voice": "Kore"
+}
+SCENES
+\`\`\`
 
----
+**Output:**
+- \`public/audio/*.wav\` - scene voiceovers
+- \`public/audio/music.mp3\` - background music
+- \`public/video-manifest.json\` - timing, metadata, timeline
 
-## Case Study: SaaS Task Tracker
+### 2. Initialize Remotion (MANDATORY)
 
-### Scene 1: "The Hook" (~5s)
+Scaffold the template and copy assets:
 
-1. Dark background (\`#0B0C10\`), grid drifting
-2. Scattered circles magnetically attract \u2192 morph into logo
-3. Logo expands \u2192 becomes sidebar navigation
+\`\`\`bash
+cd .. && ${cmd2} video init my-video
+cd my-video
+# Assets are now in public/ directory
+\`\`\`
 
-### Scene 2: "Micro-Interaction" (~6s)
+### 3. Render Video
 
-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
+**For landscape videos (16:9):**
+\`\`\`bash
+pnpm exec remotion render FullVideo out/video.mp4
+\`\`\`
 
-### Scene 3: "The Connection" (~5s)
+**For vertical videos (9:16) with captions:**
+\`\`\`bash
+pnpm exec remotion render CaptionedVideo out/tiktok.mp4 \\
+  --props='{"timeline":'$(cat public/video-manifest.json | jq -c .timeline)',"showCaptions":true}'
+\`\`\`
 
-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
+### 4. Generate & Inject Thumbnail
 
----
+${THUMBNAIL_RULES}
 
-## Composition
-
-\`\`\`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>
+\`\`\`bash
+${cmd2} video thumbnail out/video.mp4 --image out/thumb.png
 \`\`\`
-`
-  },
-  {
-    filename: "scene-transitions.md",
-    content: `# Scene Transitions
-
-**No FadeIn/FadeOut.** Only contextual transitions.
 
 ---
 
-## Types
+${MOTION_DESIGN_GUIDELINES}
 
-### 1. Object Persistence
-Same chart transforms (data, color, scale) while UI changes around it.
-
-### 2. Mask Reveal
-Button expands to screen size via SVG \`clipPath\`.
+---
 
-### 3. Speed Ramps
-Scene A accelerates out, Scene B starts fast then slows.
+${SVG_ANIMATION_GUIDELINES}
 
 ---
 
-## Match Cut Example
+${ASSET_USAGE_GUIDELINES}
 
-\`\`\`
-Scene A: Zoom into avatar
-         \u2193
-Avatar color fills screen
-         \u2193
-Scene B: That color IS the notification background
-\`\`\`
+---
+`;
+}
 
+// src/commands/skill/generate-presentation-skill.ts
+function generatePresentationSkillContent(context) {
+  const { name, cmd: cmd2 } = 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.
 ---
 
-## Overlapping Sequences (CRITICAL)
+# ${name} Presentation Creation CLI
 
-\`\`\`tsx
-<Sequence from={0} durationInFrames={100}>
-  <SceneOne />
-</Sequence>
-<Sequence from={85} durationInFrames={150}>  {/* 15 frames early! */}
-  <SceneTwo />
-</Sequence>
-\`\`\`
+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.
 
 ---
 
-## TransitionSeries
-
-\`\`\`tsx
-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
-
-## Reflection (Glass Glint)
+## Authentication
 
-Diagonal gradient sweeps every 5 seconds.
+\`\`\`bash
+# Login via OAuth
+${cmd2} login
 
-\`\`\`tsx
-const cycleFrame = frame % 300;
-const sweepProgress = interpolate(cycleFrame, [0, 60], [-100, 200], {
-  extrapolateRight: 'clamp',
-});
+# Or set API key
+export ${name.toUpperCase().replace(/-/g, "_")}_API_KEY="your-key-here"
 \`\`\`
 
 ---
 
-## Background Breathing
+## Creating Presentations
 
-Background is NEVER static.
+### From Text
 
-\`\`\`tsx
-const orb1X = Math.sin(frame / 60) * 200;
-const orb1Y = Math.cos(frame / 80) * 100;
+\`\`\`bash
+${cmd2} create "AI-powered product analytics platform"
 \`\`\`
 
----
+### From File
 
-## Typewriter Effect
+\`\`\`bash
+${cmd2} create --file product-brief.md
+\`\`\`
 
-\`\`\`tsx
-const charIndex = Math.floor(frame / 3);
-const showCursor = Math.floor(frame / 15) % 2 === 0;
+### From URL
 
-<span>
-  {text.slice(0, charIndex)}
-  {showCursor && <span>|</span>}
-</span>
+\`\`\`bash
+${cmd2} create --url https://company.com/product
 \`\`\`
 
----
-
-## Vignette & Noise
-
-\`\`\`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
-
-## Audio-Reactive
-
-- **Kick:** \`scale(1.005)\` pulse
-- **Snare:** Trigger scene changes
-- **Hi-hats:** Cursor flicker, particle shimmer
-
----
-
-## Motion Blur (Fake)
-
-\`\`\`tsx
-// Trail: Render 3-4 copies with opacity 0.3, 1-frame delay
-
-// Or drop shadow for fast movement:
-filter: \`drop-shadow(\${velocityX * 0.5}px \${velocityY * 0.5}px 10px rgba(0,0,0,0.3))\`
-\`\`\`
-
----
-
-## 3D Perspective
-
-\`\`\`tsx
-<div style={{ perspective: '1000px' }}>
-  <div style={{
-    transform: 'rotateX(5deg) rotateY(10deg)',
-    transformStyle: 'preserve-3d',
-  }}>
-    {/* Your UI */}
-  </div>
-</div>
-\`\`\`
-
----
-
-## Kinetic Typography
-
-### Masked Reveal
-\`\`\`tsx
-<div style={{ overflow: 'hidden', height: 80 }}>
-  <h1 style={{
-    transform: \`translateY(\${interpolate(progress, [0, 1], [100, 0])}%)\`,
-  }}>
-    INTRODUCING
-  </h1>
-</div>
-\`\`\`
-
-### Keyword Animation
-Animate keywords, not whole sentences.
-`
-  },
-  {
-    filename: "remotion-config.md",
-    content: `# Remotion Configuration
-
-## FPS & Resolution
-
-- **60 FPS mandatory** \u2014 30fps looks choppy
-- **1920\xD71080** Full HD
-- **Center:** \`{x: 960, y: 540}\`
-
----
-
-## Timing
-
-- 1 second = 60 frames
-- Fast interaction = 15-20 frames
-- No scene > 8 seconds without action
-
----
-
-## Entry-Action-Exit Structure
-
-| Phase | Duration |
-|-------|----------|
-| Entry | 0.0s - 0.5s |
-| Action | 0.5s - (duration - 1s) |
-| Exit | last 1s |
-
----
-
-## Font Loading
-
-\`\`\`tsx
-const [handle] = useState(() => delayRender());
-
-useEffect(() => {
-  document.fonts.ready.then(() => {
-    continueRender(handle);
-  });
-}, [handle]);
-\`\`\`
-
----
-
-## Zod Schema
-
-\`\`\`tsx
-export const SceneSchema = z.object({
-  titleText: z.string(),
-  buttonColor: z.string(),
-  cursorPath: z.array(z.object({ x: z.number(), y: z.number() })),
-});
-\`\`\`
-
----
-
-## SaaS Video Kit Components
-
-| 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 |
-
----
-
-## Code Rules
-
-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
-
-For Stripe/Apple/Linear quality.
-
----
-
-## Global Lighting Engine
-
-\`\`\`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)\`,
-}} />
-\`\`\`
-
----
-
-## Noise & Dithering
-
-Every background needs noise overlay (opacity 0.02-0.05). Prevents YouTube banding.
-
----
-
-## React Three Fiber
-
-For particles, 3D globes \u2014 use WebGL via \`@remotion/three\`, not CSS 3D.
-
-\`\`\`tsx
-import { ThreeCanvas } from '@remotion/three';
-
-<AbsoluteFill>
-  <HtmlUI />
-  <ThreeCanvas>
-    <Particles />
-  </ThreeCanvas>
-</AbsoluteFill>
-\`\`\`
-
-See \`threejs-*\` skills for implementation.
-
----
-
-## Virtual Camera Rig
-
-Move camera, not elements:
-
-\`\`\`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 (
-    <div style={{
-      transform: \`translateX(\${panX}px) scale(\${zoom})\`,
-      transformOrigin: 'center',
-    }}>
-      {children}
-    </div>
-  );
-};
-\`\`\`
-
----
-
-## 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
-
-## 1. Music Ends Before Video Finishes
-
-**Problem:** Music duration is shorter than video duration, causing awkward silence at the end.
-
-**Solution:** Loop music in Remotion using the \`loop\` prop:
-
-\`\`\`tsx
-import { Audio } from 'remotion';
-
-<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
-
----
-
-## 2. Music Transitions Sound Abrupt
-
-**Problem:** Music cuts harshly when scenes change or video ends.
-
-**Fix in Remotion:**
-\`\`\`tsx
-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' }
-);
-
-<Audio src={music} volume={musicVolume} />
-\`\`\`
-
----
-
-## 3. Scene Transitions Too Harsh
-
-**Problem:** Scenes change abruptly without smooth transitions.
-
-**Fix:** Use \`@remotion/transitions\` with overlapping:
-\`\`\`tsx
-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>
-\`\`\`
-
----
-
-## 4. Voiceover Lacks Energy
-
-**Problem:** Voiceover sounds flat/monotone.
-
-**Fix:** Pass \`voiceSettings\` in scenes JSON:
-\`\`\`json
-{
-  "scenes": [...],
-  "voice": "Kore",
-  "voiceSettings": {
-    "style": 0.6,
-    "stability": 0.4,
-    "speed": 0.95
-  }
-}
-\`\`\`
-
-- \`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
-
----
-
-## 5. Video Duration Mismatch
-
-**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
-// Add 30 frames (0.5s) padding after voiceover ends
-const paddedDuration = voiceoverFrames + 30;
-\`\`\`
-3. **Brief should note:** "Duration based on voiceover length"
-
----
-
-## 6. Not Using Project UI Components
-
-**Problem:** Generic UI instead of pixel-perfect project components.
-
-**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
-
-\`\`\`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>
-\`\`\`
-
----
-
-## 7. Missing Physics & Lighting
-
-**Problem:** Video feels flat, no depth or motion.
-
-**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
-`
-  }
-];
-
-// src/commands/skill/generate-video-skill.ts
-function generateVideoSkillContent(context) {
-  const { name, cmd: cmd2, displayName } = context;
-  return `---
-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.
----
-
-# ${displayName} Video Creation CLI
-
-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.
-
-**Stack:** Remotion (React video framework) + React Three Fiber (R3F) + Three.js for 3D/WebGL, particles, shaders, lighting.
-
-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.
-
-**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
-
----
-
-## CRITICAL: Professional Composition Rules
-
-**These rules are MANDATORY for all marketing/product videos:**
-
-### \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"
-
-### \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
-
-### Composition Examples:
-
-**\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>
-\`\`\`
-
-**\u2705 GOOD - Single Focus:**
-\`\`\`tsx
-// 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>
-\`\`\`
-
-**\u274C BAD - Flying Cards:**
-\`\`\`tsx
-// DON'T: Cards flying from random positions
-<Card style={{
-  transform: \`translateX(\${interpolate(progress, [0,1], [-500, 0])}px)\` // Flies from left
-}} />
-\`\`\`
-
-**\u2705 GOOD - Subtle Entrance:**
-\`\`\`tsx
-// 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
-}} />
-\`\`\`
-
-### Layout Grid System:
-
-**Use 12-column grid (like Bootstrap):**
-\`\`\`tsx
-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;
-\`\`\`
-
-**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
-
----
-
-## Prerequisites
-
-Before using this skill, ensure you have:
-
-1. **Load related skills:**
-   \`\`\`
-   remotion-best-practices
-   threejs-fundamentals
-   \`\`\`
-
-2. **Authenticate:**
-   \`\`\`bash
-   ${cmd2} login
-   \`\`\`
-
-3. **Remotion installed** (if creating videos):
-   \`\`\`bash
-   pnpm install remotion @remotion/cli
-   \`\`\`
-
----
-
-## Video Creation Workflow
-
-### Phase 0: Load Skills (MANDATORY)
-
-Before ANY video work, invoke these skills:
-\`\`\`
-remotion-best-practices
-threejs-fundamentals
-\`\`\`
-
-### Phase 1: Discovery
-
-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
-
-### Phase 2: Video Brief
-
-Present a brief outline (scenes \u22648s each, duration, assets found) and get user approval before production.
-
-### Phase 3: Production
-
-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
-
-### Phase 4: Render & Thumbnail (REQUIRED)
-
-\`\`\`bash
-# 1. Render the video (with voiceover and music already included)
-pnpm exec remotion render FullVideo
-
-# 2. ALWAYS embed thumbnail before delivering
-${cmd2} video thumbnail out/FullVideo.mp4 --frame 60
-\`\`\`
-
-**Note:** Remotion videos include per-scene voiceovers and background music baked in during render.
-
----
-
-## Asset Generation
-
-Generate voiceover, music, and visual assets for each scene:
-
-\`\`\`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
-\`\`\`
-
-**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)
-
----
-
-## Core Video Rules
-
-${VIDEO_RULE_CONTENTS.map((rule) => rule.content).join("\n\n---\n\n")}
-
-## Useful Commands
-
-\`\`\`bash
-# Generate video assets
-${cmd2} video create < scenes.json
-cat scenes.json | ${cmd2} video create --output ./public
-
-# Initialize Remotion project
-${cmd2} video init my-video
-
-# Embed thumbnail
-${cmd2} video thumbnail out/video.mp4 --frame 60
-
-# Search for stock assets
-${cmd2} images search "mountain landscape" --limit 10
-${cmd2} videos search "ocean waves" --limit 5
-
-# Generate audio
-${cmd2} audio generate "Your script here" --voice Kore
-${cmd2} music generate "upbeat corporate" --duration 30
-\`\`\`
-
----
-
-## Best Practices
-
-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
-
----
-
-## Troubleshooting
-
-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
-
-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.
----
-
-# ${displayName} Presentation CLI
-
-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.
-
----
-
-## Authentication
-
-\`\`\`bash
-# Login via OAuth
-${cmd2} login
-
-# Or set API key
-export ${name.toUpperCase().replace(/-/g, "_")}_API_KEY="your-key-here"
-\`\`\`
-
----
-
-## Creating Presentations
-
-### From Text
-
-\`\`\`bash
-${cmd2} create "AI-powered product analytics platform"
-\`\`\`
-
-### From File
-
-\`\`\`bash
-${cmd2} create --file product-brief.md
-\`\`\`
-
-### From URL
-
-\`\`\`bash
-${cmd2} create --url https://company.com/product
-\`\`\`
-
-### From Piped Content
+### From Piped Content
 
 \`\`\`bash
 cat research.txt | ${cmd2} create
@@ -4822,9 +3982,10 @@ function getSupportedEditorNames() {
 // src/commands/skill/index.ts
 var SKILL_TYPES = ["main", "video", "presentation"];
 var skillContext = {
-  name: brand.name,
   cmd: brand.commands[0],
-  displayName: brand.displayName
+  pkg: brand.packageName,
+  url: brand.apiUrl,
+  name: brand.displayName
 };
 var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skills for AI coding assistants`).addHelpText(
   "after",
@@ -4953,9 +4114,6 @@ skillCommand.command("uninstall").description(`Remove ${brand.displayName} skill
 });
 
 // src/commands/tts.ts
-init_api();
-init_output();
-init_types();
 import { Command as Command15 } from "commander";
 import ora8 from "ora";
 import { writeFile as writeFile2 } from "fs/promises";
@@ -5044,9 +4202,6 @@ var voicesCommand = new Command15("voices").description("List available voices")
 var ttsCommand = new Command15("tts").description("Text-to-speech commands").addCommand(generateCommand).addCommand(voicesCommand);
 
 // src/commands/music.ts
-init_api();
-init_output();
-init_types();
 import { Command as Command16 } from "commander";
 import ora9 from "ora";
 import { writeFile as writeFile3 } from "fs/promises";
@@ -5166,9 +4321,6 @@ var statusCommand = new Command16("status").description("Check status of a music
 var musicCommand = new Command16("music").description("Music generation commands").addCommand(generateCommand2).addCommand(statusCommand);
 
 // src/commands/mix.ts
-init_api();
-init_output();
-init_types();
 import { Command as Command17 } from "commander";
 import ora10 from "ora";
 import { writeFile as writeFile4 } from "fs/promises";
@@ -5292,9 +4444,6 @@ var statusCommand2 = new Command17("status").description("Check status of an aud
 var mixAudioCommand = new Command17("mix").description("Audio mixing commands").addCommand(mixCommand).addCommand(statusCommand2);
 
 // src/commands/image.ts
-init_api();
-init_output();
-init_types();
 import { Command as Command18 } from "commander";
 import ora11 from "ora";
 var searchCommand = new Command18("search").description("Search for images").requiredOption("-q, --query <query>", "Search query").option("-n, --max-results <number>", "Maximum number of results (default: 10)").option("-s, --size <size>", "Image size: small, medium, large, any", "large").option("--safe-search", "Enable safe search (default: true)", true).option("--no-safe-search", "Disable safe search").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
@@ -5372,9 +4521,6 @@ var searchCommand = new Command18("search").description("Search for images").req
 var imageCommand = new Command18("image").description("Image search commands").addCommand(searchCommand);
 
 // src/commands/video.ts
-init_api();
-init_output();
-init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
 import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm, cp } from "fs/promises";
@@ -5424,6 +4570,13 @@ function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, time
     const proportion = wordCount / totalWords;
     const durationInSeconds = totalDuration * proportion;
     const durationInFrames = Math.round(durationInSeconds * fps);
+    const chars = text.split("");
+    const charDuration = durationInSeconds / chars.length;
+    const approximateTimestamps = {
+      characters: chars,
+      characterStartTimesSeconds: chars.map((_, i) => i * charDuration),
+      characterEndTimesSeconds: chars.map((_, i) => (i + 1) * charDuration)
+    };
     const section = {
       id: index + 1,
       text,
@@ -5431,7 +4584,9 @@ function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, time
       startTime: currentTime,
       endTime: currentTime + durationInSeconds,
       durationInSeconds,
-      durationInFrames
+      durationInFrames,
+      timestamps: approximateTimestamps
+      // Always include timestamps (approximate if needed)
     };
     currentTime += durationInSeconds;
     return section;
@@ -5458,6 +4613,13 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
     const endTime = characterEndTimesSeconds[Math.min(endCharIndex, characterEndTimesSeconds.length - 1)] || startTime + 1;
     const durationInSeconds = endTime - startTime;
     const durationInFrames = Math.round(durationInSeconds * fps);
+    const sectionTimestamps = {
+      characters: characters.slice(startCharIndex, endCharIndex + 1),
+      characterStartTimesSeconds: characterStartTimesSeconds.slice(startCharIndex, endCharIndex + 1).map((t) => t - startTime),
+      // Make relative to section start
+      characterEndTimesSeconds: characterEndTimesSeconds.slice(startCharIndex, endCharIndex + 1).map((t) => t - startTime)
+      // Make relative to section start
+    };
     results.push({
       id: i + 1,
       text: sectionText,
@@ -5465,7 +4627,9 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
       startTime,
       endTime,
       durationInSeconds,
-      durationInFrames
+      durationInFrames,
+      timestamps: sectionTimestamps
+      // Add section-specific timestamps
     });
   }
   return results;
@@ -5490,6 +4654,64 @@ async function readStdin2() {
 function toFilename(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 }
+function createTimelineFromScenes(scenes) {
+  const timeline = {
+    shortTitle: "Video",
+    elements: [],
+    audio: [],
+    text: []
+  };
+  let zoomIn = true;
+  scenes.forEach((scene) => {
+    const startMs = scene.startTime * 1e3;
+    const endMs = scene.endTime * 1e3;
+    const durationMs = scene.durationInSeconds * 1e3;
+    if (scene.imagePath) {
+      timeline.elements.push({
+        startMs,
+        endMs,
+        imageUrl: scene.imagePath,
+        enterTransition: "blur",
+        exitTransition: "blur",
+        animations: [{
+          type: "scale",
+          from: zoomIn ? 1.3 : 1,
+          to: zoomIn ? 1 : 1.3,
+          startMs: 0,
+          endMs: durationMs
+        }]
+      });
+      zoomIn = !zoomIn;
+    } else if (scene.videoPath) {
+      timeline.elements.push({
+        startMs,
+        endMs,
+        videoUrl: scene.videoPath,
+        enterTransition: "blur",
+        exitTransition: "blur",
+        animations: []
+      });
+    }
+    if (scene.audioPath) {
+      timeline.audio.push({
+        startMs,
+        endMs,
+        audioUrl: scene.audioPath
+      });
+    }
+    if (scene.timestamps) {
+      timeline.text.push({
+        startMs,
+        endMs,
+        text: scene.text,
+        position: "bottom",
+        animations: [],
+        timestamps: scene.timestamps
+      });
+    }
+  });
+  return timeline;
+}
 async function downloadFile3(url, outputPath) {
   if (url.startsWith("data:")) {
     const matches = url.match(/^data:[^;]+;base64,(.+)$/);
@@ -5519,7 +4741,7 @@ function getExtension(url) {
   }
   return "jpg";
 }
-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) => {
+var createCommand3 = 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 {
@@ -5564,21 +4786,27 @@ var createCommand2 = new Command19("create").description("Create video assets (v
         info(`Processing ${scenesInput.scenes.length} scenes...`);
         spinner?.start();
       }
+      const ttsRequests = scenesInput.scenes.map((scene, i) => ({
+        text: scene.script,
+        id: `scene-${i}`
+      }));
+      if (spinner) spinner.text = "Generating speech for all scenes...";
+      const batchResult = await generateSpeechBatch({
+        texts: ttsRequests,
+        options: {
+          voice,
+          voiceSettings: scenesInput.voiceSettings
+        }
+      });
+      totalCost += batchResult.totalCost;
       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 ttsResult = batchResult.results[i];
+        if (spinner) spinner.text = `[${scene.name}] Saving audio...`;
         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 = {
@@ -5590,7 +4818,9 @@ var createCommand2 = new Command19("create").description("Create video assets (v
           endTime: currentTime + durationInSeconds,
           durationInSeconds,
           durationInFrames,
-          audioPath: `audio/${filename}.${ttsResult.format}`
+          audioPath: `audio/${filename}.${ttsResult.format}`,
+          timestamps: ttsResult.timestamps
+          // Character-level timestamps for captions
         };
         if (scene.imageQuery) {
           if (spinner) spinner.text = `[${scene.name}] Searching image...`;
@@ -5714,66 +4944,93 @@ var createCommand2 = new Command19("create").description("Create video assets (v
         spinner?.start();
       }
     }
-    const musicDuration = Math.min(30, Math.ceil(totalDuration));
+    if (spinner) spinner.text = "Creating timeline...";
+    const timeline = createTimelineFromScenes(scenes);
+    const videoEndTimeMs = Math.max(
+      timeline.audio.length > 0 ? Math.max(...timeline.audio.map((a) => a.endMs)) : 0,
+      timeline.text.length > 0 ? Math.max(...timeline.text.map((t) => t.endMs)) : 0,
+      timeline.elements.length > 0 ? Math.max(...timeline.elements.map((e) => e.endMs)) : 0
+    );
+    const actualVideoDuration = videoEndTimeMs / 1e3;
+    const musicDuration = Math.min(30, Math.ceil(actualVideoDuration));
     console.log(`[Music Generation] Requesting music:`, {
       prompt: musicPrompt,
       requestedDuration: musicDuration,
-      totalAudioDuration: totalDuration
-    });
-    if (spinner) spinner.text = "Generating music...";
-    let musicResult = await generateMusic({
-      prompt: musicPrompt,
-      duration: musicDuration
-    });
-    if (musicResult.status !== "completed" && musicResult.status !== "failed") {
-      if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
-      musicResult = await pollForCompletion(
-        () => checkMusicStatus(musicResult.requestId),
-        60,
-        2e3
-      );
-    }
-    if (musicResult.status === "failed") {
-      spinner?.stop();
-      error(`Music generation failed: ${musicResult.error || "Unknown error"}`);
-      process.exit(EXIT_CODES.GENERAL_ERROR);
-    }
-    const musicPath = join2(audioDir, "music.mp3");
-    if (musicResult.audioUrl) {
-      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) + "..."
+      actualVideoDuration,
+      timelineDurationMs: videoEndTimeMs
     });
-    const musicInfo = {
-      path: "audio/music.mp3",
-      duration: actualMusicDuration,
-      prompt: musicPrompt,
-      cost: musicResult.cost || 0
-    };
-    if (format === "human") {
-      spinner?.stop();
-      success(`Music: ${musicPath} (${musicInfo.duration}s)`);
-      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.`);
+    let musicInfo;
+    if (musicDuration < 3) {
+      if (format === "human") {
+        spinner?.stop();
+        warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
+        warn(`Skipping music generation...`);
+        spinner?.start();
+      }
+    } else {
+      try {
+        if (spinner) spinner.text = "Generating music...";
+        let musicResult = await generateMusic({
+          prompt: musicPrompt,
+          duration: musicDuration
+        });
+        if (musicResult.status !== "completed" && musicResult.status !== "failed") {
+          if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
+          musicResult = await pollForCompletion(
+            () => checkMusicStatus(musicResult.requestId),
+            60,
+            2e3
+          );
+        }
+        if (musicResult.status === "failed") {
+          throw new Error(musicResult.error || "Unknown error");
+        }
+        const musicPath = join2(audioDir, "music.mp3");
+        if (musicResult.audioUrl) {
+          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) + "..."
+        });
+        musicInfo = {
+          path: "audio/music.mp3",
+          duration: actualMusicDuration,
+          prompt: musicPrompt,
+          cost: musicResult.cost || 0
+        };
+        if (format === "human") {
+          spinner?.stop();
+          success(`Music: ${musicPath} (${musicInfo.duration}s)`);
+          if (actualMusicDuration < actualVideoDuration) {
+            warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
+            warn(`Consider using audio looping or extending music in Remotion.`);
+          }
+          spinner?.start();
+        }
+      } catch (musicError) {
+        spinner?.stop();
+        warn(`Music generation failed: ${musicError.message}`);
+        warn(`Continuing without background music...`);
+        if (spinner && format === "human") spinner?.start();
       }
-      spinner?.start();
     }
     if (spinner) spinner.text = "Writing manifest...";
-    const totalDurationInFrames = Math.round(totalDuration * DEFAULT_FPS);
+    const totalDurationInFrames = Math.round(actualVideoDuration * DEFAULT_FPS);
     const manifest = {
       music: musicInfo,
       images: allImages,
       videos: allVideos,
       scenes,
+      timeline,
+      // Include Remotion timeline in manifest
       totalDurationInFrames,
       fps: DEFAULT_FPS,
       totalCost,
@@ -5802,7 +5059,7 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       ].filter(Boolean).join(", ");
       info(`  - ${scene.name}: ${scene.durationInSeconds.toFixed(1)}s [${assets}]`);
     }
-    info(`Music: ${musicInfo.path} (${musicInfo.duration}s)`);
+    info(`Music: ${musicInfo?.path} (${musicInfo?.duration}s)`);
     info(`Manifest: ${manifestPath}`);
     console.log();
     info(`Total cost: $${totalCost.toFixed(4)}`);
@@ -6118,10 +5375,10 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a 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);
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
 // src/index.ts
-var VERSION = "0.1.9";
+var VERSION = "0.1.11";
 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({