@conceptcraft/mindframes 0.1.7 → 0.1.8

package/dist/index.js

@@ -10,6 +10,64 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
+// src/lib/brand.ts
+import path from "path";
+function detectBrand() {
+  const binaryPath = process.argv[1] || "";
+  const binaryName = path.basename(binaryPath).replace(/\.(js|ts)$/, "");
+  const brandId = COMMAND_TO_BRAND[binaryName];
+  if (brandId) {
+    return BRANDS[brandId];
+  }
+  for (const [cmd2, id] of Object.entries(COMMAND_TO_BRAND)) {
+    if (binaryPath.includes(`/${cmd2}`) || binaryPath.includes(`\\${cmd2}`)) {
+      return BRANDS[id];
+    }
+  }
+  return BRANDS.mindframes;
+}
+var BRANDS, COMMAND_TO_BRAND, brand;
+var init_brand = __esm({
+  "src/lib/brand.ts"() {
+    "use strict";
+    BRANDS = {
+      conceptcraft: {
+        id: "conceptcraft",
+        name: "conceptcraft",
+        displayName: "ConceptCraft",
+        description: "CLI tool for ConceptCraft presentation generation",
+        commands: ["cc", "conceptcraft"],
+        apiUrl: "https://conceptcraft.ai",
+        docsUrl: "https://docs.conceptcraft.ai",
+        packageName: "@conceptcraft/cli",
+        configDir: ".conceptcraft",
+        apiKeyEnvVar: "CONCEPTCRAFT_API_KEY",
+        apiUrlEnvVar: "CONCEPTCRAFT_API_URL"
+      },
+      mindframes: {
+        id: "mindframes",
+        name: "mindframes",
+        displayName: "Mindframes",
+        description: "CLI tool for Mindframes presentation generation",
+        commands: ["mf", "mindframes"],
+        apiUrl: "https://mindframes.app",
+        docsUrl: "https://docs.mindframes.app",
+        packageName: "@conceptcraft/mindframes",
+        configDir: ".mindframes",
+        apiKeyEnvVar: "MINDFRAMES_API_KEY",
+        apiUrlEnvVar: "MINDFRAMES_API_URL"
+      }
+    };
+    COMMAND_TO_BRAND = {
+      cc: "conceptcraft",
+      conceptcraft: "conceptcraft",
+      mf: "mindframes",
+      mindframes: "mindframes"
+    };
+    brand = detectBrand();
+  }
+});
+
 // src/lib/config.ts
 import Conf from "conf";
 function getConfig() {
@@ -25,7 +83,7 @@ function getConfig() {
   };
 }
 function getApiKey() {
-  const envKey = process.env.CC_MINDFRAMES_API_KEY ?? process.env.CONCEPTCRAFT_API_KEY;
+  const envKey = process.env[brand.apiKeyEnvVar] ?? process.env.CC_SLIDES_API_KEY;
   if (envKey) {
     return envKey;
   }
@@ -35,7 +93,7 @@ function setApiKey(key) {
   config.set("apiKey", key);
 }
 function getApiUrl() {
-  const envUrl = process.env.NEXT_PUBLIC_API_URL ?? process.env.CONCEPTCRAFT_API_URL;
+  const envUrl = process.env[brand.apiUrlEnvVar] ?? process.env.CC_SLIDES_API_URL;
   if (envUrl) {
     return envUrl;
   }
@@ -97,6 +155,7 @@ var DEFAULT_API_URL, schema, config;
 var init_config = __esm({
   "src/lib/config.ts"() {
     "use strict";
+    init_brand();
     DEFAULT_API_URL = "https://www.mindframes.app";
     schema = {
       apiKey: {
@@ -128,7 +187,7 @@ var init_config = __esm({
       }
     };
     config = new Conf({
-      projectName: "mindframes",
+      projectName: brand.name,
       schema
     });
   }
@@ -440,7 +499,7 @@ async function request(endpoint, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
       // AUTH_ERROR
@@ -509,7 +568,7 @@ async function streamRequest(endpoint, body) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -585,7 +644,7 @@ async function uploadFile(filePath) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -745,7 +804,7 @@ async function exportPresentation(presentationId, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -779,7 +838,7 @@ async function importPresentation(fileBuffer, fileName, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -832,7 +891,7 @@ async function generateBlog(presentationId, documentCreatedAt, options = {}) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'mindframes login' or set CC_MINDFRAMES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -907,7 +966,7 @@ async function generateSpeech(ttsRequest) {
   const apiUrl = getApiUrl();
   if (!hasAuth()) {
     throw new ApiError(
-      "Not authenticated. Run 'cc login' or set CC_SLIDES_API_KEY environment variable.",
+      `Not authenticated. Run '${brand.commands[0]} login' or set ${brand.apiKeyEnvVar} environment variable.`,
       401,
       2
     );
@@ -1035,6 +1094,7 @@ var init_api = __esm({
     "use strict";
     init_config();
     init_auth();
+    init_brand();
     ApiError = class extends Error {
       constructor(message, statusCode, exitCode = 1) {
         super(message);
@@ -1395,60 +1455,11 @@ var init_login = __esm({
 });
 
 // src/index.ts
+init_brand();
+init_login();
 import { Command as Command20 } from "commander";
 import chalk13 from "chalk";
 
-// src/lib/brand.ts
-import path from "path";
-var BRANDS = {
-  conceptcraft: {
-    id: "conceptcraft",
-    name: "conceptcraft",
-    displayName: "ConceptCraft",
-    description: "CLI tool for ConceptCraft presentation generation",
-    commands: ["cc", "conceptcraft"],
-    apiUrl: "https://conceptcraft.ai",
-    docsUrl: "https://docs.conceptcraft.ai",
-    packageName: "@conceptcraft/cli",
-    configDir: ".conceptcraft"
-  },
-  mindframes: {
-    id: "mindframes",
-    name: "mindframes",
-    displayName: "Mindframes",
-    description: "CLI tool for Mindframes presentation generation",
-    commands: ["mf", "mindframes"],
-    apiUrl: "https://mindframes.app",
-    docsUrl: "https://docs.mindframes.app",
-    packageName: "@mindframes/cli",
-    configDir: ".mindframes"
-  }
-};
-var COMMAND_TO_BRAND = {
-  cc: "conceptcraft",
-  conceptcraft: "conceptcraft",
-  mf: "mindframes",
-  mindframes: "mindframes"
-};
-function detectBrand() {
-  const binaryPath = process.argv[1] || "";
-  const binaryName = path.basename(binaryPath).replace(/\.(js|ts)$/, "");
-  const brandId = COMMAND_TO_BRAND[binaryName];
-  if (brandId) {
-    return BRANDS[brandId];
-  }
-  for (const [cmd2, id] of Object.entries(COMMAND_TO_BRAND)) {
-    if (binaryPath.includes(`/${cmd2}`) || binaryPath.includes(`\\${cmd2}`)) {
-      return BRANDS[id];
-    }
-  }
-  return BRANDS.mindframes;
-}
-var brand = detectBrand();
-
-// src/index.ts
-init_login();
-
 // src/commands/logout.ts
 init_config();
 init_feature_cache();
@@ -3129,569 +3140,422 @@ 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/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.`
-};
-
-// src/commands/skill/sections/prerequisites.ts
-var prerequisites = {
-  title: "Prerequisites",
-  render: (ctx) => `## Prerequisites
-
-\`\`\`bash
-npm install -g ${ctx.pkg}
-${ctx.cmd} login    # Authenticate (opens browser)
-${ctx.cmd} whoami   # Verify auth
-\`\`\`
+// src/commands/skill/rules/video/content.ts
+var VIDEO_RULE_CONTENTS = [
+  {
+    filename: "video-creation-guide.md",
+    content: `# Video Creation Guide
 
-### Authentication
+### Related Skills
 
-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\``
-};
+Use these installed skills for implementation details:
+- \`remotion-best-practices\` \u2014 Remotion patterns and API
+- \`threejs-*\` skills \u2014 for R3F/WebGL (particles, 3D elements)
 
-// 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 \`${ctx.cmd} create\`
-3. **Share URL** - Return the presentation link to the user`
-};
+## Core Rules
 
-// src/commands/skill/sections/create-command.ts
-var createCommand2 = {
-  title: "Create Command",
-  render: (ctx) => `## Commands
+Your task is not "making slideshows" \u2014 you are **simulating a real interface** that obeys cinematic physics.
 
-### Create Presentation
+### Hard Constraints
 
-Context is **required**. Provide it via one of these methods:
+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
 
-\`\`\`bash
-# Upload files (PDFs, PPTX, images, docs)
-${ctx.cmd} create "Product Overview" --file ./deck.pptx --file ./logo.png
+---
 
-# Direct text context
-${ctx.cmd} create "Topic Title" --context "Key points, data, facts..."
+## Code Organization
 
-# From a text file
-${ctx.cmd} create "Topic Title" --context-file ./notes.md
+- Create separate files: \`Button.tsx\`, \`Window.tsx\`, \`Cursor.tsx\`
+- Use Zod schemas for props validation
+- Extract animation configs to constants
 
-# Pipe content (auto-detected)
-cat README.md | ${ctx.cmd} create "Project Overview"
+\`\`\`tsx
+import { spring, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
 
-# From URLs (scraped automatically)
-${ctx.cmd} create "Competitor Analysis" --sources https://example.com/report
+// ALWAYS use spring for element entrances
+// NEVER use magic numbers
+\`\`\`
 
-# Combine multiple sources
-cat src/auth/*.ts | ${ctx.cmd} create "Auth System" \\
-  --file ./architecture.png \\
-  --context "Focus on security patterns"
-\`\`\``
-};
+---
 
-// src/commands/skill/sections/create-options.ts
-var createOptions = {
-  title: "Create Options",
-  render: (_ctx) => `### Create Options
-
-| Option | Description | Default |
-|--------|-------------|---------|
-| \`-n, --slides <count>\` | Number of slides (1-20) | 10 |
-| \`-m, --mode <mode>\` | Quality: \`instant\`, \`fast\`, \`balanced\`, \`best\` | balanced |
-| \`-t, --tone <tone>\` | Tone: \`professional\`, \`educational\`, \`creative\`, \`formal\`, \`casual\` | professional |
-| \`--amount <amount>\` | Density: \`minimal\`, \`concise\`, \`detailed\`, \`extensive\` | concise |
-| \`--audience <text>\` | Target audience | General Audience |
-| \`-g, --goal <type>\` | Purpose: \`inform\`, \`persuade\`, \`train\`, \`learn\`, \`entertain\`, \`report\` | - |
-| \`--custom-goal <text>\` | Custom goal description | - |
-| \`-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 |`
-};
+## Aesthetics (Linear/Stripe Style)
 
-// src/commands/skill/sections/other-commands.ts
-var otherCommands = {
-  title: "Other Commands",
-  render: (ctx) => `### Other Commands
+\`\`\`css
+/* Shadows - soft, expensive */
+box-shadow: 0 20px 50px -12px rgba(0,0,0,0.5);
 
-\`\`\`bash
-# Check authentication
-${ctx.cmd} whoami
+/* Borders - thin, barely visible */
+border: 1px solid rgba(255,255,255,0.1);
+\`\`\`
 
-# List presentations
-${ctx.cmd} list
-${ctx.cmd} list --format json
+- Fonts: Inter or SF Pro
+- Never pure \`#000000\` \u2014 use \`#050505\`
+- Never pure \`#FFFFFF\` \u2014 use \`#F0F0F0\`
 
-# Get presentation details
-${ctx.cmd} get <id-or-slug>
+---
 
-# Export to ZIP
-${ctx.cmd} export <id-or-slug> -o presentation.zip
+## Self-Check Before Render
 
-# Import presentation
-${ctx.cmd} import ./presentation.zip
+- [ ] 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)
 
-# Manage branding
-${ctx.cmd} branding list
-${ctx.cmd} branding extract https://company.com
+**If your video looks like PowerPoint with voiceover \u2014 START OVER.**
+`
+  },
+  {
+    filename: "animation-physics.md",
+    content: `# Animation Physics
 
-# Install/manage this skill
-${ctx.cmd} skill install
-${ctx.cmd} skill show
-\`\`\``
-};
+## Spring Configurations
 
-// src/commands/skill/sections/examples.ts
-var examples = {
-  title: "Examples",
-  render: (ctx) => `## Examples
+### Heavy UI (Modals, Sidebars)
+\`\`\`tsx
+config: { mass: 1, stiffness: 100, damping: 15 }
+\`\`\`
 
-### Present a Codebase Feature
+### Light UI (Tooltips, Badges)
+\`\`\`tsx
+config: { mass: 0.6, stiffness: 180, damping: 12 }
+\`\`\`
 
-\`\`\`bash
-# Read the relevant files and create presentation
-cat src/lib/auth.ts src/lib/session.ts | ${ctx.cmd} create "Authentication System" \\
-  --slides 8 --tone educational --audience "New developers" \\
-  --goal train
+### Standard (Snappy)
+\`\`\`tsx
+config: { mass: 1, damping: 15, stiffness: 120 }
 \`\`\`
 
-### Technical Documentation with Diagrams
+---
 
-\`\`\`bash
-${ctx.cmd} create "API Reference" \\
-  --file ./docs/api.md \\
-  --file ./diagrams/architecture.png \\
-  --mode best --amount detailed \\
-  --goal inform
-\`\`\`
+## Staggering
 
-### Quick Project Overview
+**NEVER show a list all at once.**
 
-\`\`\`bash
-cat README.md package.json | ${ctx.cmd} create "Project Introduction" \\
-  -m instant --slides 5
-\`\`\`
+\`\`\`tsx
+const STAGGER_FRAMES = 3; // 3-5 frames between items
 
-### Sales Deck from Existing Presentation
+{items.map((item, i) => {
+  const delay = i * STAGGER_FRAMES;
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 120 },
+  });
 
-\`\`\`bash
-${ctx.cmd} create "Product Demo" \\
-  --file ./existing-deck.pptx \\
-  --goal persuade \\
-  --audience "Enterprise buyers" \\
-  --tone professional
+  return (
+    <div style={{
+      opacity: progress,
+      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
+    }}>
+      {item}
+    </div>
+  );
+})}
 \`\`\`
 
-### Research Presentation
+---
 
-\`\`\`bash
-${ctx.cmd} create "Market Analysis" \\
-  --file ./research.pdf \\
-  --sources https://report.com/industry.pdf \\
-  --tone formal --audience "Executive team" \\
-  --goal report
-\`\`\``
-};
+## Cursor Movement
 
-// src/commands/skill/sections/output.ts
-var output = {
-  title: "Output",
-  render: (ctx) => `## Output
+**Cursor NEVER moves in straight lines.**
 
-Successful creation returns:
-\`\`\`
-\u2713 Presentation created successfully
+\`\`\`tsx
+const progress = spring({
+  frame: frame - startFrame,
+  fps,
+  config: { damping: 20, stiffness: 80 },
+});
 
-  Title: Authentication System
-  Slides: 8
-  Generated in: 45s \xB7 12,500 tokens
+const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
+const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
 
-  Open: ${ctx.url}/en/view/presentations/auth-system-v1-abc123
+// THE ARC: Parabola that peaks mid-travel
+const arcHeight = 100;
+const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
+const cursorY = linearY - arcOffset;
 \`\`\`
 
-For scripting, use JSON output:
-\`\`\`bash
-URL=$(${ctx.cmd} create "Demo" --context "..." -o json | jq -r '.viewUrl')
-\`\`\``
-};
+---
 
-// 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.`
-};
+## Click Interaction
 
-// src/commands/skill/sections/file-types.ts
-var fileTypes = {
-  title: "Supported File Types",
-  render: (_ctx) => `## Supported File Types
+\`\`\`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
+\`\`\`
 
-- **Documents**: PDF, DOCX, XLSX, PPTX
-- **Images**: JPEG, PNG, GIF, WebP
-- **Text**: Markdown, TXT, CSV, JSON`
-};
+---
 
-// src/commands/skill/sections/troubleshooting.ts
-var troubleshooting = {
-  title: "Troubleshooting",
-  render: (ctx) => `## Troubleshooting
+## Timing Reference
 
-\`\`\`bash
-# Check if authenticated
-${ctx.cmd} whoami
+| 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
 
-# Re-authenticate if needed
-${ctx.cmd} login
+## SceneWrapper
 
-# Debug mode
-${ctx.cmd} create "Test" --context "test" --debug
-\`\`\``
-};
+\`\`\`tsx
+<SceneWrapper
+  durationInFrames={300}
+  transitionType="slideLeft"
+  cameraMotion="panRight"
+>
+  <FeatureLayer />
+  <CursorLayer />
+  <ParticleLayer />
+</SceneWrapper>
+\`\`\`
 
-// src/commands/skill/sections/video-creation.ts
-var videoCreation = {
-  title: "Video Creation",
-  render: (ctx) => `## Video Creation
+---
 
-### How to Create a Perfect Video
+## Layer Structure (Z-Index)
 
-Videos must feel like premium tech launches (Stripe, Apple, Linear) - **Kinetic Composition**, not slideshows.
+| Layer | Z-Index |
+|-------|---------|
+| Background orbs | 0 |
+| Vignette | 1 |
+| UI Base | 10 |
+| UI Elements | 20 |
+| Overlays | 30 |
+| Text/Captions | 40 |
+| Cursor | 50 |
 
-**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
+---
 
-### Required Reading (The Motion Bible)
+## Case Study: SaaS Task Tracker
 
-| 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 |
+### Scene 1: "The Hook" (~5s)
 
-**Required:** \`npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices\`
+1. Dark background (\`#0B0C10\`), grid drifting
+2. Scattered circles magnetically attract \u2192 morph into logo
+3. Logo expands \u2192 becomes sidebar navigation
 
-### Workflow
+### Scene 2: "Micro-Interaction" (~6s)
 
-#### Phase 1: Discovery
+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
 
-Explore the project thoroughly - assets, components, branding, what makes this product/topic unique.
+### Scene 3: "The Connection" (~5s)
 
-#### Phase 2: Video Brief
+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
 
-Present a brief outline (scenes, duration, assets found) and get user approval before production.
+---
 
-#### Phase 3: Production
+## Composition
 
-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?
+\`\`\`tsx
+<AbsoluteFill>
+  <MovingBackground />
+  <Vignette />
+  <CameraRig>
+    <Sequence from={0} durationInFrames={100}>
+      <Scene1 />
+    </Sequence>
+    <Sequence from={85} durationInFrames={150}>  {/* 15 frame overlap! */}
+      <Scene2 />
+    </Sequence>
+  </CameraRig>
+  <Audio src={music} volume={0.3} />
+</AbsoluteFill>
+\`\`\`
+`
+  },
+  {
+    filename: "scene-transitions.md",
+    content: `# Scene Transitions
 
-#### Phase 4: Render
+**No FadeIn/FadeOut.** Only contextual transitions.
 
-Auto-render when done: \`pnpm exec remotion render FullVideo\`
+---
 
-Only open Studio if user asks.
+## Types
 
-### Kinetic Checklist
+### 1. Object Persistence
+Same chart transforms (data, color, scale) while UI changes around it.
 
-- [ ] 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
+### 2. Mask Reveal
+Button expands to screen size via SVG \`clipPath\`.
 
-### Asset Generation
+### 3. Speed Ramps
+Scene A accelerates out, Scene B starts fast then slows.
 
-\`\`\`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");
-}
+## Match Cut Example
 
-// 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";
+\`\`\`
+Scene A: Zoom into avatar
+         \u2193
+Avatar color fills screen
+         \u2193
+Scene B: That color IS the notification background
+\`\`\`
 
-// src/commands/skill/editors.ts
-var SUPPORTED_EDITORS = [
-  { name: "Claude Code", dir: ".claude" },
-  { name: "Cursor", dir: ".cursor" },
-  { name: "Codex", dir: ".codex" },
-  { name: "OpenCode", dir: ".opencode" },
-  { name: "Windsurf", dir: ".windsurf" },
-  { name: "Agent", dir: ".agent" }
-];
+---
 
-// src/commands/skill/rules/video/content.ts
-var VIDEO_RULE_CONTENTS = [
-  {
-    filename: "video-creation-guide.md",
-    content: `# Video Creation Guide
+## Overlapping Sequences (CRITICAL)
 
-> **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
+\`\`\`tsx
+<Sequence from={0} durationInFrames={100}>
+  <SceneOne />
+</Sequence>
+<Sequence from={85} durationInFrames={150}>  {/* 15 frames early! */}
+  <SceneTwo />
+</Sequence>
+\`\`\`
 
 ---
 
-# The "Kinetic SaaS" Motion Design System
-
-**Objective:** Replicate the high-energy, fluid feel of premium tech product videos (Stripe, Apple, Linear, Affable.ai).
+## TransitionSeries
 
-**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
+\`\`\`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
 
-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.
+## Reflection (Glass Glint)
 
----
+Diagonal gradient sweeps every 5 seconds.
 
-## 1. The Global Camera Rig (The "Anti-Static" Layer)
+\`\`\`tsx
+const cycleFrame = frame % 300;
+const sweepProgress = interpolate(cycleFrame, [0, 60], [-100, 200], {
+  extrapolateRight: 'clamp',
+});
+\`\`\`
 
-Even when reading text, the screen is slowly zooming or panning.
+---
 
-### Virtual Camera
+## Background Breathing
 
-Every scene must be wrapped in a \`CameraRig\` component:
+Background is NEVER static.
 
 \`\`\`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>
-  );
-};
+const orb1X = Math.sin(frame / 60) * 200;
+const orb1Y = Math.cos(frame / 80) * 100;
 \`\`\`
 
-### Zoom-Through Transitions
+---
 
-Transitions are NOT just fades - they are camera movements:
+## Typewriter Effect
 
 \`\`\`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
+const charIndex = Math.floor(frame / 3);
+const showCursor = Math.floor(frame / 15) % 2 === 0;
+
+<span>
+  {text.slice(0, charIndex)}
+  {showCursor && <span>|</span>}
+</span>
 \`\`\`
 
 ---
 
-## 2. UI & Mockup Animation Rules (Rebuilding Reality)
+## Vignette & Noise
 
-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:**
+\`\`\`tsx
+// Noise
+<AbsoluteFill style={{
+  backgroundImage: 'url(/noise.png)',
+  opacity: 0.03,
+  mixBlendMode: 'overlay',
+}} />
 
-\`\`\`bash
-# Before building ANY UI, explore the project
-ls src/components/
-ls src/app/
+// 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
 
-**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
+## Audio-Reactive
 
-See [project-based.md](project-based.md) for the full component extraction process.
+- **Kick:** \`scale(1.005)\` pulse
+- **Snare:** Trigger scene changes
+- **Hi-hats:** Cursor flicker, particle shimmer
 
-**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)
+## Motion Blur (Fake)
 
 \`\`\`tsx
-// Heavy spring for weighty feel
-const progress = spring({
-  frame,
-  fps,
-  config: { mass: 2, damping: 20, stiffness: 100 },
-});
-
-// 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]);
+// Trail: Render 3-4 copies with opacity 0.3, 1-frame delay
 
-<div style={{
-  transform: \`perspective(1000px) rotateX(\${rotateX}deg) translateY(\${y}px) scale(\${scale})\`,
-}}>
-  {uiComponent}
-</div>
+// Or drop shadow for fast movement:
+filter: \`drop-shadow(\${velocityX * 0.5}px \${velocityY * 0.5}px 10px rgba(0,0,0,0.3))\`
 \`\`\`
 
-### Cursor Simulation
+---
 
-**Movement:** Never linear. Cursors move in **Bezier Curves** with an arc.
+## 3D Perspective
 
 \`\`\`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>
-  );
-})}
+<div style={{ perspective: '1000px' }}>
+  <div style={{
+    transform: 'rotateX(5deg) rotateY(10deg)',
+    transformStyle: 'preserve-3d',
+  }}>
+    {/* Your UI */}
+  </div>
+</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:
+## Kinetic Typography
 
+### Masked Reveal
 \`\`\`tsx
 <div style={{ overflow: 'hidden', height: 80 }}>
   <h1 style={{
@@ -3702,886 +3566,766 @@ Text rises from a floor:
 </div>
 \`\`\`
 
-### Pattern B: Variable Weight (Animate Keywords)
+### Keyword Animation
+Animate keywords, not whole sentences.
+`
+  },
+  {
+    filename: "remotion-config.md",
+    content: `# Remotion Configuration
 
-Don't animate the whole sentence. Animate **keywords**:
+## FPS & Resolution
 
-\`\`\`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>
-\`\`\`
+- **60 FPS mandatory** \u2014 30fps looks choppy
+- **1920\xD71080** Full HD
+- **Center:** \`{x: 960, y: 540}\`
 
-### Pattern C: The "Glitch/Tech" Accent
+---
 
-Chromatic aberration on impact:
+## Timing
 
-\`\`\`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>
-  </>
-)}
-\`\`\`
+- 1 second = 60 frames
+- Fast interaction = 15-20 frames
+- No scene > 8 seconds without action
+
+---
 
-### Text Colors
+## Entry-Action-Exit Structure
 
-Never pure white (\`#FFF\`). Use \`#F0F0F0\` with subtle gradient or shadow for depth.
+| Phase | Duration |
+|-------|----------|
+| Entry | 0.0s - 0.5s |
+| Action | 0.5s - (duration - 1s) |
+| Exit | last 1s |
 
 ---
 
-## 4. Atmosphere & Backgrounds (The "Deep Space")
+## Font Loading
 
-Background is never a solid color. It's deep black with floating colored orbs.
+\`\`\`tsx
+const [handle] = useState(() => delayRender());
 
-### The "Orb" System
+useEffect(() => {
+  document.fonts.ready.then(() => {
+    continueRender(handle);
+  });
+}, [handle]);
+\`\`\`
 
-\`\`\`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;
+## Zod Schema
 
-  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>
-  );
-};
+\`\`\`tsx
+export const SceneSchema = z.object({
+  titleText: z.string(),
+  buttonColor: z.string(),
+  cursorPath: z.array(z.object({ x: z.number(), y: z.number() })),
+});
 \`\`\`
 
-### Vignette & Noise
+---
 
-\`\`\`tsx
-// Noise texture overlay (5% opacity)
-<AbsoluteFill style={{
-  backgroundImage: 'url(/noise.png)',
-  opacity: 0.05,
-  mixBlendMode: 'overlay',
-}} />
+## SaaS Video Kit Components
 
-// Vignette (dark corners)
-<AbsoluteFill style={{
-  background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%)',
-}} />
-\`\`\`
+| 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 |
 
 ---
 
-## 5. Physics & Timing Reference
+## Code Rules
 
-### Spring Configs
+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
 
-| 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 |
+For Stripe/Apple/Linear quality.
 
-### 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 |
+## Global Lighting Engine
 
-### The Golden Rule
+\`\`\`tsx
+const lightSource = { x: 0.2, y: -0.5 };
+const gradientAngle = Math.atan2(lightSource.y, lightSource.x) * (180 / Math.PI);
 
-Use \`interpolate(frame)\` to ensure \`scale\` or \`rotation\` is changing on **EVERY frame**. No static resting states.
+<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)\`,
+}} />
+\`\`\`
 
 ---
 
-## 6. Micro-Tricks from Premium Videos
-
-### The "Match Cut"
+## Noise & Dithering
 
-Small circle zooms to fill screen, becomes next scene's background:
+Every background needs noise overlay (opacity 0.02-0.05). Prevents YouTube banding.
 
-\`\`\`tsx
-// Circle element scales 50x to wipe to next scene
-const circleScale = interpolate(frame, [MATCH_START, MATCH_END], [1, 50]);
-\`\`\`
+---
 
-### Search Bar Typing
+## React Three Fiber
 
-Include blinking cursor:
+For particles, 3D globes \u2014 use WebGL via \`@remotion/three\`, not CSS 3D.
 
 \`\`\`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
+import { ThreeCanvas } from '@remotion/three';
 
-  return (
-    <span>
-      {text.slice(0, charIndex)}
-      {showCursor && <span style={{ opacity: 0.8 }}>|</span>}
-    </span>
-  );
-};
+<AbsoluteFill>
+  <HtmlUI />
+  <ThreeCanvas>
+    <Particles />
+  </ThreeCanvas>
+</AbsoluteFill>
 \`\`\`
 
-### The "Card Fan"
+See \`threejs-*\` skills for implementation.
 
-Stack cards, then fan out:
+---
 
-\`\`\`tsx
-const cards = [
-  { rotation: -5, x: -20 },
-  { rotation: 0, x: 0 },
-  { rotation: 5, x: 20 },
-];
+## Virtual Camera Rig
+
+Move camera, not elements:
 
-{cards.map((card, i) => {
-  const fanProgress = spring({ frame: frame - 30, fps, config: { damping: 15, stiffness: 100 } });
+\`\`\`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={{
-      position: 'absolute',
-      transform: \`rotate(\${fanProgress * card.rotation}deg) translateX(\${fanProgress * card.x}px)\`,
-      zIndex: i,
+      transform: \`translateX(\${panX}px) scale(\${zoom})\`,
+      transformOrigin: 'center',
     }}>
-      <ProfileCard />
+      {children}
     </div>
   );
-})}
+};
 \`\`\`
 
 ---
 
-## 7. Strict Animation Guidelines (DO NOT DEVIATE)
+## Motion Rules
 
-**ROLE:** Senior Motion Graphics Engineer for Remotion.
-**REFERENCE STYLE:** "High-End SaaS Product Launch" (e.g., Affable.ai, Linear.app).
+- **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
 
-### Physics & Timing
+## 1. Music Ends Before Video Finishes
 
-- **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.
+**Problem:** Music duration is shorter than video duration, causing awkward silence at the end.
 
-### UI Component Behavior
+**Solution:** Loop music in Remotion using the \`loop\` prop:
 
-- **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
+\`\`\`tsx
+import { Audio } from 'remotion';
 
-### Typography Patterns
+<Audio src={musicSrc} volume={0.3} loop />
+\`\`\`
 
-- **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.
+**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
 
-### 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.
+## 2. Music Transitions Sound Abrupt
 
----
+**Problem:** Music cuts harshly when scenes change or video ends.
 
-## 8. Seamless Scene Transitions (No Hard Cuts)
+**Fix in Remotion:**
+\`\`\`tsx
+import { interpolate, Audio } from 'remotion';
 
-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.
+// 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' }
+);
 
-### The "Wipe" Rule (No Hard Cuts)
+<Audio src={music} volume={musicVolume} />
+\`\`\`
 
-- **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)
+## 3. Scene Transitions Too Harsh
 
-As Scene A ends, the camera must **accelerate** its zoom:
+**Problem:** Scenes change abruptly without smooth transitions.
 
+**Fix:** Use \`@remotion/transitions\` with overlapping:
 \`\`\`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]);
+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>
 \`\`\`
 
-Result: It looks like the camera flew *through* Scene A to find Scene B behind it.
+---
 
-### The "Color Swipe" (Safety Net)
+## 4. Voiceover Lacks Energy
 
-If a complex match-cut is too hard, use a "Curtain":
+**Problem:** Voiceover sounds flat/monotone.
 
-\`\`\`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]);
+**Fix:** Pass \`voiceSettings\` in scenes JSON:
+\`\`\`json
+{
+  "scenes": [...],
+  "voice": "Kore",
+  "voiceSettings": {
+    "style": 0.6,
+    "stability": 0.4,
+    "speed": 0.95
+  }
+}
 \`\`\`
 
-### TransitionWrapper Component
+- \`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
 
-Use the \`TransitionWrapper\` from shared components:
+---
 
-\`\`\`tsx
-import { TransitionWrapper } from './shared';
+## 5. Video Duration Mismatch
 
-// Types: 'slide' | 'zoom' | 'fade' | 'none'
-// enterFrom: 'left' | 'right' | 'bottom'
+**Problem:** Brief says 30-45s but video is 20s (because scene duration = voiceover duration).
 
-<TransitionWrapper type="slide" enterFrom="bottom">
-  <YourScene />
-</TransitionWrapper>
+**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
 
-### Critical: Overlap Your Sequences
+**Problem:** Generic UI instead of pixel-perfect project components.
 
-**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).
+**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
-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>
-  );
-};
+// 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>
 \`\`\`
 
-**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
+## 7. Missing Physics & Lighting
 
-- **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.
+**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.
 ---
 
-## Self-Check: Is It Kinetic?
+# ${displayName} Video Creation CLI
 
-Before rendering, verify:
+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.
 
-- [ ] 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
+**Stack:** Remotion (React video framework) + React Three Fiber (R3F) + Three.js for 3D/WebGL, particles, shaders, lighting.
 
-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.
+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.
 
-## 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.
-\`\`\`
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
 
-## FAILURE 2: Lorem Ipsum / Placeholder Content
+---
 
-\`\`\`
-What you made:
-- "Lorem ipsum dolor sit amet..."
-- "Sample text here"
-- Generic placeholder content
+## CRITICAL: Professional Composition Rules
 
-Use REAL content from the project. REJECTED.
-\`\`\`
+**These rules are MANDATORY for all marketing/product videos:**
 
-## FAILURE 3: Static UI Screenshot
+### \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"
 
-\`\`\`
-What you made:
-- Screenshot of the app
-- Text overlay saying "Our Dashboard"
-- No motion, no interaction
+### \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
 
-Recreate the UI in code and ANIMATE it. REJECTED.
-\`\`\`
-
-## FAILURE 4: Elements Just Appearing
+### 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>
 \`\`\`
-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.
+**\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>
 \`\`\`
 
-## 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.
+**\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
+}} />
 \`\`\`
 
-## FAILURE 6: Static Camera
-
+**\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
+}} />
 \`\`\`
-What you made:
-- Camera never moves
-- No drift, no zoom, no rotation
-- Feels like watching a screenshot
 
-Camera must ALWAYS be subtly moving. REJECTED.
-\`\`\`
+### Layout Grid System:
 
-## FAILURE 7: Linear Cursor Movement
+**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;
 \`\`\`
-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)
+**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
 
-Never hardcode frame numbers. Use variables for all keyframes.
+---
 
-## Why
+## Prerequisites
 
-When you change timing early in video, everything else breaks if hardcoded.
+Before using this skill, ensure you have:
 
-## Pattern
+1. **Load related skills:**
+   \`\`\`
+   remotion-best-practices
+   threejs-fundamentals
+   \`\`\`
 
-\`\`\`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;
+2. **Authenticate:**
+   \`\`\`bash
+   ${cmd2} login
+   \`\`\`
 
-// Use in animations
-opacity: interpolate(frame, [TITLE_IN, TITLE_IN + 15], [0, 1])
-\`\`\`
+3. **Remotion installed** (if creating videos):
+   \`\`\`bash
+   pnpm install remotion @remotion/cli
+   \`\`\`
 
-## Scene Duration
+---
 
-\`\`\`ts
-// Calculate from keyframes, don't hardcode
-const sceneDuration = SCENE_END - SCENE_START;
-\`\`\`
+## Video Creation Workflow
 
-## Audio Sync
+### Phase 0: Load Skills (MANDATORY)
 
-\`\`\`ts
-// If audio timestamp changes, only update one variable
-const VOICEOVER_START = 45;
-const VISUAL_CUE = VOICEOVER_START + 10;  // Auto-adjusts
+Before ANY video work, invoke these skills:
 \`\`\`
-
-## 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;
+remotion-best-practices
+threejs-fundamentals
 \`\`\`
-`
-  },
-  {
-    filename: "layers.md",
-    content: `# Layers & Composition
 
-Explicit z-index prevents visual bugs.
+### Phase 1: Discovery
 
-## Z-Index Scale
+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
 
-| 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) |
+### Phase 2: Video Brief
 
-## Composition Structure
+Present a brief outline (scenes \u22648s each, duration, assets found) and get user approval before production.
 
-\`\`\`tsx
-<AbsoluteFill>
-  {/* Background layer */}
-  <MovingBackground />
+### Phase 3: Production
 
-  {/* 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>
-\`\`\`
+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
 
-## Overlapping Sequences
+### Phase 4: Render & Thumbnail (REQUIRED)
 
-For zoom-through transitions, scenes overlap:
+\`\`\`bash
+# 1. Render the video (with voiceover and music already included)
+pnpm exec remotion render FullVideo
 
-\`\`\`tsx
-<Sequence from={0} durationInFrames={100}>
-  <Scene1 />
-</Sequence>
-<Sequence from={80} durationInFrames={100}>  {/* 20 frame overlap */}
-  <Scene2 />
-</Sequence>
+# 2. ALWAYS embed thumbnail before delivering
+${cmd2} video thumbnail out/FullVideo.mp4 --frame 60
 \`\`\`
-`
-  },
-  {
-    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.
+**Note:** Remotion videos include per-scene voiceovers and background music baked in during render.
 
-## 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
+## Asset Generation
 
-### Step 1: Find Components to Feature
+Generate voiceover, music, and visual assets for each scene:
 
 \`\`\`bash
-# Explore the project structure
-ls src/components/
-ls src/app/
-# Find the key UI: dashboards, forms, cards, modals, etc.
+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
 \`\`\`
 
-### Step 2: Copy Component Code
+**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)
 
-Copy the actual component file into your Remotion project.
+---
 
-### Step 3: Eject - Strip Logic, Keep Visuals
+## Core Video Rules
 
-\`\`\`tsx
-// BEFORE: Original component from project
-export function PricingCard({ plan, onSelect }) {
-  const [loading, setLoading] = useState(false);
-  const handleClick = async () => { /* API calls */ };
-  return <div>...</div>;
-}
+${VIDEO_RULE_CONTENTS.map((rule) => rule.content).join("\n\n---\n\n")}
 
-// AFTER: Ejected for Remotion
-export function PricingCard({ plan, progress, isHovered }) {
-  // No useState, no API calls, no handlers
-  // Just visual + animation props from Remotion
+## Useful Commands
 
-  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>
-  );
-}
-\`\`\`
+\`\`\`bash
+# Generate video assets
+${cmd2} video create < scenes.json
+cat scenes.json | ${cmd2} video create --output ./public
 
-### Step 4: Add Kinetic Animation
+# Initialize Remotion project
+${cmd2} video init my-video
 
-Apply the rules from kinetic-saas.md:
-- 2.5D rotation entrance
-- Spring physics
-- Staggered children
-- Cursor interaction states
+# Embed thumbnail
+${cmd2} video thumbnail out/video.mp4 --frame 60
 
-### Step 5: Fill With Real Demo Data
+# Search for stock assets
+${cmd2} images search "mountain landscape" --limit 10
+${cmd2} videos search "ocean waves" --limit 5
 
-\`\`\`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"
+# Generate audio
+${cmd2} audio generate "Your script here" --voice Kore
+${cmd2} music generate "upbeat corporate" --duration 30
 \`\`\`
 
-## 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 |
+## Best Practices
 
-## Common Mistakes
+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
 
-\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"
+## Troubleshooting
 
-\u274C Building from scratch based on screenshots
-\u2705 Copying actual component code and ejecting it
+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
 
-\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)
+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.
+---
 
-**Platforms:** TikTok, Instagram Reels, YouTube Shorts (all 9:16 vertical)
+# ${displayName} Presentation CLI
 
-**Philosophy:** "Don't make ads. Make TikToks." Your video must look native to the platform - lo-fi beats polished.
+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.
 
 ---
 
-## 1. The "3-Second War"
-
-You have 3 seconds before the thumb scrolls. Win or lose everything.
+## Authentication
 
-### Hook Requirements (0-3s)
+\`\`\`bash
+# Login via OAuth
+${cmd2} login
 
-- **Text on screen in FRAME 1** - no waiting for audio
-- **Movement** - never start static
-- **Pattern interrupt** - something unexpected
+# Or set API key
+export ${name.toUpperCase().replace(/-/g, "_")}_API_KEY="your-key-here"
+\`\`\`
 
-### 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 |
+## Creating Presentations
 
-### Audio Hooks
+### From Text
 
-Bad: "Today I want to talk about..."
-Good: "Stop scrolling if you hate [X]." / "This feels illegal to know."
+\`\`\`bash
+${cmd2} create "AI-powered product analytics platform"
+\`\`\`
 
----
+### From File
 
-## 2. Pacing Rules (No Dead Air)
+\`\`\`bash
+${cmd2} create --file product-brief.md
+\`\`\`
 
-| 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 |
+### From URL
 
----
+\`\`\`bash
+${cmd2} create --url https://company.com/product
+\`\`\`
 
-## 3. Native Lo-Fi Aesthetic
+### From Piped Content
 
-| 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 |
+\`\`\`bash
+cat research.txt | ${cmd2} create
+pbpaste | ${cmd2} create
+\`\`\`
 
-### Native Font Stack
+### Advanced Options
 
-\`\`\`tsx
-const NATIVE_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+\`\`\`bash
+${cmd2} create "Topic" \\
+  --slides 10 \\
+  --style professional \\
+  --branding my-brand \\
+  --template minimal \\
+  --output presentation.zip
 \`\`\`
 
 ---
 
-## 4. Safe Zone Rules (CRITICAL)
+## Presentation Options
 
-Platform UI overlays your content. Plan for it.
+- **\`--slides <count>\`** - Number of slides (default: 8-12 based on content)
+- **\`--style <style>\`** - Presentation style: professional, creative, minimal, corporate
+- **\`--branding <name>\`** - Use saved branding profile
+- **\`--template <name>\`** - Design template to use
+- **\`--output <file>\`** - Export to file (.zip, .pptx, .pdf)
+- **\`--format <format>\`** - Output format: human, json, quiet
 
-\`\`\`
-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
+## Managing Presentations
 
-\`\`\`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
-};
+\`\`\`bash
+# List all presentations
+${cmd2} list
+${cmd2} list --format json
 
-// Captions must sit ABOVE bottom safe zone
-const CAPTION_BOTTOM = 350; // px from bottom
-\`\`\`
+# Get presentation details
+${cmd2} get <id-or-slug>
 
-### SafeZoneGuide Component
+# Export presentation
+${cmd2} export <id-or-slug> -o presentation.zip
 
-\`\`\`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>
-);
+# Import presentation
+${cmd2} import ./presentation.zip
+
+# Delete presentation
+${cmd2} delete <id-or-slug>
 \`\`\`
 
 ---
 
-## 5. Content Formats
+## Branding Management
 
-### 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>
-\`\`\`
+\`\`\`bash
+# List saved brands
+${cmd2} branding list
 
-### Listicle (Rapid-Fire)
+# Extract branding from website
+${cmd2} branding extract https://company.com
 
-\`\`\`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
+# Use branding in presentation
+${cmd2} create "Topic" --branding company-brand
 \`\`\`
 
-### Visual ASMR (No Talking)
+---
 
-- No voiceover, music only
-- Slow, deliberate cursor movements
-- Satisfying click feedback
-- Ken Burns zoom on details
+## Stock Asset Search
 
-### POV Skit
+\`\`\`bash
+# Search for images
+${cmd2} images search "mountain landscape" --limit 10
+${cmd2} images search "business team" --format json
 
-\`\`\`tsx
-<div style={{ position: "absolute", top: 160, left: 40, right: 120, fontSize: 42 }}>
-  POV: {setup}
-</div>
+# Search for videos
+${cmd2} videos search "ocean waves" --limit 5
+${cmd2} videos search "city timelapse" --orientation landscape
 \`\`\`
 
 ---
 
-## 6. TikTok Captions
+## Best Practices
 
-Use \`@remotion/captions\` with \`createTikTokStyleCaptions\`:
+1. **Provide context** - More input = better presentations
+2. **Use branding** - Extract and apply brand consistency
+3. **Review content** - AI-generated content should be reviewed
+4. **Export for sharing** - Use \`--output\` to create shareable files
+5. **Iterate** - Regenerate specific slides if needed
 
-\`\`\`tsx
-import { createTikTokStyleCaptions } from "@remotion/captions";
+---
 
-const { pages } = createTikTokStyleCaptions({
-  captions: transcriptCaptions,
-  combineTokensWithinMilliseconds: 1200, // Higher = more words per page
-});
-\`\`\`
+## Troubleshooting
 
-### Word-by-Word Highlighting
+**Authentication Issues:**
+\`\`\`bash
+# Check current user
+${cmd2} whoami
 
-\`\`\`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>
-  );
-})}
+# Re-authenticate
+${cmd2} logout
+${cmd2} login
 \`\`\`
 
----
-
-## 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) |
+**Generation Failures:**
+- Ensure input is clear and has enough context
+- Try different styles or templates
+- Check API status and quotas
 
-### 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" |
+**Export Issues:**
+- Verify output format is supported
+- Check file permissions in output directory
+- Ensure presentation ID is correct
 
 ---
 
-## 8. Quick Reference
-
-### Platform Specs
+## Examples
 
-| 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 |
+**Quick pitch deck:**
+\`\`\`bash
+${cmd2} create "SaaS analytics platform for e-commerce" --slides 8 --style professional
+\`\`\`
 
-### Timing (30fps)
+**From product brief:**
+\`\`\`bash
+${cmd2} create --file brief.md --branding acme --output pitch.zip
+\`\`\`
 
-| 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 |
+**Research presentation:**
+\`\`\`bash
+cat research-notes.txt | ${cmd2} create --slides 15 --style minimal
+\`\`\`
+`;
+}
 
-### Self-Check
+// 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";
 
-- [ ] 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/editors.ts
+var SUPPORTED_EDITORS = [
+  { name: "Claude Code", dir: ".claude" },
+  { name: "Cursor", dir: ".cursor" },
+  { name: "Codex", dir: ".codex" },
+  { name: "OpenCode", dir: ".opencode" },
+  { name: "Windsurf", dir: ".windsurf" },
+  { name: "Agent", dir: ".agent" }
 ];
 
 // src/commands/skill/installer.ts
@@ -4594,27 +4338,10 @@ function validatePath(basePath, targetPath) {
   }
   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 = {
@@ -4678,67 +4405,113 @@ function getSupportedEditorNames() {
 }
 
 // src/commands/skill/index.ts
-var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skill for AI coding assistants`).addHelpText(
+var skillContext = {
+  name: brand.name,
+  cmd: brand.commands[0],
+  displayName: brand.displayName
+};
+var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skills for AI coding assistants`).addHelpText(
   "after",
   `
 ${chalk12.bold("Examples:")}
-  ${chalk12.gray("# Install skill for all detected editors")}
-  $ ${brand.name} skill install
+  ${chalk12.gray("# Install video skill")}
+  $ ${brand.commands[0]} skill install video
+
+  ${chalk12.gray("# Install presentation skill")}
+  $ ${brand.commands[0]} skill install presentation
+
+  ${chalk12.gray("# Install both skills")}
+  $ ${brand.commands[0]} skill install
 
   ${chalk12.gray("# Install to specific directory")}
-  $ ${brand.name} skill install --dir ~/.claude
+  $ ${brand.commands[0]} skill install video --dir ~/.claude
 
   ${chalk12.gray("# Show skill content")}
-  $ ${brand.name} skill show
+  $ ${brand.commands[0]} skill show video
 `
 );
-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(", "));
+skillCommand.command("install").description(`Install ${brand.displayName} skills for AI coding assistants`).argument("[type]", "Skill type: video, presentation, or omit for both").option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").action(async (type, options) => {
+  const skillsToInstall = [];
+  if (!type || type === "video") {
+    skillsToInstall.push({
+      name: `${brand.name}-video`,
+      content: generateVideoSkillContent(skillContext)
+    });
   }
-  if (result.skipped.length > 0) {
-    console.log();
-    info(`Skipped (already exists): ${result.skipped.join(", ")}`);
-    console.log(chalk12.gray("  Use --force to overwrite"));
+  if (!type || type === "presentation") {
+    skillsToInstall.push({
+      name: `${brand.name}-presentation`,
+      content: generatePresentationSkillContent(skillContext)
+    });
   }
-  if (result.errors.length > 0) {
-    console.log();
-    for (const err of result.errors) {
-      error(err);
-    }
+  if (type && type !== "video" && type !== "presentation") {
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
   }
-  if (result.installed.length === 0 && result.skipped.length === 0 && result.errors.length === 0) {
-    info("No supported AI coding assistants detected.");
+  console.log();
+  for (const skill of skillsToInstall) {
+    info(`Installing ${skill.name}...`);
+    const result = installSkill(skill.name, skill.content, {
+      dir: options.dir,
+      local: options.local,
+      force: options.force
+    });
+    if (result.installed.length > 0) {
+      success(`${skill.name} installed successfully`);
+      keyValue("  Installed to", result.installed.join(", "));
+    }
+    if (result.skipped.length > 0) {
+      info(`  Skipped (already exists): ${result.skipped.join(", ")}`);
+      console.log(chalk12.gray("    Use --force to overwrite"));
+    }
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        error(`  ${err}`);
+      }
+    }
+    if (result.installed.length === 0 && result.skipped.length === 0 && result.errors.length === 0) {
+      info("  No supported AI coding assistants detected");
+      console.log(chalk12.gray("  Supported editors: " + getSupportedEditorNames().join(", ")));
+      console.log(chalk12.gray("  Use --dir <path> to install to a specific directory"));
+    }
     console.log();
-    console.log(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(", "));
+skillCommand.command("show").description("Display skill content").argument("[type]", "Skill type: video or presentation (default: video)").action((type = "video") => {
+  if (type === "video") {
+    console.log(generateVideoSkillContent(skillContext));
+  } else if (type === "presentation") {
+    console.log(generatePresentationSkillContent(skillContext));
   } else {
-    info("No installed skills found");
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
+  }
+});
+skillCommand.command("uninstall").description(`Remove ${brand.displayName} skills from AI coding assistants`).argument("[type]", "Skill type: video, presentation, or omit for both").option("-g, --global", "Uninstall globally (from home directory)", true).option("-l, --local", "Uninstall locally (from current directory)").action(async (type, options) => {
+  const skillsToRemove = [];
+  if (!type || type === "video") {
+    skillsToRemove.push(`${brand.name}-video`);
   }
-  if (result.errors.length > 0) {
-    for (const err of result.errors) {
-      warn(`Failed to remove: ${err}`);
+  if (!type || type === "presentation") {
+    skillsToRemove.push(`${brand.name}-presentation`);
+  }
+  if (type && type !== "video" && type !== "presentation") {
+    error(`Invalid skill type: ${type}. Must be "video" or "presentation"`);
+    process.exit(1);
+  }
+  console.log();
+  for (const skillName of skillsToRemove) {
+    const result = uninstallSkill(skillName, { local: options.local });
+    if (result.removed.length > 0) {
+      success(`${skillName} uninstalled`);
+      keyValue("  Removed from", result.removed.join(", "));
+    } else {
+      info(`  ${skillName} not found`);
+    }
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        warn(`  Failed to remove: ${err}`);
+      }
     }
   }
   console.log();
@@ -5000,7 +4773,7 @@ async function downloadFile2(url, outputPath) {
   const buffer = await response.arrayBuffer();
   await writeFile4(outputPath, Buffer.from(buffer));
 }
-var mixCommand = new Command17("create").description("Mix audio tracks into a video").requiredOption("--video <url>", "Input video file/URL").option("--music <url>", "Background music file/URL").option("--voice <url>", "Voiceover file/URL").option("--music-volume <percent>", "Music volume 0-100", "50").option("--voice-volume <percent>", "Voice volume 0-100", "100").option("-o, --output <path>", "Output file path").option("--no-wait", "Do not wait for completion").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var mixCommand = new Command17("create").description("Mix audio tracks into a video (music will loop to match video duration)").requiredOption("--video <url>", "Input video file/URL").option("--music <url>", "Background music file/URL (will loop if shorter than video)").option("--voice <url>", "Voiceover file/URL").option("--music-volume <percent>", "Music volume 0-100 (default: 30, recommended for mix with voice)", "30").option("--voice-volume <percent>", "Voice volume 0-100", "100").option("-o, --output <path>", "Output file path").option("--no-wait", "Do not wait for completion").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   if (!options.music && !options.voice) {
     error("At least one of --music or --voice must be provided");
     process.exit(EXIT_CODES.INVALID_INPUT);
@@ -5169,9 +4942,10 @@ init_output();
 init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
-import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm } from "fs/promises";
+import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm, cp } from "fs/promises";
 import { join as join2, resolve as resolve5 } from "path";
 import { execSync, spawn } from "child_process";
+import ffmpegPath from "ffmpeg-static";
 var DEFAULT_TEMPLATE = "inizio-inc/remotion-composition";
 var DEFAULT_FPS = 30;
 function parseScriptIntoSections(script) {
@@ -5310,7 +5084,7 @@ function getExtension(url) {
   }
   return "jpg";
 }
-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) => {
+var createCommand2 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing...").start() : null;
   try {
@@ -5362,7 +5136,10 @@ var createCommand3 = new Command19("create").description("Create video assets (v
         if (spinner) spinner.text = `[${scene.name}] Generating speech...`;
         const ttsResult = await generateSpeech({
           text: scene.script,
-          options: { voice }
+          options: {
+            voice,
+            voiceSettings: scenesInput.voiceSettings
+          }
         });
         const audioPath = join2(audioDir, `${filename}.${ttsResult.format}`);
         await writeFile5(audioPath, ttsResult.audioData);
@@ -5417,7 +5194,7 @@ var createCommand3 = new Command19("create").description("Create video assets (v
           try {
             const videoResults = await searchVideos({
               query: scene.videoQuery,
-              options: { maxResults: 1 }
+              options: { maxResults: 1, license: "free" }
             });
             const vids = videoResults.data.results.flatMap((r) => r.results);
             totalCost += videoResults.data.totalCost;
@@ -5502,7 +5279,12 @@ var createCommand3 = new Command19("create").description("Create video assets (v
         spinner?.start();
       }
     }
-    const musicDuration = Math.min(30, Math.ceil(totalDuration) + 5);
+    const musicDuration = Math.min(30, Math.ceil(totalDuration));
+    console.log(`[Music Generation] Requesting music:`, {
+      prompt: musicPrompt,
+      requestedDuration: musicDuration,
+      totalAudioDuration: totalDuration
+    });
     if (spinner) spinner.text = "Generating music...";
     let musicResult = await generateMusic({
       prompt: musicPrompt,
@@ -5526,15 +5308,28 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       await downloadFile3(musicResult.audioUrl, musicPath);
     }
     totalCost += musicResult.cost || 0;
+    const actualMusicDuration = musicResult.duration || musicDuration;
+    console.log(`[Music Generation] Received music:`, {
+      requestedDuration: musicDuration,
+      returnedDuration: musicResult.duration,
+      actualUsedDuration: actualMusicDuration,
+      totalAudioDuration: totalDuration,
+      difference: actualMusicDuration - totalDuration,
+      audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
+    });
     const musicInfo = {
       path: "audio/music.mp3",
-      duration: musicResult.duration || musicDuration,
+      duration: actualMusicDuration,
       prompt: musicPrompt,
       cost: musicResult.cost || 0
     };
     if (format === "human") {
       spinner?.stop();
       success(`Music: ${musicPath} (${musicInfo.duration}s)`);
+      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.`);
+      }
       spinner?.start();
     }
     if (spinner) spinner.text = "Writing manifest...";
@@ -5582,7 +5377,7 @@ var createCommand3 = new Command19("create").description("Create video assets (v
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var searchCommand2 = new Command19("search").description("Search for stock videos").argument("<query>", "Search query").option("-n, --max-results <count>", "Maximum number of results", "10").option("-o, --orientation <type>", "Video orientation: landscape, portrait, square, any", "any").option("-l, --license <type>", "License type: free, premium, any", "any").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (query, options) => {
+var searchCommand2 = new Command19("search").description("Search for stock videos").argument("<query>", "Search query").option("-n, --max-results <count>", "Maximum number of results", "10").option("-o, --orientation <type>", "Video orientation: landscape, portrait, square, any", "any").option("-l, --license <type>", "License type: free, premium, any", "free").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (query, options) => {
   const { maxResults, orientation, license, format } = options;
   const spinner = format === "human" ? ora12("Searching for videos...").start() : null;
   try {
@@ -5751,10 +5546,147 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2);
+function getFfmpegPath() {
+  if (!ffmpegPath) {
+    throw new Error("ffmpeg-static binary not found. Try reinstalling the CLI.");
+  }
+  return ffmpegPath;
+}
+var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail/poster image into a video file for preview in Slack, Twitter, etc.").argument("<video>", "Video file to add thumbnail to (e.g., out/video.mp4)").option("-i, --image <path>", "Thumbnail image to embed (if not provided, extracts from video)").option("-f, --frame <number>", "Frame number to extract as thumbnail (default: 30)", "30").option("-c, --composition <id>", "Remotion composition to extract frame from (uses Remotion still)").option("-o, --output <path>", "Output video path (default: overwrites input)").option("--json", "Output as JSON").option("-q, --quiet", "Only output the file path").action(async (videoPath, options) => {
+  const format = options.json ? "json" : options.quiet ? "quiet" : "human";
+  const spinner = format === "human" ? ora12("Processing...").start() : null;
+  try {
+    let ffmpeg;
+    try {
+      ffmpeg = getFfmpegPath();
+    } catch (err) {
+      spinner?.stop();
+      error(err instanceof Error ? err.message : "ffmpeg not available");
+      process.exit(EXIT_CODES.GENERAL_ERROR);
+    }
+    const videoFullPath = resolve5(process.cwd(), videoPath);
+    try {
+      await access(videoFullPath);
+    } catch {
+      spinner?.stop();
+      error(`Video file not found: ${videoPath}`);
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
+    const frameNum = parseInt(options.frame, 10);
+    if (isNaN(frameNum) || frameNum < 0) {
+      spinner?.stop();
+      error("Invalid frame number. Must be a non-negative integer.");
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
+    let thumbnailPath = options.image;
+    let tempThumbnail = false;
+    if (!thumbnailPath) {
+      const tempDir = join2(process.cwd(), ".tmp-thumbnail");
+      await mkdir(tempDir, { recursive: true });
+      thumbnailPath = join2(tempDir, "thumb.png");
+      tempThumbnail = true;
+      if (options.composition) {
+        if (spinner) spinner.text = `Extracting frame ${frameNum} from ${options.composition}...`;
+        const args = [
+          "exec",
+          "remotion",
+          "still",
+          options.composition,
+          thumbnailPath,
+          `--frame=${frameNum}`
+        ];
+        try {
+          execSync(`pnpm ${args.join(" ")}`, {
+            stdio: "pipe",
+            cwd: process.cwd()
+          });
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to extract frame from composition: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.GENERAL_ERROR);
+        }
+      } else {
+        if (spinner) spinner.text = `Extracting frame ${frameNum} from video...`;
+        try {
+          execSync(
+            `"${ffmpeg}" -y -i "${videoFullPath}" -vf "select=eq(n\\,${frameNum})" -vframes 1 "${thumbnailPath}"`,
+            { stdio: "pipe" }
+          );
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to extract frame from video: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.GENERAL_ERROR);
+        }
+      }
+    } else {
+      thumbnailPath = resolve5(process.cwd(), thumbnailPath);
+      try {
+        await access(thumbnailPath);
+      } catch {
+        spinner?.stop();
+        error(`Thumbnail image not found: ${options.image}`);
+        process.exit(EXIT_CODES.INVALID_INPUT);
+      }
+    }
+    const outputPath = options.output ? resolve5(process.cwd(), options.output) : videoFullPath;
+    const needsTempOutput = outputPath === videoFullPath;
+    const tempOutput = needsTempOutput ? videoFullPath.replace(/\.mp4$/, ".thumb-temp.mp4") : outputPath;
+    if (spinner) spinner.text = "Embedding thumbnail into video...";
+    try {
+      execSync(
+        `"${ffmpeg}" -y -i "${videoFullPath}" -i "${thumbnailPath}" -map 0 -map 1 -c copy -disposition:v:1 attached_pic "${tempOutput}"`,
+        { stdio: "pipe" }
+      );
+      if (needsTempOutput) {
+        await rm(videoFullPath);
+        await cp(tempOutput, videoFullPath);
+        await rm(tempOutput);
+      }
+    } catch (err) {
+      spinner?.stop();
+      error(`Failed to embed thumbnail: ${err instanceof Error ? err.message : "Unknown error"}`);
+      process.exit(EXIT_CODES.GENERAL_ERROR);
+    }
+    if (tempThumbnail) {
+      try {
+        await rm(join2(process.cwd(), ".tmp-thumbnail"), { recursive: true });
+      } catch {
+      }
+    }
+    spinner?.stop();
+    const finalOutput = options.output || videoPath;
+    if (format === "json") {
+      printJson({
+        video: finalOutput,
+        thumbnail: options.image || `frame ${frameNum}`,
+        composition: options.composition || null
+      });
+      return;
+    }
+    if (format === "quiet") {
+      console.log(resolve5(process.cwd(), finalOutput));
+      return;
+    }
+    console.log();
+    success(`Thumbnail embedded: ${finalOutput}`);
+    if (options.image) {
+      keyValue("Thumbnail", options.image);
+    } else if (options.composition) {
+      keyValue("Source", `${options.composition} frame ${frameNum}`);
+    } else {
+      keyValue("Source", `Video frame ${frameNum}`);
+    }
+    console.log();
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Failed to process thumbnail");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
 // src/index.ts
-var VERSION = "0.1.7";
+var VERSION = "0.1.8";
 var program = new Command20();
 var cmdName = brand.commands[0];
 program.name(cmdName).description(brand.description).version(VERSION, "-v, --version", "Show version number").option("--debug", "Enable debug logging").option("--no-color", "Disable colored output").configureOutput({