@conceptcraft/mindframes 0.1.5 → 0.1.7

package/dist/index.js

@@ -946,12 +946,21 @@ async function generateSpeech(ttsRequest) {
   const cost = parseFloat(response.headers.get("X-Cost-USD") || "0");
   const provider = response.headers.get("X-Provider") || "unknown";
   const format = response.headers.get("X-Audio-Format") || "mp3";
+  let timestamps;
+  const timestampsHeader = response.headers.get("X-Timestamps");
+  if (timestampsHeader) {
+    try {
+      timestamps = JSON.parse(timestampsHeader);
+    } catch {
+    }
+  }
   return {
     audioData,
     duration,
     cost,
     provider,
-    format
+    format,
+    timestamps
   };
 }
 async function getVoices() {
@@ -1016,7 +1025,7 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
     if (result.status === "completed" || result.status === "failed") {
       return result;
     }
-    await new Promise((resolve4) => setTimeout(resolve4, intervalMs));
+    await new Promise((resolve6) => setTimeout(resolve6, intervalMs));
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
@@ -1123,10 +1132,10 @@ function generateState() {
 async function findAvailablePort(start, end) {
   for (let port = start; port <= end; port++) {
     try {
-      await new Promise((resolve4, reject) => {
+      await new Promise((resolve6, reject) => {
         const server = http.createServer();
         server.listen(port, () => {
-          server.close(() => resolve4());
+          server.close(() => resolve6());
         });
         server.on("error", reject);
       });
@@ -1184,7 +1193,7 @@ async function exchangeCodeForTokens(tokenEndpoint, code, codeVerifier, redirect
   return response.json();
 }
 function startCallbackServer(port, expectedState) {
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve6, reject) => {
     let timeoutId;
     let settled = false;
     const cleanup = () => {
@@ -1270,7 +1279,7 @@ function startCallbackServer(port, expectedState) {
         </html>
       `);
       cleanup();
-      resolve4({ code, state });
+      resolve6({ code, state });
     });
     server.listen(port);
     process.once("SIGINT", onCancel);
@@ -2413,21 +2422,21 @@ Uploading ${options.file.length} file(s)...`));
   }
 });
 async function readStdin() {
-  return new Promise((resolve4) => {
+  return new Promise((resolve6) => {
     let data = "";
     process.stdin.setEncoding("utf8");
     if (process.stdin.isTTY) {
-      resolve4("");
+      resolve6("");
       return;
     }
     process.stdin.on("data", (chunk) => {
       data += chunk;
     });
     process.stdin.on("end", () => {
-      resolve4(data.trim());
+      resolve6(data.trim());
     });
     setTimeout(() => {
-      resolve4(data.trim());
+      resolve6(data.trim());
     }, 100);
   });
 }
@@ -3118,44 +3127,59 @@ var whoamiCommand = new Command13("whoami").description("Show current user and t
   }
 });
 
-// src/commands/skill.ts
+// src/commands/skill/index.ts
 init_output();
 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";
-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 from code, documentation, files, or any content. Use when the user wants to generate slides, presentations, or decks about their project, codebase, research, or ideas.
----
 
-# ${name} CLI
+// src/commands/skill/sections/frontmatter.ts
+var frontmatter = {
+  title: "Frontmatter",
+  render: (ctx) => `---
+name: ${ctx.cmd}
+description: Use when user asks to create presentations (slides, decks, pitch decks) or videos (product demos, explainers, social content, promos). Also handles voiceover and music generation.
+---`
+};
+
+// src/commands/skill/sections/header.ts
+var header3 = {
+  title: "Header",
+  render: (ctx) => `# ${ctx.name} CLI
 
-Create professional presentations directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content.
+Create professional presentations directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content.`
+};
 
-## Prerequisites
+// src/commands/skill/sections/prerequisites.ts
+var prerequisites = {
+  title: "Prerequisites",
+  render: (ctx) => `## Prerequisites
 
 \`\`\`bash
-# Install globally
-npm install -g ${pkg}
-
-# Configure API key (get from ${url}/settings/api-keys)
-${cmd2} config init
+npm install -g ${ctx.pkg}
+${ctx.cmd} login    # Authenticate (opens browser)
+${ctx.cmd} whoami   # Verify auth
 \`\`\`
 
-## Core Workflow
+### Authentication
+
+If not authenticated, run \`${ctx.cmd} login\` - it opens browser for OAuth.
+If login fails or user declines, fall back to API key: \`${ctx.cmd} config init\``
+};
+
+// src/commands/skill/sections/workflow.ts
+var workflow = {
+  title: "Core Workflow",
+  render: (ctx) => `## Core Workflow
 
 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
+2. **Create presentation** - Pass context to \`${ctx.cmd} create\`
+3. **Share URL** - Return the presentation link to the user`
+};
 
-## Commands
+// src/commands/skill/sections/create-command.ts
+var createCommand2 = {
+  title: "Create Command",
+  render: (ctx) => `## Commands
 
 ### Create Presentation
 
@@ -3163,27 +3187,31 @@ Context is **required**. Provide it via one of these methods:
 
 \`\`\`bash
 # Upload files (PDFs, PPTX, images, docs)
-${cmd2} create "Product Overview" --file ./deck.pptx --file ./logo.png
+${ctx.cmd} create "Product Overview" --file ./deck.pptx --file ./logo.png
 
 # Direct text context
-${cmd2} create "Topic Title" --context "Key points, data, facts..."
+${ctx.cmd} create "Topic Title" --context "Key points, data, facts..."
 
 # From a text file
-${cmd2} create "Topic Title" --context-file ./notes.md
+${ctx.cmd} create "Topic Title" --context-file ./notes.md
 
 # Pipe content (auto-detected)
-cat README.md | ${cmd2} create "Project Overview"
+cat README.md | ${ctx.cmd} create "Project Overview"
 
 # From URLs (scraped automatically)
-${cmd2} create "Competitor Analysis" --sources https://example.com/report
+${ctx.cmd} create "Competitor Analysis" --sources https://example.com/report
 
 # Combine multiple sources
-cat src/auth/*.ts | ${cmd2} create "Auth System" \\
+cat src/auth/*.ts | ${ctx.cmd} create "Auth System" \\
   --file ./architecture.png \\
   --context "Focus on security patterns"
-\`\`\`
+\`\`\``
+};
 
-### Create Options
+// src/commands/skill/sections/create-options.ts
+var createOptions = {
+  title: "Create Options",
+  render: (_ctx) => `### Create Options
 
 | Option | Description | Default |
 |--------|-------------|---------|
@@ -3197,43 +3225,51 @@ cat src/auth/*.ts | ${cmd2} create "Auth System" \\
 | \`-f, --file <paths...>\` | Files to upload (PDF, PPTX, images, docs) | - |
 | \`-l, --language <lang>\` | Output language | en |
 | \`-b, --brand <id>\` | Branding ID to apply | - |
-| \`-o, --output <format>\` | Output: \`human\`, \`json\`, \`quiet\` | human |
+| \`-o, --output <format>\` | Output: \`human\`, \`json\`, \`quiet\` | human |`
+};
 
-### Other Commands
+// src/commands/skill/sections/other-commands.ts
+var otherCommands = {
+  title: "Other Commands",
+  render: (ctx) => `### Other Commands
 
 \`\`\`bash
 # Check authentication
-${cmd2} whoami
+${ctx.cmd} whoami
 
 # List presentations
-${cmd2} list
-${cmd2} list --format json
+${ctx.cmd} list
+${ctx.cmd} list --format json
 
 # Get presentation details
-${cmd2} get <id-or-slug>
+${ctx.cmd} get <id-or-slug>
 
 # Export to ZIP
-${cmd2} export <id-or-slug> -o presentation.zip
+${ctx.cmd} export <id-or-slug> -o presentation.zip
 
 # Import presentation
-${cmd2} import ./presentation.zip
+${ctx.cmd} import ./presentation.zip
 
 # Manage branding
-${cmd2} branding list
-${cmd2} branding extract https://company.com
+${ctx.cmd} branding list
+${ctx.cmd} branding extract https://company.com
 
 # Install/manage this skill
-${cmd2} skill install
-${cmd2} skill show
-\`\`\`
+${ctx.cmd} skill install
+${ctx.cmd} skill show
+\`\`\``
+};
 
-## Examples
+// src/commands/skill/sections/examples.ts
+var examples = {
+  title: "Examples",
+  render: (ctx) => `## Examples
 
 ### Present a Codebase Feature
 
 \`\`\`bash
 # Read the relevant files and create presentation
-cat src/lib/auth.ts src/lib/session.ts | ${cmd2} create "Authentication System" \\
+cat src/lib/auth.ts src/lib/session.ts | ${ctx.cmd} create "Authentication System" \\
   --slides 8 --tone educational --audience "New developers" \\
   --goal train
 \`\`\`
@@ -3241,7 +3277,7 @@ cat src/lib/auth.ts src/lib/session.ts | ${cmd2} create "Authentication System"
 ### Technical Documentation with Diagrams
 
 \`\`\`bash
-${cmd2} create "API Reference" \\
+${ctx.cmd} create "API Reference" \\
   --file ./docs/api.md \\
   --file ./diagrams/architecture.png \\
   --mode best --amount detailed \\
@@ -3251,14 +3287,14 @@ ${cmd2} create "API Reference" \\
 ### Quick Project Overview
 
 \`\`\`bash
-cat README.md package.json | ${cmd2} create "Project Introduction" \\
+cat README.md package.json | ${ctx.cmd} create "Project Introduction" \\
   -m instant --slides 5
 \`\`\`
 
 ### Sales Deck from Existing Presentation
 
 \`\`\`bash
-${cmd2} create "Product Demo" \\
+${ctx.cmd} create "Product Demo" \\
   --file ./existing-deck.pptx \\
   --goal persuade \\
   --audience "Enterprise buyers" \\
@@ -3268,14 +3304,18 @@ ${cmd2} create "Product Demo" \\
 ### Research Presentation
 
 \`\`\`bash
-${cmd2} create "Market Analysis" \\
+${ctx.cmd} create "Market Analysis" \\
   --file ./research.pdf \\
   --sources https://report.com/industry.pdf \\
   --tone formal --audience "Executive team" \\
   --goal report
-\`\`\`
+\`\`\``
+};
 
-## Output
+// src/commands/skill/sections/output.ts
+var output = {
+  title: "Output",
+  render: (ctx) => `## Output
 
 Successful creation returns:
 \`\`\`
@@ -3285,44 +3325,168 @@ Successful creation returns:
   Slides: 8
   Generated in: 45s \xB7 12,500 tokens
 
-  Open: ${url}/en/view/presentations/auth-system-v1-abc123
+  Open: ${ctx.url}/en/view/presentations/auth-system-v1-abc123
 \`\`\`
 
 For scripting, use JSON output:
 \`\`\`bash
-URL=$(${cmd2} create "Demo" --context "..." -o json | jq -r '.viewUrl')
-\`\`\`
+URL=$(${ctx.cmd} create "Demo" --context "..." -o json | jq -r '.viewUrl')
+\`\`\``
+};
 
-## Best Practices
+// src/commands/skill/sections/best-practices.ts
+var bestPractices = {
+  title: "Best Practices",
+  render: (_ctx) => `## Best Practices
 
 1. **Provide rich context** - More context = better slides. Include code, docs, data.
 2. **Use file uploads for binary content** - PDFs, images, PPTX files need \`--file\`.
 3. **Specify a goal** - Helps tailor the presentation structure and messaging.
 4. **Use appropriate mode** - \`instant\` for quick drafts, \`best\` for important presentations.
 5. **Specify audience** - Helps tailor complexity and terminology.
-6. **Combine sources** - Pipe multiple files for comprehensive presentations.
+6. **Combine sources** - Pipe multiple files for comprehensive presentations.`
+};
 
-## Supported File Types
+// src/commands/skill/sections/file-types.ts
+var fileTypes = {
+  title: "Supported File Types",
+  render: (_ctx) => `## Supported File Types
 
 - **Documents**: PDF, DOCX, XLSX, PPTX
 - **Images**: JPEG, PNG, GIF, WebP
-- **Text**: Markdown, TXT, CSV, JSON
+- **Text**: Markdown, TXT, CSV, JSON`
+};
 
-## Troubleshooting
+// src/commands/skill/sections/troubleshooting.ts
+var troubleshooting = {
+  title: "Troubleshooting",
+  render: (ctx) => `## Troubleshooting
 
 \`\`\`bash
 # Check if authenticated
-${cmd2} whoami
+${ctx.cmd} whoami
 
-# Verify API key
-${cmd2} config show
+# Re-authenticate if needed
+${ctx.cmd} login
 
 # Debug mode
-${cmd2} create "Test" --context "test" --debug
-\`\`\`
-`;
+${ctx.cmd} create "Test" --context "test" --debug
+\`\`\``
+};
+
+// src/commands/skill/sections/video-creation.ts
+var videoCreation = {
+  title: "Video Creation",
+  render: (ctx) => `## Video Creation
+
+### How to Create a Perfect Video
+
+Videos must feel like premium tech launches (Stripe, Apple, Linear) - **Kinetic Composition**, not slideshows.
+
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
+
+### Required Reading (The Motion Bible)
+
+| Rule | Why This Matters |
+|------|------------------|
+| [video-creation-guide.md](rules/video/video-creation-guide.md) | **The Motion Bible.** Camera rigs, 2.5D entrances, cursor physics, typography, backgrounds |
+| [failures.md](rules/video/failures.md) | **Avoid rejection.** 7 common mistakes that make videos look like slideshows |
+| [project-based.md](rules/video/project-based.md) | **Copy real components.** Eject actual UI code, strip logic, animate pixel-perfect |
+| [parameterization.md](rules/video/parameterization.md) | **Saves debugging.** Never hardcode frame numbers |
+| [layers.md](rules/video/layers.md) | **Prevents z-index bugs.** Background orbs \u2192 Vignette \u2192 CameraRig \u2192 Content |
+| [social-media.md](rules/video/social-media.md) | **Platform specs.** Resolution, aspect ratio, duration per platform |
+
+**Required:** \`npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices\`
+
+### Workflow
+
+#### Phase 1: Discovery
+
+Explore the project thoroughly - assets, components, branding, what makes this product/topic unique.
+
+#### Phase 2: Video Brief
+
+Present a brief outline (scenes, duration, assets found) and get user approval before production.
+
+#### Phase 3: Production
+
+1. **Read video-creation-guide.md + project-based.md + remotion-best-practices**
+2. **Generate audio** - \`${ctx.cmd} video create\` with scenes JSON
+3. **Scaffold OUTSIDE project** - \`cd .. && ${ctx.cmd} video init my-video\`
+4. **Copy assets** - Logo, fonts, colors from project into video project
+5. **Implement kinetically** - Camera rig, 2.5D entrances, staggered lists, transitions
+6. **Verify checklist** - Is it kinetic or static?
+
+#### Phase 4: Render
+
+Auto-render when done: \`pnpm exec remotion render FullVideo\`
+
+Only open Studio if user asks.
+
+### Kinetic Checklist
+
+- [ ] CameraRig wraps entire scene with drift/zoom
+- [ ] Every UI element uses 2.5D rotation entrance (\`perspective + rotateX\`)
+- [ ] Cursor moves in Bezier curves with overshoot
+- [ ] Lists/grids stagger (never appear all at once)
+- [ ] Text uses masked reveal or keyword animation
+- [ ] Background has moving orbs + vignette + noise
+- [ ] Something is moving on EVERY frame
+- [ ] No static resting states longer than 30 frames
+
+### Asset Generation
+
+\`\`\`bash
+cat <<EOF | ${ctx.cmd} video create --output ./public
+{
+  "scenes": [
+    { "name": "Hook", "script": "..." },
+    { "name": "Demo", "script": "..." },
+    { "name": "CTA", "script": "..." }
+  ],
+  "voice": "Kore",
+  "musicPrompt": "upbeat corporate"
+}
+EOF
+\`\`\``
+};
+
+// src/commands/skill/generate-content.ts
+var DEFAULT_SECTIONS = [
+  frontmatter,
+  header3,
+  prerequisites,
+  workflow,
+  createCommand2,
+  createOptions,
+  otherCommands,
+  examples,
+  output,
+  videoCreation,
+  bestPractices,
+  fileTypes,
+  troubleshooting
+];
+function createSkillContext(brand2) {
+  return {
+    cmd: brand2.name,
+    pkg: brand2.packageName,
+    url: brand2.apiUrl,
+    name: brand2.displayName
+  };
+}
+function generateSkillContent(brand2, sections = DEFAULT_SECTIONS) {
+  const ctx = createSkillContext(brand2);
+  return sections.map((section) => section.render(ctx)).join("\n\n");
 }
-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" },
@@ -3330,201 +3494,1346 @@ 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
+// src/commands/skill/rules/video/content.ts
+var VIDEO_RULE_CONTENTS = [
+  {
+    filename: "video-creation-guide.md",
+    content: `# Video Creation Guide
 
-  ${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").action(async (options) => {
-  const installed = [];
-  const skipped = [];
-  const errors = [];
-  const baseDir = options.local ? process.cwd() : homedir();
-  const skillContent = generateSkillContent(brand);
-  if (options.dir) {
-    const skillPath = join(options.dir, "skills", brand.name);
-    try {
-      installSkill(skillPath, skillContent, options.force);
-      installed.push(options.dir);
-    } catch (err) {
-      errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
-    }
-  } else {
-    for (const editor of EDITORS) {
-      const editorDir = join(baseDir, editor.dir);
-      const skillPath = join(editorDir, "skills", brand.name);
-      const skillFile = join(skillPath, "SKILL.md");
-      if (!existsSync2(editorDir)) {
-        continue;
-      }
-      if (existsSync2(skillFile) && !options.force) {
-        skipped.push(editor.name);
-        continue;
-      }
-      try {
-        installSkill(skillPath, skillContent, options.force);
-        installed.push(editor.name);
-      } catch (err) {
-        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(", "));
-  }
-  if (skipped.length > 0) {
-    console.log();
-    info(`Skipped (already exists): ${skipped.join(", ")}`);
-    console.log(chalk12.gray("  Use --force to overwrite"));
-  }
-  if (errors.length > 0) {
-    console.log();
-    for (const err of errors) {
-      error(err);
-    }
-  }
-  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"));
-  }
-  console.log();
-});
-skillCommand.command("show").description("Display the skill content").action(() => {
-  console.log(generateSkillContent(brand));
-});
-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 {
-      }
-    }
-  }
-  console.log();
-  if (removed.length > 0) {
-    success("Skill uninstalled");
-    keyValue("Removed from", removed.join(", "));
-  } else {
-    info("No installed skills found");
-  }
-  console.log();
-});
-function installSkill(skillPath, content, force) {
-  const skillFile = join(skillPath, "SKILL.md");
-  mkdirSync(skillPath, { recursive: true });
-  writeFileSync(skillFile, content, "utf-8");
-}
+> **ALSO READ:**
+> - [project-based.md](project-based.md) - How to extract and animate real project components pixel-perfect
+> - If installed, check \`remotion-best-practices\` skill for Remotion-specific patterns
 
-// 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";
-var generateCommand = new Command15("generate").description("Generate speech from text").requiredOption("-t, --text <text>", "Text to convert to speech").requiredOption("-o, --output <path>", "Output file path").option("-v, --voice <voice>", "Voice name or ID (e.g., Kore, Rachel, alloy)").option("-p, --provider <provider>", "Provider: gemini, elevenlabs, openai").option("-m, --model <model>", "Model (provider-specific)").option("-s, --speed <speed>", "Speech speed 0.25-4.0 (default: 1.0)").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
-  const format = options.format;
-  const spinner = format === "human" ? ora8("Generating speech...").start() : null;
-  let speed;
-  if (options.speed) {
-    speed = parseFloat(options.speed);
-    if (isNaN(speed) || speed < 0.25 || speed > 4) {
-      spinner?.stop();
-      error("Speed must be between 0.25 and 4.0");
-      process.exit(EXIT_CODES.INVALID_INPUT);
-    }
-  }
-  try {
-    const result = await generateSpeech({
-      text: options.text,
-      options: {
-        provider: options.provider,
-        voice: options.voice,
-        model: options.model,
-        speed
-      }
-    });
-    spinner?.stop();
-    const outputPath = options.output.endsWith(`.${result.format}`) ? options.output : `${options.output}.${result.format}`;
-    await writeFile2(outputPath, result.audioData);
-    if (format === "json") {
-      printJson({
-        status: "completed",
-        output: outputPath,
-        duration: result.duration,
-        cost: result.cost,
-        provider: result.provider,
-        format: result.format
-      });
-      return;
-    }
-    if (format === "quiet") {
-      console.log(outputPath);
-      return;
-    }
-    success(`Saved to: ${outputPath}`);
-    info(`Duration: ${result.duration.toFixed(2)}s`);
-    info(`Provider: ${result.provider}`);
-    info(`Cost: $${result.cost.toFixed(6)}`);
-  } catch (err) {
-    spinner?.stop();
-    error(err instanceof Error ? err.message : "Unknown error");
-    process.exit(EXIT_CODES.GENERAL_ERROR);
-  }
-});
-var voicesCommand = new Command15("voices").description("List available voices").option("-p, --provider <provider>", "Filter by provider: gemini, elevenlabs, openai").option("-f, --format <format>", "Output format: human, json", "human").action(async (options) => {
-  const spinner = options.format === "human" ? ora8("Fetching voices...").start() : null;
-  try {
-    const result = await getVoices();
-    spinner?.stop();
-    if (options.format === "json") {
-      if (options.provider) {
-        const providerVoices = result.voices[options.provider];
-        printJson(providerVoices || []);
-      } else {
-        printJson(result.voices);
-      }
-      return;
-    }
-    const providers = options.provider ? [options.provider] : ["gemini", "elevenlabs", "openai"];
-    for (const provider of providers) {
-      const voices = result.voices[provider];
-      if (!voices || voices.length === 0) continue;
-      console.log();
-      console.log(`${provider.toUpperCase()} Voices:`);
-      console.log("-".repeat(50));
-      for (const voice of voices) {
-        console.log(`  ${voice.name} (${voice.id})`);
-        console.log(`    ${voice.description}`);
-      }
-    }
-  } catch (err) {
-    spinner?.stop();
-    error(err instanceof Error ? err.message : "Unknown error");
-    process.exit(EXIT_CODES.GENERAL_ERROR);
-  }
+---
+
+# The "Kinetic SaaS" Motion Design System
+
+**Objective:** Replicate the high-energy, fluid feel of premium tech product videos (Stripe, Apple, Linear, Affable.ai).
+
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
+
+This is the difference between **Static Composition** (slideshows) and **Kinetic Composition** (motion graphics). You must rebuild UI as individual animated layers and film with a virtual camera.
+
+---
+
+## 1. The Global Camera Rig (The "Anti-Static" Layer)
+
+Even when reading text, the screen is slowly zooming or panning.
+
+### Virtual Camera
+
+Every scene must be wrapped in a \`CameraRig\` component:
+
+\`\`\`tsx
+const CameraRig: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+
+  // The "Drift" - constant subtle movement
+  const scale = interpolate(frame, [0, durationInFrames], [1.0, 1.05]);
+  const rotation = interpolate(frame, [0, durationInFrames], [0, 0.5]);
+
+  return (
+    <AbsoluteFill style={{
+      transform: \`scale(\${scale}) rotate(\${rotation}deg)\`,
+    }}>
+      {children}
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+### Zoom-Through Transitions
+
+Transitions are NOT just fades - they are camera movements:
+
+\`\`\`tsx
+// Camera scales rapidly into an element (logo, dot) until it fills screen
+const zoomThrough = interpolate(frame, [TRANSITION_START, TRANSITION_END], [1, 50]);
+// The element becomes the background for the next scene
+\`\`\`
+
+---
+
+## 2. UI & Mockup Animation Rules (Rebuilding Reality)
+
+UI doesn't just fade in. It pops up with weight.
+
+### Priority: Use Real Project Components
+
+**If you're in a project folder, ALWAYS check for actual components first:**
+
+\`\`\`bash
+# Before building ANY UI, explore the project
+ls src/components/
+ls src/app/
+\`\`\`
+
+**When project components exist:**
+1. **Copy the actual component** into your Remotion project
+2. **Strip logic** (remove useState, API calls, event handlers)
+3. **Keep visuals identical** (same styles, colors, spacing)
+4. **Add animation props** (progress, isHovered, etc.)
+5. **Apply kinetic animation** using the rules below
+
+See [project-based.md](project-based.md) for the full component extraction process.
+
+**This is the priority order:**
+1. \u2705 Pixel-perfect copy of real project components (animated)
+2. \u26A0\uFE0F Recreate UI from project's design system (colors, fonts, spacing)
+3. \u274C Generic mockups or stock images (ONLY for non-UI scenes like hooks)
+
+### The "Pop-Up" Entrance (2.5D Rotation)
+
+\`\`\`tsx
+// Heavy spring for weighty feel
+const progress = spring({
+  frame,
+  fps,
+  config: { mass: 2, damping: 20, stiffness: 100 },
 });
-var ttsCommand = new Command15("tts").description("Text-to-speech commands").addCommand(generateCommand).addCommand(voicesCommand);
+
+// Start tilted back, spring to flat
+const rotateX = interpolate(progress, [0, 1], [20, 0]);
+const y = interpolate(progress, [0, 1], [100, 0]);
+const scale = interpolate(progress, [0, 1], [0.8, 1.0]);
+
+<div style={{
+  transform: \`perspective(1000px) rotateX(\${rotateX}deg) translateY(\${y}px) scale(\${scale})\`,
+}}>
+  {uiComponent}
+</div>
+\`\`\`
+
+### Cursor Simulation
+
+**Movement:** Never linear. Cursors move in **Bezier Curves** with an arc.
+
+\`\`\`tsx
+// 1. Spring progress from start to end
+const progress = spring({
+  frame: frame - startFrame,
+  fps,
+  config: { damping: 20, stiffness: 80 }, // Slower, deliberate
+});
+
+// 2. Linear interpolation for X and Y
+const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
+const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
+
+// 3. THE ARC: Parabola that peaks mid-travel (this is the secret sauce)
+const arcHeight = 100; // How much the cursor "loops"
+const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
+
+// 4. Apply arc to Y position
+const cursorY = linearY - arcOffset;
+\`\`\`
+
+**Click Interaction:**
+\`\`\`tsx
+// On click:
+// 1. Cursor scales down
+const cursorScale = isClicking ? 0.8 : 1;
+
+// 2. Button squishes
+const buttonScaleX = isClicking ? 1.05 : 1;
+const buttonScaleY = isClicking ? 0.95 : 1;
+
+// 3. Release both with spring
+\`\`\`
+
+**Standard Cursor SVG:**
+\`\`\`tsx
+// Mac-style cursor (use as reference, customize as needed)
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path
+    d="M4 4L11.5 26L16 17.5L25 25L27 23L18.5 15L28 11.5L4 4Z"
+    fill="black"
+    stroke="white"
+    strokeWidth="2"
+  />
+</svg>
+\`\`\`
+
+### Staggered Lists & Grids
+
+**Rule:** NEVER show a list or grid all at once.
+
+\`\`\`tsx
+const STAGGER_FRAMES = 4; // ~0.05s at 60fps
+
+{items.map((item, i) => {
+  const delay = i * STAGGER_FRAMES;
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 120 },
+  });
+
+  return (
+    <div style={{
+      opacity: progress,
+      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
+    }}>
+      {item}
+    </div>
+  );
+})}
+\`\`\`
+
+---
+
+## 3. Kinetic Typography (Text that Hits)
+
+Text doesn't fade. It slams in, changes fill, or slides up.
+
+### Pattern A: The "Masked Reveal"
+
+Text rises from a floor:
+
+\`\`\`tsx
+<div style={{ overflow: 'hidden', height: 80 }}>
+  <h1 style={{
+    transform: \`translateY(\${interpolate(progress, [0, 1], [100, 0])}%)\`,
+  }}>
+    INTRODUCING
+  </h1>
+</div>
+\`\`\`
+
+### Pattern B: Variable Weight (Animate Keywords)
+
+Don't animate the whole sentence. Animate **keywords**:
+
+\`\`\`tsx
+// "Teams waste HOURS" - only "HOURS" animates
+<p>
+  Teams waste{' '}
+  <span style={{
+    transform: \`scale(\${interpolate(keywordProgress, [0, 1], [1, 1.2])})\`,
+    color: interpolateColors(keywordProgress, [0, 1], ['#F0F0F0', '#FF6B6B']),
+    textShadow: \`0 0 \${glowProgress * 20}px rgba(255,107,107,0.5)\`,
+  }}>
+    HOURS
+  </span>
+</p>
+\`\`\`
+
+### Pattern C: The "Glitch/Tech" Accent
+
+Chromatic aberration on impact:
+
+\`\`\`tsx
+// Duplicate text, offset by 2px with color channels, flash for 2 frames
+{isImpactFrame && (
+  <>
+    <span style={{ position: 'absolute', left: -2, color: '#FF0000', opacity: 0.5 }}>TEXT</span>
+    <span style={{ position: 'absolute', left: 2, color: '#0000FF', opacity: 0.5 }}>TEXT</span>
+  </>
+)}
+\`\`\`
+
+### Text Colors
+
+Never pure white (\`#FFF\`). Use \`#F0F0F0\` with subtle gradient or shadow for depth.
+
+---
+
+## 4. Atmosphere & Backgrounds (The "Deep Space")
+
+Background is never a solid color. It's deep black with floating colored orbs.
+
+### The "Orb" System
+
+\`\`\`tsx
+const MovingBackground: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // Orbs move in figure-8 or circular patterns
+  const orb1X = Math.sin(frame / 60) * 200;
+  const orb1Y = Math.cos(frame / 80) * 100;
+  const orb2X = Math.sin(frame / 70 + Math.PI) * 150;
+  const orb2Y = Math.cos(frame / 90 + Math.PI) * 120;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
+      {/* Orb 1 - Teal */}
+      <div style={{
+        position: 'absolute',
+        width: 600,
+        height: 600,
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%)',
+        filter: 'blur(100px)',
+        transform: \`translate(\${orb1X}px, \${orb1Y}px)\`,
+        left: '20%',
+        top: '30%',
+      }} />
+
+      {/* Orb 2 - Purple */}
+      <div style={{
+        position: 'absolute',
+        width: 500,
+        height: 500,
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.3) 0%, transparent 70%)',
+        filter: 'blur(100px)',
+        transform: \`translate(\${orb2X}px, \${orb2Y}px)\`,
+        right: '20%',
+        bottom: '20%',
+      }} />
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+### Vignette & Noise
+
+\`\`\`tsx
+// Noise texture overlay (5% opacity)
+<AbsoluteFill style={{
+  backgroundImage: 'url(/noise.png)',
+  opacity: 0.05,
+  mixBlendMode: 'overlay',
+}} />
+
+// Vignette (dark corners)
+<AbsoluteFill style={{
+  background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%)',
+}} />
+\`\`\`
+
+---
+
+## 5. Physics & Timing Reference
+
+### Spring Configs
+
+| Use Case | Config | Feel |
+|----------|--------|------|
+| Standard (snappy) | \`{ mass: 1, damping: 15, stiffness: 120 }\` | Smooth, professional |
+| Heavy (UI mockups) | \`{ mass: 2, damping: 20, stiffness: 100 }\` | Weighty, premium |
+| Bouncy (attention) | \`{ mass: 1, damping: 10, stiffness: 150 }\` | Playful overshoot |
+
+### Timing Values
+
+| Action | Frames | Notes |
+|--------|--------|-------|
+| Element entrance | 15-20 | Spring to rest |
+| Stagger gap | 3-5 | Between list items |
+| Hold on key info | 45-60 | Minimum read time |
+| Scene transition | 20-30 | Zoom-through |
+
+### The Golden Rule
+
+Use \`interpolate(frame)\` to ensure \`scale\` or \`rotation\` is changing on **EVERY frame**. No static resting states.
+
+---
+
+## 6. Micro-Tricks from Premium Videos
+
+### The "Match Cut"
+
+Small circle zooms to fill screen, becomes next scene's background:
+
+\`\`\`tsx
+// Circle element scales 50x to wipe to next scene
+const circleScale = interpolate(frame, [MATCH_START, MATCH_END], [1, 50]);
+\`\`\`
+
+### Search Bar Typing
+
+Include blinking cursor:
+
+\`\`\`tsx
+const Typewriter: React.FC<{ text: string }> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const charIndex = Math.floor(frame / 3); // 3 frames per char
+  const showCursor = Math.floor(frame / 15) % 2 === 0; // Blink every 15 frames
+
+  return (
+    <span>
+      {text.slice(0, charIndex)}
+      {showCursor && <span style={{ opacity: 0.8 }}>|</span>}
+    </span>
+  );
+};
+\`\`\`
+
+### The "Card Fan"
+
+Stack cards, then fan out:
+
+\`\`\`tsx
+const cards = [
+  { rotation: -5, x: -20 },
+  { rotation: 0, x: 0 },
+  { rotation: 5, x: 20 },
+];
+
+{cards.map((card, i) => {
+  const fanProgress = spring({ frame: frame - 30, fps, config: { damping: 15, stiffness: 100 } });
+
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: \`rotate(\${fanProgress * card.rotation}deg) translateX(\${fanProgress * card.x}px)\`,
+      zIndex: i,
+    }}>
+      <ProfileCard />
+    </div>
+  );
+})}
+\`\`\`
+
+---
+
+## 7. Strict Animation Guidelines (DO NOT DEVIATE)
+
+**ROLE:** Senior Motion Graphics Engineer for Remotion.
+**REFERENCE STYLE:** "High-End SaaS Product Launch" (e.g., Affable.ai, Linear.app).
+
+### Physics & Timing
+
+- **No Linear Motion:** All spatial movement (X, Y, Scale) must use \`spring\`.
+  - *Standard Spring:* \`{ mass: 1, damping: 15, stiffness: 120 }\` (Snappy but smooth)
+  - *Heavy Spring (Mockups):* \`{ mass: 2, damping: 20, stiffness: 100 }\` (Feels weighty)
+- **Continuous Flow:** Use \`interpolate(frame)\` to ensure \`scale\` or \`rotation\` is changing slightly on EVERY frame. No static resting states.
+
+### UI Component Behavior
+
+- **Entrance:** When a UI card enters, it must use **2.5D Rotation**.
+  - *Code:* \`transform: perspective(1000px) rotateX(\${rotateX}deg) translateY(\${y}px)\`
+  - *Values:* Start at \`rotateX(20deg)\` and \`y(100px)\`. Spring to \`0\`.
+- **Internal Staggering:** If the UI card contains a list or grid, use \`<Sequence>\` or \`delay\` to reveal items one by one (3 frame gap).
+- **Cursor Interaction:** If a cursor clicks a button:
+  1. Cursor scales \`1 -> 0.8\`
+  2. Button scales \`1 -> 0.95\`
+  3. Release both to \`1\` with a spring
+
+### Typography Patterns
+
+- **Pattern A (Headline):** "Masked Slide Up". Text translates Y from \`100%\` inside a clipped container.
+- **Pattern B (Keywords):** "Scale & Glow". Keywords scale to \`1.1\` and emit a \`text-shadow\`.
+- **Colors:** Text is never pure white (\`#FFF\`). Use \`#F0F0F0\` with a subtle gradient or shadow to add depth.
+
+### Background "Aliveness"
+
+- Create a \`<MovingBackground>\` component.
+- It must feature 2-3 \`AbsoluteFill\` gradient orbs that move in a continuous loop using \`Math.sin(frame / slowFactor)\`.
+- This ensures the video has "depth" behind the text.
+
+---
+
+## 8. Seamless Scene Transitions (No Hard Cuts)
+
+In high-end motion design, transitions are rarely separate "effects" (like a cross-dissolve). The *outgoing* scene physically pushes, slides, or zooms into the *incoming* scene.
+
+### The "Wipe" Rule (No Hard Cuts)
+
+- **Forbidden:** Never let Scene A end at frame X and Scene B start at frame X+1 with a simple cut.
+- **Required:** Scene B must exist *above* Scene A (z-index) for at least 15-20 frames before the cut happens.
+- **Mechanism:** Scene B enters using a "Wipe" motion (sliding in from the bottom/right) or a "Scale In" (expanding from a dot).
+
+### The "Zoom-Through" Technique (Best for SaaS)
+
+As Scene A ends, the camera must **accelerate** its zoom:
+
+\`\`\`tsx
+// Scene A Action: At duration - 20 frames, zoom way in
+const scaleA = interpolate(frame, [duration - 20, duration], [1.0, 5.0]);
+
+// Scene B Action: Starts at scale 0.5 and springs to 1.0
+const scaleB = spring({ frame, fps, config: { damping: 14, stiffness: 120 } });
+const scaleBValue = interpolate(scaleB, [0, 1], [0.5, 1]);
+\`\`\`
+
+Result: It looks like the camera flew *through* Scene A to find Scene B behind it.
+
+### The "Color Swipe" (Safety Net)
+
+If a complex match-cut is too hard, use a "Curtain":
+
+\`\`\`tsx
+// A solid colored AbsoluteFill slides in from left, covers screen for 2 frames,
+// then slides out to the right, revealing Scene B
+const curtainX = interpolate(frame, [0, 10, 12, 22], [-100, 0, 0, 100]);
+\`\`\`
+
+### TransitionWrapper Component
+
+Use the \`TransitionWrapper\` from shared components:
+
+\`\`\`tsx
+import { TransitionWrapper } from './shared';
+
+// Types: 'slide' | 'zoom' | 'fade' | 'none'
+// enterFrom: 'left' | 'right' | 'bottom'
+
+<TransitionWrapper type="slide" enterFrom="bottom">
+  <YourScene />
+</TransitionWrapper>
+\`\`\`
+
+### Critical: Overlap Your Sequences
+
+**This is the most important part.** To make transitions work, you must overlap sequences slightly. If Scene 1 is 90 frames, start Scene 2 at frame 75 (15-frame overlap).
+
+\`\`\`tsx
+export const MyVideo = () => {
+  return (
+    <AbsoluteFill>
+      {/* SCENE 1: Ends at frame 100 */}
+      <Sequence from={0} durationInFrames={100}>
+        <SceneOne />
+      </Sequence>
+
+      {/* SCENE 2: Starts at frame 85 (15 frames early!) */}
+      {/* TransitionWrapper slides it ON TOP of Scene 1 */}
+      <Sequence from={85} durationInFrames={150}>
+        <TransitionWrapper type="slide" enterFrom="bottom">
+          <SceneTwo />
+        </TransitionWrapper>
+      </Sequence>
+
+      {/* SCENE 3: Starts early again */}
+      <Sequence from={220} durationInFrames={150}>
+        <TransitionWrapper type="zoom">
+          <SceneThree />
+        </TransitionWrapper>
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+**Why this fixes the "Light Switch" effect:** Because Scene 2 physically slides *over* Scene 1 while Scene 1 is still visible underneath, your brain registers it as continuous movement rather than a "cut."
+
+---
+
+## Quick Tips from Motion Devs
+
+- **Don't use white backgrounds.** The 2.5D lighting and shadows pop much better on dark grey or black backgrounds.
+- **Overlap delays.** If Title starts at frame 10 and Card starts at frame 30, the title hasn't finished moving when the card appears. This overlap is crucial for fluidity.
+- **High FPS.** Ensure your \`remotion.config.ts\` is set to 60fps for springs to look smooth.
+
+---
+
+## Self-Check: Is It Kinetic?
+
+Before rendering, verify:
+
+- [ ] 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)
+- [ ] Text uses masked reveal or keyword animation
+- [ ] Background has moving orbs + vignette + noise
+- [ ] Something is moving on EVERY frame
+- [ ] No static resting states longer than 30 frames
+- [ ] Scene transitions overlap (no hard cuts between scenes)
+- [ ] TransitionWrapper used for slide/zoom entrances
+
+If your video looks like PowerPoint slides with voiceover, **START OVER**.
+`
+  },
+  {
+    filename: "failures.md",
+    content: `# Common Failures - READ THIS FIRST
+
+If your video looks like any of these, START OVER.
+
+## FAILURE 1: Slideshow
+
+\`\`\`
+What you made:
+- Background image
+- Text appears on top
+- Text disappears
+- New background image
+- More text
+
+This is PowerPoint, not a video. REJECTED.
+\`\`\`
+
+## FAILURE 2: Lorem Ipsum / Placeholder Content
+
+\`\`\`
+What you made:
+- "Lorem ipsum dolor sit amet..."
+- "Sample text here"
+- Generic placeholder content
+
+Use REAL content from the project. REJECTED.
+\`\`\`
+
+## FAILURE 3: Static UI Screenshot
+
+\`\`\`
+What you made:
+- Screenshot of the app
+- Text overlay saying "Our Dashboard"
+- No motion, no interaction
+
+Recreate the UI in code and ANIMATE it. REJECTED.
+\`\`\`
+
+## FAILURE 4: Elements Just Appearing
+
+\`\`\`
+What you made:
+- Frame 0: nothing
+- Frame 1: element is fully visible
+- No transition, no animation
+
+Every element must animate in with spring/easing. REJECTED.
+\`\`\`
+
+## FAILURE 5: Hard Cuts Between Scenes (The "Light Switch" Effect)
+
+\`\`\`
+What you made:
+- Scene 1 ends at frame 100
+- Scene 2 starts at frame 101
+- No overlap, no slide, no zoom-through
+- Feels like a light switching on/off
+
+FIX: Overlap sequences by 15-20 frames. Scene 2 must slide/zoom
+ON TOP of Scene 1 while Scene 1 is still visible. Use TransitionWrapper.
+REJECTED.
+\`\`\`
+
+## FAILURE 6: Static Camera
+
+\`\`\`
+What you made:
+- Camera never moves
+- No drift, no zoom, no rotation
+- Feels like watching a screenshot
+
+Camera must ALWAYS be subtly moving. REJECTED.
+\`\`\`
+
+## FAILURE 7: Linear Cursor Movement
+
+\`\`\`
+What you made:
+- Cursor moves in straight lines
+- No overshoot on stops
+- Click has no feedback
+
+Cursor must move in Bezier curves with overshoot. REJECTED.
+\`\`\`
+`
+  },
+  {
+    filename: "parameterization.md",
+    content: `# Parameterization (Critical)
+
+Never hardcode frame numbers. Use variables for all keyframes.
+
+## Why
+
+When you change timing early in video, everything else breaks if hardcoded.
+
+## Pattern
+
+\`\`\`ts
+// Define keyframes as variables
+const SCENE_START = 0;
+const TITLE_IN = SCENE_START + 15;
+const TITLE_HOLD = TITLE_IN + 60;
+const TITLE_OUT = TITLE_HOLD + 15;
+const SUBTITLE_IN = TITLE_IN + 20;  // Relative to title
+const SCENE_END = TITLE_OUT + 30;
+
+// Use in animations
+opacity: interpolate(frame, [TITLE_IN, TITLE_IN + 15], [0, 1])
+\`\`\`
+
+## Scene Duration
+
+\`\`\`ts
+// Calculate from keyframes, don't hardcode
+const sceneDuration = SCENE_END - SCENE_START;
+\`\`\`
+
+## Audio Sync
+
+\`\`\`ts
+// If audio timestamp changes, only update one variable
+const VOICEOVER_START = 45;
+const VISUAL_CUE = VOICEOVER_START + 10;  // Auto-adjusts
+\`\`\`
+
+## Multi-Scene
+
+\`\`\`ts
+const SCENE_1_START = 0;
+const SCENE_1_END = SCENE_1_START + 90;
+const SCENE_2_START = SCENE_1_END - 15;  // 15 frame overlap for transition
+const SCENE_2_END = SCENE_2_START + 120;
+\`\`\`
+`
+  },
+  {
+    filename: "layers.md",
+    content: `# Layers & Composition
+
+Explicit z-index prevents visual bugs.
+
+## Z-Index Scale
+
+| Layer | Z-Index | Examples |
+|-------|---------|----------|
+| Background orbs | 0 | Moving gradients, noise |
+| Vignette | 1 | Dark corners overlay |
+| UI Base | 10 | Main UI container |
+| UI Elements | 20 | Buttons, cards, inputs |
+| Overlays | 30 | Modals, tooltips, highlights |
+| Text/Captions | 40 | Titles, labels |
+| Cursor | 50 | Mouse pointer |
+| Debug | 100 | Frame counter (remove in final) |
+
+## Composition Structure
+
+\`\`\`tsx
+<AbsoluteFill>
+  {/* Background layer */}
+  <MovingBackground />
+
+  {/* Vignette */}
+  <Vignette />
+
+  {/* Camera rig wraps all content */}
+  <CameraRig>
+    <Sequence from={0}>
+      <Scene1 />
+    </Sequence>
+    <Sequence from={SCENE_2_START}>
+      <Scene2 />
+    </Sequence>
+  </CameraRig>
+
+  {/* Audio */}
+  <Audio src={music} volume={0.3} />
+  <Audio src={voiceover} />
+</AbsoluteFill>
+\`\`\`
+
+## Overlapping Sequences
+
+For zoom-through transitions, scenes overlap:
+
+\`\`\`tsx
+<Sequence from={0} durationInFrames={100}>
+  <Scene1 />
+</Sequence>
+<Sequence from={80} durationInFrames={100}>  {/* 20 frame overlap */}
+  <Scene2 />
+</Sequence>
+\`\`\`
+`
+  },
+  {
+    filename: "project-based.md",
+    content: `# Component Extraction (Critical for Product Videos)
+
+When creating a video for a project, **copy the actual components** - don't rebuild from scratch.
+
+## The Goal
+
+Your video should show the REAL product UI, pixel-perfect. Viewers should not be able to tell the difference between a screenshot and your video (except yours is animated with kinetic motion).
+
+## Process: Eject \u2192 Simplify \u2192 Animate
+
+### Step 1: Find Components to Feature
+
+\`\`\`bash
+# Explore the project structure
+ls src/components/
+ls src/app/
+# Find the key UI: dashboards, forms, cards, modals, etc.
+\`\`\`
+
+### Step 2: Copy Component Code
+
+Copy the actual component file into your Remotion project.
+
+### Step 3: Eject - Strip Logic, Keep Visuals
+
+\`\`\`tsx
+// BEFORE: Original component from project
+export function PricingCard({ plan, onSelect }) {
+  const [loading, setLoading] = useState(false);
+  const handleClick = async () => { /* API calls */ };
+  return <div>...</div>;
+}
+
+// AFTER: Ejected for Remotion
+export function PricingCard({ plan, progress, isHovered }) {
+  // No useState, no API calls, no handlers
+  // Just visual + animation props from Remotion
+
+  const entranceProgress = spring({ frame: progress, fps, config: { mass: 2, damping: 20, stiffness: 100 } });
+  const rotateX = interpolate(entranceProgress, [0, 1], [20, 0]);
+
+  return (
+    <div style={{
+      transform: \`perspective(1000px) rotateX(\${rotateX}deg)\`,
+      // ... exact same visual styles as original
+    }}>
+      ...
+    </div>
+  );
+}
+\`\`\`
+
+### Step 4: Add Kinetic Animation
+
+Apply the rules from kinetic-saas.md:
+- 2.5D rotation entrance
+- Spring physics
+- Staggered children
+- Cursor interaction states
+
+### Step 5: Fill With Real Demo Data
+
+\`\`\`tsx
+// Use realistic data that matches the product
+const DEMO_PLANS = [
+  { name: 'Starter', price: 9, features: ['5 projects', '10GB storage'] },
+  { name: 'Pro', price: 29, features: ['Unlimited projects', '100GB storage', 'Priority support'] },
+];
+// NOT: "Plan A", "$XX/mo", "Feature 1"
+\`\`\`
+
+## What to Copy
+
+| Find in Project | Copy to Video |
+|-----------------|---------------|
+| \`tailwind.config.js\` | Colors, fonts, spacing |
+| \`globals.css\` | CSS variables, font imports |
+| \`/public/logo.svg\` | Actual logo file |
+| \`/src/components/*.tsx\` | Component structure & styles |
+
+## Common Mistakes
+
+\u274C Using placeholder colors like \`#333\`
+\u2705 Using exact project colors from tailwind config
+
+\u274C Generic content: "Feature 1", "Lorem ipsum"
+\u2705 Real content: "Unlimited projects", "Priority support"
+
+\u274C Building from scratch based on screenshots
+\u2705 Copying actual component code and ejecting it
+
+\u274C Static fade-in animations
+\u2705 2.5D rotation with spring physics (kinetic style)
+`
+  },
+  {
+    filename: "social-media.md",
+    content: `# Social Media Video Guide (TikTok/Reels/Shorts)
+
+**Platforms:** TikTok, Instagram Reels, YouTube Shorts (all 9:16 vertical)
+
+**Philosophy:** "Don't make ads. Make TikToks." Your video must look native to the platform - lo-fi beats polished.
+
+---
+
+## 1. The "3-Second War"
+
+You have 3 seconds before the thumb scrolls. Win or lose everything.
+
+### Hook Requirements (0-3s)
+
+- **Text on screen in FRAME 1** - no waiting for audio
+- **Movement** - never start static
+- **Pattern interrupt** - something unexpected
+
+### Hook Types
+
+| Type | Description | Use For |
+|------|-------------|---------|
+| Face Close-Up | Tight on face, zoom out | Personal/story |
+| Green Screen | Speaker + background tweet/article | Commentary |
+| Text Slam | Bold text hits screen with sound | Listicles, tips |
+| Movement | Object thrown, quick zoom | Product demos |
+
+### Audio Hooks
+
+Bad: "Today I want to talk about..."
+Good: "Stop scrolling if you hate [X]." / "This feels illegal to know."
+
+---
+
+## 2. Pacing Rules (No Dead Air)
+
+| Rule | Implementation |
+|------|----------------|
+| Visual change every 2-3s | Cut, zoom, or new element every 60-90 frames |
+| No "Millennial Pause" | Never start with 1-2s of stillness |
+| Remove all breaths | Edit out pauses between sentences |
+| Jump cuts are native | Don't smooth-cut; jump cuts feel authentic |
+
+---
+
+## 3. Native Lo-Fi Aesthetic
+
+| Looks Like TV Ad (Bad) | Looks Native (Good) |
+|------------------------|---------------------|
+| Perfect lighting | Natural/ring light |
+| Broadcast fonts | Platform-native fonts |
+| Smooth transitions | Jump cuts |
+| Color graded | Raw, slightly oversaturated |
+
+### Native Font Stack
+
+\`\`\`tsx
+const NATIVE_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+\`\`\`
+
+---
+
+## 4. Safe Zone Rules (CRITICAL)
+
+Platform UI overlays your content. Plan for it.
+
+\`\`\`
+1080x1920 Canvas
++------------------------------------------+
+|  TOP SAFE ZONE (150px)                   |  <- Notch, status bar
+|  ----------------------------------------|
+|                                          |
+|  CONTENT SAFE ZONE                       |
+|  (60px left, 120px right margins)        |
+|                                          |
+|  ----------------------------------------|
+|  BOTTOM SAFE ZONE (384px / 20%)          |  <- Captions, username
+|  [Icon strip on right: 120px]            |  <- Like, Comment, Share
++------------------------------------------+
+\`\`\`
+
+### Safe Zone Values
+
+\`\`\`tsx
+const SAFE_ZONE = {
+  top: 150,      // Notch/status bar
+  bottom: 384,   // 20% of 1920 - captions/username
+  left: 60,      // Edge safety
+  right: 120,    // Like/Comment/Share icons
+};
+
+// Captions must sit ABOVE bottom safe zone
+const CAPTION_BOTTOM = 350; // px from bottom
+\`\`\`
+
+### SafeZoneGuide Component
+
+\`\`\`tsx
+const SafeZoneGuide: React.FC = () => (
+  <AbsoluteFill style={{ pointerEvents: "none" }}>
+    {/* Top danger zone */}
+    <div style={{
+      position: "absolute", top: 0, left: 0, right: 0, height: 150,
+      backgroundColor: "rgba(255,0,0,0.2)", borderBottom: "2px dashed red",
+    }} />
+    {/* Bottom danger zone */}
+    <div style={{
+      position: "absolute", bottom: 0, left: 0, right: 0, height: 384,
+      backgroundColor: "rgba(255,0,0,0.2)", borderTop: "2px dashed red",
+    }} />
+    {/* Right icon strip */}
+    <div style={{
+      position: "absolute", top: 150, right: 0, bottom: 384, width: 120,
+      backgroundColor: "rgba(255,165,0,0.2)", borderLeft: "2px dashed orange",
+    }} />
+  </AbsoluteFill>
+);
+\`\`\`
+
+---
+
+## 5. Content Formats
+
+### Green Screen (Speaker + Background)
+
+\`\`\`tsx
+<AbsoluteFill>
+  <Img src={backgroundImage} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+  <div style={{
+    position: "absolute", bottom: 400, left: 40,
+    width: 300, height: 400, borderRadius: 20, overflow: "hidden",
+  }}>
+    <Video src={speakerVideo} />
+  </div>
+</AbsoluteFill>
+\`\`\`
+
+### Listicle (Rapid-Fire)
+
+\`\`\`tsx
+const FRAMES_PER_ITEM = 60; // 2 seconds per item
+const currentIndex = Math.floor(frame / FRAMES_PER_ITEM);
+// Slam-in with spring animation for each item
+\`\`\`
+
+### Visual ASMR (No Talking)
+
+- No voiceover, music only
+- Slow, deliberate cursor movements
+- Satisfying click feedback
+- Ken Burns zoom on details
+
+### POV Skit
+
+\`\`\`tsx
+<div style={{ position: "absolute", top: 160, left: 40, right: 120, fontSize: 42 }}>
+  POV: {setup}
+</div>
+\`\`\`
+
+---
+
+## 6. TikTok Captions
+
+Use \`@remotion/captions\` with \`createTikTokStyleCaptions\`:
+
+\`\`\`tsx
+import { createTikTokStyleCaptions } from "@remotion/captions";
+
+const { pages } = createTikTokStyleCaptions({
+  captions: transcriptCaptions,
+  combineTokensWithinMilliseconds: 1200, // Higher = more words per page
+});
+\`\`\`
+
+### Word-by-Word Highlighting
+
+\`\`\`tsx
+{page.tokens.map((token) => {
+  const isActive = currentTimeMs >= token.fromMs && currentTimeMs < token.toMs;
+  return (
+    <span style={{
+      color: isActive ? "#FFD700" : "#fff",
+      fontSize: 64,
+      fontWeight: 900,
+      textTransform: "uppercase",
+    }}>
+      {token.text}
+    </span>
+  );
+})}
+\`\`\`
+
+---
+
+## 7. Script Structure (60 Seconds)
+
+| Timestamp | Section | Purpose |
+|-----------|---------|---------|
+| 0:00-0:03 | **HOOK** | Pattern interrupt, bold claim |
+| 0:03-0:10 | **PROBLEM** | Agitate the pain point |
+| 0:10-0:40 | **SOLUTION** | Rapid value delivery |
+| 0:40-0:55 | **PROOF** | Show, don't tell |
+| 0:55-0:60 | **CTA** | Soft ask (Follow/Link in bio) |
+
+### CTA Best Practices
+
+| Do | Don't |
+|----|-------|
+| "Follow for more tips" | "SMASH that like button" |
+| "Link in bio" | "Click the link below" |
+| "Save this for later" | "Subscribe to my channel" |
+
+---
+
+## 8. Quick Reference
+
+### Platform Specs
+
+| Platform | Ratio | Resolution | Duration | FPS |
+|----------|-------|------------|----------|-----|
+| TikTok | 9:16 | 1080x1920 | 15-60s | 30 |
+| Reels | 9:16 | 1080x1920 | 15-90s | 30 |
+| Shorts | 9:16 | 1080x1920 | 15-60s | 30 |
+| YouTube | 16:9 | 1920x1080 | any | 30/60 |
+
+### Timing (30fps)
+
+| Action | Frames | Seconds |
+|--------|--------|---------|
+| Hook impact | 0-3 | 0-0.1s |
+| Text hold min | 45 | 1.5s |
+| Scene change max | 90 | 3s |
+| Ideal scene | 60 | 2s |
+
+### Self-Check
+
+- [ ] Text in FRAME 1 (no millennial pause)
+- [ ] Visual change every 2-3 seconds
+- [ ] All content within safe zones
+- [ ] Captions at bottom: 350px+
+- [ ] No content in bottom 20% or right 120px
+- [ ] Lo-fi aesthetic (not TV ad)
+- [ ] CTA is soft, not desperate
+- [ ] Duration 15-60 seconds
+`
+  }
+];
+
+// 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 getRuleFiles() {
+  const rules = [];
+  for (const rule of VIDEO_RULE_CONTENTS) {
+    rules.push({
+      path: `rules/video/${rule.filename}`,
+      content: rule.content
+    });
+  }
+  return rules;
+}
+function installSkillToPath(skillPath, content) {
+  const skillFile = join(skillPath, "SKILL.md");
+  mkdirSync(skillPath, { recursive: true });
+  writeFileSync(skillFile, content, "utf-8");
+  const rules = getRuleFiles();
+  for (const rule of rules) {
+    const rulePath = join(skillPath, rule.path);
+    const ruleDir = join(skillPath, rule.path.split("/").slice(0, -1).join("/"));
+    mkdirSync(ruleDir, { recursive: true });
+    writeFileSync(rulePath, rule.content, "utf-8");
+  }
+}
+function installSkill(skillName, content, options = {}) {
+  const result = {
+    installed: [],
+    skipped: [],
+    errors: []
+  };
+  const baseDir = options.local ? process.cwd() : homedir();
+  if (options.dir) {
+    try {
+      const resolvedDir = resolve4(options.dir);
+      const skillPath = validatePath(resolvedDir, join("skills", skillName));
+      installSkillToPath(skillPath, content);
+      result.installed.push(options.dir);
+    } catch (err) {
+      result.errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  } else {
+    for (const editor of SUPPORTED_EDITORS) {
+      const editorDir = join(baseDir, editor.dir);
+      const skillPath = join(editorDir, "skills", skillName);
+      const skillFile = join(skillPath, "SKILL.md");
+      if (!existsSync2(editorDir)) {
+        continue;
+      }
+      if (existsSync2(skillFile) && !options.force) {
+        result.skipped.push(editor.name);
+        continue;
+      }
+      try {
+        installSkillToPath(skillPath, content);
+        result.installed.push(editor.name);
+      } catch (err) {
+        result.errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+  }
+  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)}`);
+      }
+    }
+  }
+  return result;
+}
+function getSupportedEditorNames() {
+  return SUPPORTED_EDITORS.map((e) => e.name);
+}
+
+// src/commands/skill/index.ts
+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("# 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").action(async (options) => {
+  const skillContent = generateSkillContent(brand);
+  const result = installSkill(brand.name, skillContent, {
+    dir: options.dir,
+    local: options.local,
+    force: options.force
+  });
+  console.log();
+  if (result.installed.length > 0) {
+    success("Skill installed successfully");
+    console.log();
+    keyValue("Installed to", result.installed.join(", "));
+  }
+  if (result.skipped.length > 0) {
+    console.log();
+    info(`Skipped (already exists): ${result.skipped.join(", ")}`);
+    console.log(chalk12.gray("  Use --force to overwrite"));
+  }
+  if (result.errors.length > 0) {
+    console.log();
+    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();
+    console.log(chalk12.gray("Supported editors: " + getSupportedEditorNames().join(", ")));
+    console.log(chalk12.gray("Use --dir <path> to install to a specific directory"));
+  }
+  console.log();
+});
+skillCommand.command("show").description("Display the skill content").action(() => {
+  console.log(generateSkillContent(brand));
+});
+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 result = uninstallSkill(brand.name, { local: options.local });
+  console.log();
+  if (result.removed.length > 0) {
+    success("Skill uninstalled");
+    keyValue("Removed from", result.removed.join(", "));
+  } else {
+    info("No installed skills found");
+  }
+  if (result.errors.length > 0) {
+    for (const err of result.errors) {
+      warn(`Failed to remove: ${err}`);
+    }
+  }
+  console.log();
+});
+
+// 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";
+var generateCommand = new Command15("generate").description("Generate speech from text").requiredOption("-t, --text <text>", "Text to convert to speech").requiredOption("-o, --output <path>", "Output file path").option("-v, --voice <voice>", "Voice name or ID (e.g., Kore, Rachel, alloy)").option("-p, --provider <provider>", "Provider: gemini, elevenlabs, openai").option("-m, --model <model>", "Model (provider-specific)").option("-s, --speed <speed>", "Speech speed 0.25-4.0 (default: 1.0)").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+  const format = options.format;
+  const spinner = format === "human" ? ora8("Generating speech...").start() : null;
+  let speed;
+  if (options.speed) {
+    speed = parseFloat(options.speed);
+    if (isNaN(speed) || speed < 0.25 || speed > 4) {
+      spinner?.stop();
+      error("Speed must be between 0.25 and 4.0");
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
+  }
+  try {
+    const result = await generateSpeech({
+      text: options.text,
+      options: {
+        provider: options.provider,
+        voice: options.voice,
+        model: options.model,
+        speed
+      }
+    });
+    spinner?.stop();
+    const outputPath = options.output.endsWith(`.${result.format}`) ? options.output : `${options.output}.${result.format}`;
+    await writeFile2(outputPath, result.audioData);
+    if (format === "json") {
+      printJson({
+        status: "completed",
+        output: outputPath,
+        duration: result.duration,
+        cost: result.cost,
+        provider: result.provider,
+        format: result.format
+      });
+      return;
+    }
+    if (format === "quiet") {
+      console.log(outputPath);
+      return;
+    }
+    success(`Saved to: ${outputPath}`);
+    info(`Duration: ${result.duration.toFixed(2)}s`);
+    info(`Provider: ${result.provider}`);
+    info(`Cost: $${result.cost.toFixed(6)}`);
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Unknown error");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+var voicesCommand = new Command15("voices").description("List available voices").option("-p, --provider <provider>", "Filter by provider: gemini, elevenlabs, openai").option("-f, --format <format>", "Output format: human, json", "human").action(async (options) => {
+  const spinner = options.format === "human" ? ora8("Fetching voices...").start() : null;
+  try {
+    const result = await getVoices();
+    spinner?.stop();
+    if (options.format === "json") {
+      if (options.provider) {
+        const providerVoices = result.voices[options.provider];
+        printJson(providerVoices || []);
+      } else {
+        printJson(result.voices);
+      }
+      return;
+    }
+    const providers = options.provider ? [options.provider] : ["gemini", "elevenlabs", "openai"];
+    for (const provider of providers) {
+      const voices = result.voices[provider];
+      if (!voices || voices.length === 0) continue;
+      console.log();
+      console.log(`${provider.toUpperCase()} Voices:`);
+      console.log("-".repeat(50));
+      for (const voice of voices) {
+        console.log(`  ${voice.name} (${voice.id})`);
+        console.log(`    ${voice.description}`);
+      }
+    }
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Unknown error");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+var ttsCommand = new Command15("tts").description("Text-to-speech commands").addCommand(generateCommand).addCommand(voicesCommand);
 
 // src/commands/music.ts
 init_api();
@@ -3860,8 +5169,118 @@ init_output();
 init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
-import { mkdir, writeFile as writeFile5, readFile as readFile2 } from "fs/promises";
-import { join as join2 } from "path";
+import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm } from "fs/promises";
+import { join as join2, resolve as resolve5 } from "path";
+import { execSync, spawn } from "child_process";
+var DEFAULT_TEMPLATE = "inizio-inc/remotion-composition";
+var DEFAULT_FPS = 30;
+function parseScriptIntoSections(script) {
+  if (script.includes("---") || script.includes("[Section")) {
+    const parts = script.split(/---|\[Section \d+\]/i).filter((s) => s.trim());
+    if (parts.length > 1) {
+      return parts.map((p) => p.trim());
+    }
+  }
+  const sentences = script.split(/(?<=[.!?])\s+/).map((s) => s.trim()).filter((s) => s.length > 0);
+  const sections = [];
+  let pendingShort = "";
+  for (const sentence of sentences) {
+    const wordCount = sentence.split(/\s+/).length;
+    if (pendingShort) {
+      sections.push(`${pendingShort} ${sentence}`);
+      pendingShort = "";
+    } else if (wordCount < 5 && sections.length < sentences.length - 1) {
+      pendingShort = sentence;
+    } else {
+      sections.push(sentence);
+    }
+  }
+  if (pendingShort) {
+    if (sections.length > 0) {
+      sections[sections.length - 1] += ` ${pendingShort}`;
+    } else {
+      sections.push(pendingShort);
+    }
+  }
+  return sections;
+}
+function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, timestamps) {
+  if (timestamps && timestamps.characters.length > 0) {
+    return calculateSectionTimingFromTimestamps(sections, timestamps, fps);
+  }
+  const totalWords = sections.reduce((sum, s) => sum + s.split(/\s+/).length, 0);
+  let currentTime = 0;
+  return sections.map((text, index) => {
+    const wordCount = text.split(/\s+/).length;
+    const proportion = wordCount / totalWords;
+    const durationInSeconds = totalDuration * proportion;
+    const durationInFrames = Math.round(durationInSeconds * fps);
+    const section = {
+      id: index + 1,
+      text,
+      wordCount,
+      startTime: currentTime,
+      endTime: currentTime + durationInSeconds,
+      durationInSeconds,
+      durationInFrames
+    };
+    currentTime += durationInSeconds;
+    return section;
+  });
+}
+function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
+  const { characters, characterStartTimesSeconds, characterEndTimesSeconds } = timestamps;
+  const fullText = characters.join("");
+  const results = [];
+  let charIndex = 0;
+  for (let i = 0; i < sections.length; i++) {
+    const sectionText = sections[i];
+    const sectionLength = sectionText.length;
+    while (charIndex < characters.length && characters[charIndex].match(/^\s*$/)) {
+      charIndex++;
+    }
+    const startCharIndex = charIndex;
+    const startTime = characterStartTimesSeconds[startCharIndex] || 0;
+    charIndex += sectionLength;
+    let endCharIndex = charIndex - 1;
+    while (endCharIndex > startCharIndex && characters[endCharIndex]?.match(/^\s*$/)) {
+      endCharIndex--;
+    }
+    const endTime = characterEndTimesSeconds[Math.min(endCharIndex, characterEndTimesSeconds.length - 1)] || startTime + 1;
+    const durationInSeconds = endTime - startTime;
+    const durationInFrames = Math.round(durationInSeconds * fps);
+    results.push({
+      id: i + 1,
+      text: sectionText,
+      wordCount: sectionText.split(/\s+/).length,
+      startTime,
+      endTime,
+      durationInSeconds,
+      durationInFrames
+    });
+  }
+  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,(.+)$/);
@@ -3891,61 +5310,199 @@ 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 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 {
-    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
-    };
-    if (format === "human") {
-      spinner?.stop();
-      success(`Voiceover: ${voiceoverPath} (${ttsResult.duration.toFixed(1)}s)`);
-      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 }
+        });
+        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 }
+            });
+            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) + 5);
     if (spinner) spinner.text = "Generating music...";
     let musicResult = await generateMusic({
       prompt: musicPrompt,
@@ -3980,58 +5537,15 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       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 (format === "human") {
-      spinner?.stop();
-      success(`Images: Downloaded ${downloadedImages.length} images to ${imagesDir}`);
-      spinner?.start();
-    }
     if (spinner) spinner.text = "Writing manifest...";
+    const totalDurationInFrames = Math.round(totalDuration * DEFAULT_FPS);
     const manifest = {
-      topic,
-      script,
-      voiceover: voiceoverInfo,
       music: musicInfo,
-      images: downloadedImages,
+      images: allImages,
+      videos: allVideos,
+      scenes,
+      totalDurationInFrames,
+      fps: DEFAULT_FPS,
       totalCost,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
@@ -4049,18 +5563,19 @@ 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(`Images: ${downloadedImages.length} downloaded`);
     info(`Manifest: ${manifestPath}`);
     console.log();
     info(`Total cost: $${totalCost.toFixed(4)}`);
-    console.log();
-    info("Next steps:");
-    info("  1. Create Remotion project (see remotion-best-practices skill)");
-    info("  2. Use manifest data to configure video composition");
-    info("  3. Run: npm start (preview) / npm run render (build)");
   } catch (err) {
     spinner?.stop();
     error(err instanceof Error ? err.message : "Unknown error");
@@ -4111,10 +5626,135 @@ var searchCommand2 = new Command19("search").description("Search for stock video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(createCommand2).addCommand(searchCommand2);
+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 = resolve5(process.cwd(), name);
+    try {
+      await access(targetDir);
+      spinner?.stop();
+      error(`Directory "${name}" already exists`);
+      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 {
+      execSync(`npx --yes degit ${options.template} "${targetDir}"`, {
+        stdio: "pipe"
+      });
+    } catch {
+      if (spinner) spinner.text = "Cloning template...";
+      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 });
+    }
+    if (format === "human") {
+      spinner?.stop();
+      success(`Template downloaded to ${name}/`);
+      spinner?.start();
+    }
+    if (options.install) {
+      if (spinner) spinner.text = "Installing dependencies...";
+      await new Promise((resolvePromise, reject) => {
+        const child = spawn("pnpm", ["install"], {
+          cwd: targetDir,
+          stdio: "pipe",
+          shell: true
+        });
+        child.on("close", (code) => {
+          if (code === 0) {
+            resolvePromise();
+          } else {
+            reject(new Error(`pnpm install failed with code ${code}`));
+          }
+        });
+        child.on("error", reject);
+      });
+      if (format === "human") {
+        spinner?.stop();
+        success("Dependencies installed");
+        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;
+    }
+    if (format === "quiet") {
+      console.log(targetDir);
+      return;
+    }
+    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}`);
+    if (!options.install) {
+      info("  pnpm install");
+    }
+    info("  pnpm dev             # Preview in Remotion Studio");
+    info("  cc video create ...  # Generate assets to public/");
+    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(createCommand3).addCommand(searchCommand2);
 
 // src/index.ts
-var VERSION = "0.1.5";
+var VERSION = "0.1.7";
 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({