@conceptcraft/mindframes 0.1.5 → 0.1.6

package/dist/index.js

@@ -946,12 +946,21 @@ async function generateSpeech(ttsRequest) {
   const cost = parseFloat(response.headers.get("X-Cost-USD") || "0");
   const provider = response.headers.get("X-Provider") || "unknown";
   const format = response.headers.get("X-Audio-Format") || "mp3";
+  let timestamps;
+  const timestampsHeader = response.headers.get("X-Timestamps");
+  if (timestampsHeader) {
+    try {
+      timestamps = JSON.parse(timestampsHeader);
+    } catch {
+    }
+  }
   return {
     audioData,
     duration,
     cost,
     provider,
-    format
+    format,
+    timestamps
   };
 }
 async function getVoices() {
@@ -1016,7 +1025,7 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
     if (result.status === "completed" || result.status === "failed") {
       return result;
     }
-    await new Promise((resolve4) => setTimeout(resolve4, intervalMs));
+    await new Promise((resolve5) => setTimeout(resolve5, intervalMs));
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
@@ -1123,10 +1132,10 @@ function generateState() {
 async function findAvailablePort(start, end) {
   for (let port = start; port <= end; port++) {
     try {
-      await new Promise((resolve4, reject) => {
+      await new Promise((resolve5, reject) => {
         const server = http.createServer();
         server.listen(port, () => {
-          server.close(() => resolve4());
+          server.close(() => resolve5());
         });
         server.on("error", reject);
       });
@@ -1184,7 +1193,7 @@ async function exchangeCodeForTokens(tokenEndpoint, code, codeVerifier, redirect
   return response.json();
 }
 function startCallbackServer(port, expectedState) {
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve5, reject) => {
     let timeoutId;
     let settled = false;
     const cleanup = () => {
@@ -1270,7 +1279,7 @@ function startCallbackServer(port, expectedState) {
         </html>
       `);
       cleanup();
-      resolve4({ code, state });
+      resolve5({ code, state });
     });
     server.listen(port);
     process.once("SIGINT", onCancel);
@@ -2413,21 +2422,21 @@ Uploading ${options.file.length} file(s)...`));
   }
 });
 async function readStdin() {
-  return new Promise((resolve4) => {
+  return new Promise((resolve5) => {
     let data = "";
     process.stdin.setEncoding("utf8");
     if (process.stdin.isTTY) {
-      resolve4("");
+      resolve5("");
       return;
     }
     process.stdin.on("data", (chunk) => {
       data += chunk;
     });
     process.stdin.on("end", () => {
-      resolve4(data.trim());
+      resolve5(data.trim());
     });
     setTimeout(() => {
-      resolve4(data.trim());
+      resolve5(data.trim());
     }, 100);
   });
 }
@@ -3125,6 +3134,7 @@ import chalk12 from "chalk";
 import { mkdirSync, writeFileSync, existsSync as existsSync2 } from "fs";
 import { join } from "path";
 import { homedir } from "os";
+import { execSync } from "child_process";
 function generateSkillContent(b) {
   const cmd2 = b.name;
   const pkg = b.packageName;
@@ -3132,34 +3142,105 @@ function generateSkillContent(b) {
   const name = b.displayName;
   return `---
 name: ${cmd2}
-description: Create AI-powered presentations from code, documentation, files, or any content. Use when the user wants to generate slides, presentations, or decks about their project, codebase, research, or ideas.
+description: Create AI-powered presentations and videos. Use for slides, decks, video content, voiceovers, and music generation.
+metadata:
+  tags: presentations, video, tts, music, animation, remotion
+video:
+  description: End-to-end AI video creation workflow with TTS voiceover and music generation. Use this skill when users want to create videos, promotional content, explainers, tourism videos, product demos, or any video content from an idea or topic. Handles the complete workflow - research, script writing, asset gathering, audio generation (voiceover + music), and orchestrates video creation. Use together with remotion-best-practices skill for Remotion-specific patterns. Triggers on requests like "create a video about X", "make a promotional video", "build a video for Y", or any video content creation task.
 ---
 
 # ${name} CLI
 
-Create professional presentations directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content.
+Create professional presentations and videos directly from your terminal.
 
 ## Prerequisites
 
 \`\`\`bash
-# Install globally
 npm install -g ${pkg}
+${cmd2} login    # Authenticate (opens browser)
+${cmd2} whoami   # Verify setup
+\`\`\`
+
+## Rules
+
+Read these for detailed usage:
+
+- [rules/presentations.md](rules/presentations.md) - Creating AI-powered presentations
+- [rules/video.md](rules/video.md) - Video creation workflow and commands
+- [rules/motion-standards.md](rules/motion-standards.md) - Animation quality standards
+- [rules/micro-interactions.md](rules/micro-interactions.md) - Animation components and patterns
+- **remotion-best-practices** skill (auto-installed) - Remotion-specific patterns
+
+## Quick Reference
+
+### Presentations
+
+\`\`\`bash
+# Create from context
+cat README.md | ${cmd2} create "Project Overview"
+
+# With files
+${cmd2} create "Product Demo" --file ./deck.pptx --file ./logo.png
+
+# With options
+${cmd2} create "API Docs" --slides 8 --tone educational --goal inform
+\`\`\`
 
-# Configure API key (get from ${url}/settings/api-keys)
-${cmd2} config init
+### Video Creation
+
+\`\`\`bash
+# Scaffold project
+${cmd2} video init my-video
+
+# Generate all assets (voiceover, music, images)
+${cmd2} video create --script "Your narration..." --output ./public
+
+# Search for stock content
+${cmd2} image search -q "tropical beach" -n 5
+${cmd2} video search "tech workspace" -n 5
+\`\`\`
+
+### Audio Generation
+
+\`\`\`bash
+# Text-to-speech
+${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
+
+# Music generation
+${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
+
+# Mix audio into video
+${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
 \`\`\`
 
-## Core Workflow
+## Assets
+
+Copy animation components from \`assets/animation-components.tsx\` for Remotion videos.
+
+## Asking Questions
+
+When you need to ask the user for preferences (voice, music, duration, etc.), use the \`AskUserQuestion\` tool if available. This provides a better UX with selectable options. See \`rules/video.md\` for the question format.
+`;
+}
+function generatePresentationsRule(b) {
+  const cmd2 = b.name;
+  const url = b.apiUrl;
+  return `---
+name: presentations
+description: Creating AI-powered presentations
+---
+
+# Presentations
+
+## Workflow
 
 1. **Gather context** - Read relevant files, code, or documentation
 2. **Create presentation** - Pass context to \`${cmd2} create\`
 3. **Share URL** - Return the presentation link to the user
 
-## Commands
-
-### Create Presentation
+## Create Command
 
-Context is **required**. Provide it via one of these methods:
+Context is **required**. Provide via:
 
 \`\`\`bash
 # Upload files (PDFs, PPTX, images, docs)
@@ -3171,19 +3252,19 @@ ${cmd2} create "Topic Title" --context "Key points, data, facts..."
 # From a text file
 ${cmd2} create "Topic Title" --context-file ./notes.md
 
-# Pipe content (auto-detected)
+# Pipe content
 cat README.md | ${cmd2} create "Project Overview"
 
-# From URLs (scraped automatically)
+# From URLs
 ${cmd2} create "Competitor Analysis" --sources https://example.com/report
 
-# Combine multiple sources
+# Combine sources
 cat src/auth/*.ts | ${cmd2} create "Auth System" \\
   --file ./architecture.png \\
   --context "Focus on security patterns"
 \`\`\`
 
-### Create Options
+## Options
 
 | Option | Description | Default |
 |--------|-------------|---------|
@@ -3193,174 +3274,1503 @@ cat src/auth/*.ts | ${cmd2} create "Auth System" \\
 | \`--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) | - |
+| \`-f, --file <paths...>\` | Files to upload | - |
 | \`-l, --language <lang>\` | Output language | en |
-| \`-b, --brand <id>\` | Branding ID to apply | - |
-| \`-o, --output <format>\` | Output: \`human\`, \`json\`, \`quiet\` | human |
+| \`-b, --brand <id>\` | Branding ID | - |
 
-### Other Commands
+## Other Commands
 
 \`\`\`bash
-# Check authentication
-${cmd2} whoami
+${cmd2} list                          # List presentations
+${cmd2} get <id-or-slug>              # Get details
+${cmd2} export <id> -o deck.zip       # Export to ZIP
+${cmd2} import ./deck.zip             # Import presentation
+${cmd2} branding list                 # List brandings
+${cmd2} branding extract https://...  # Extract branding from URL
+\`\`\`
+
+## Output
+
+\`\`\`
+\u2713 Presentation created successfully
+
+  Title: Authentication System
+  Slides: 8
+  Generated in: 45s \xB7 12,500 tokens
+
+  Open: ${url}/en/view/presentations/auth-system-v1-abc123
+\`\`\`
+`;
+}
+function generateVideoRule(b) {
+  const cmd2 = b.name;
+  return `---
+name: video
+description: Video creation workflow - project-based UI replication AND stock-based videos
+---
+
+# Video Creation
+
+**Replicate the app's UI AS CLOSELY AS POSSIBLE - almost an exact copy.**
+
+The video should look like the REAL app. Same layout. Same colors. Same buttons. Same everything. If someone watches the video and then opens the app, they should recognize it immediately.
+
+---
+
+## \u26D4 HARD RULES
+
+1. **NO GENERIC SHAPES** - Don't draw random rectangles. Replicate what the app actually looks like.
+2. **NO MADE-UP CONTENT** - Don't invent "Finding 1: Performance improved 45%". Use real content from the app.
+3. **READ BEFORE BUILDING** - Read the app's components to understand their visual structure before writing any code.
+4. **MATCH THE BRAND** - Use exact colors from tailwind.config, exact fonts, exact visual style.
+5. **ALWAYS FRESH PROJECT** - Delete existing video project, create new with \`${cmd2} video init\`.
+
+---
+
+## \u{1F534} PHASE 0: READ REFERENCES FIRST
+
+**Before doing ANYTHING, read these files:**
+
+1. Read: rules/motion-standards.md (animation quality)
+2. Read: rules/micro-interactions.md (animation patterns)
+3. Read: rules/component-integration.md (patterns)
+4. Read: rules/project-video-workflow.md (full workflow)
+5. Skill: remotion-best-practices
+
+---
+
+## \u{1F3AF} TWO VIDEO MODES
+
+### Mode A: Project-Based Video (PREFERRED)
+Use when user has a project/app and wants to showcase it.
+- **Triggers:** "create video for my app", "product demo", "feature walkthrough", "promotional video for [project]"
+- **Approach:** Read components \u2192 replicate UI pixel-perfect \u2192 add animations
+- **Result:** Video looks IDENTICAL to the real app
 
-# List presentations
-${cmd2} list
-${cmd2} list --format json
+### Mode B: Stock-Based Video
+Use ONLY when user has NO project or explicitly wants stock content.
+- **Triggers:** "create a video about tourism", "make a generic explainer"
+- **Approach:** Use \`${cmd2} video create\` with stock images
+- **Result:** Generic video with stock imagery
 
-# Get presentation details
-${cmd2} get <id-or-slug>
+**DEFAULT TO MODE A if user mentions their app/project.**
 
-# Export to ZIP
-${cmd2} export <id-or-slug> -o presentation.zip
+---
 
-# Import presentation
-${cmd2} import ./presentation.zip
+## Pre-Creation Questions
 
-# Manage branding
-${cmd2} branding list
-${cmd2} branding extract https://company.com
+Before creating a video, use \`AskUserQuestion\` tool (if available) to ask:
 
-# Install/manage this skill
-${cmd2} skill install
-${cmd2} skill show
+\`\`\`json
+{
+  "questions": [
+    {
+      "question": "Which voice would you prefer for the narration?",
+      "header": "Voice",
+      "options": [
+        { "label": "Kore (Recommended)", "description": "Female, professional voice - best for narration" },
+        { "label": "Puck", "description": "Male, energetic voice - good for promos" },
+        { "label": "Rachel", "description": "Female, calm voice" },
+        { "label": "No voiceover", "description": "Music only, no narration" }
+      ],
+      "multiSelect": false
+    },
+    {
+      "question": "What background music style fits your video?",
+      "header": "Music",
+      "options": [
+        { "label": "Uplifting/positive", "description": "Energetic and inspiring" },
+        { "label": "Corporate/professional", "description": "Modern, polished business feel" },
+        { "label": "Cinematic/dramatic", "description": "Epic, impactful presentation" },
+        { "label": "Calm ambient", "description": "Soft, subtle background" }
+      ],
+      "multiSelect": false
+    },
+    {
+      "question": "How long should the video be?",
+      "header": "Duration",
+      "options": [
+        { "label": "15 seconds", "description": "Quick teaser" },
+        { "label": "30 seconds", "description": "Social media friendly" },
+        { "label": "60 seconds", "description": "Standard length" }
+      ],
+      "multiSelect": false
+    }
+  ]
+}
 \`\`\`
 
-## Examples
+If \`AskUserQuestion\` tool is not available, ask these questions in text format.
 
-### Present a Codebase Feature
+## Audio-First Workflow
+
+**IMPORTANT:** This workflow ensures video and audio are always in sync. The CLI generates audio first, parses the script into sections, and calculates exact timing for each section. Scenes MUST use these timings.
+
+### Step 1: Write Script
+
+Write narration for the target duration. Structure: Hook \u2192 Key points \u2192 CTA
+
+Tip: ~2.5 words per second for natural pacing.
+
+### Step 2: Generate Assets (Audio-First)
 
 \`\`\`bash
-# Read the relevant files and create presentation
-cat src/lib/auth.ts src/lib/session.ts | ${cmd2} create "Authentication System" \\
-  --slides 8 --tone educational --audience "New developers" \\
-  --goal train
+${cmd2} video create \\
+  --script "Your narration script..." \\
+  --topic "topic for image search" \\
+  --voice Kore \\
+  --music-prompt "uplifting corporate" \\
+  --num-images 5 \\
+  --output ./public
+\`\`\`
+
+This generates:
+- \`public/audio/voiceover.wav\` - TTS voiceover (determines total duration)
+- \`public/audio/music.mp3\` - Background music (auto-matches voiceover length)
+- \`public/images/scene-*.jpg\` - Stock images
+- \`public/video-manifest.json\` - **Contains sections with exact TTS timestamps**
+
+### Step 3: Read Manifest Sections
+
+The manifest includes a \`sections\` array with **exact timing from TTS character-level timestamps**:
+
+\`\`\`json
+{
+  "voiceover": {
+    "path": "audio/voiceover.wav",
+    "duration": 15.2,
+    "timestamps": {
+      "characters": ["P", "u", "e", "r", "t", "o", " ", ...],
+      "characterStartTimesSeconds": [0, 0.05, 0.1, ...],
+      "characterEndTimesSeconds": [0.05, 0.1, 0.15, ...]
+    }
+  },
+  "sections": [
+    {
+      "id": 1,
+      "text": "Puerto Rico. La Isla del Encanto.",
+      "wordCount": 5,
+      "startTime": 0,
+      "endTime": 2.8,
+      "durationInSeconds": 2.8,
+      "durationInFrames": 84,
+      "imagePath": "images/scene-1.jpg"
+    },
+    {
+      "id": 2,
+      "text": "Discover five hundred years of history.",
+      "wordCount": 7,
+      "startTime": 2.8,
+      "endTime": 8.2,
+      "durationInSeconds": 5.4,
+      "durationInFrames": 162,
+      "imagePath": "images/scene-2.jpg"
+    }
+  ],
+  "totalDurationInFrames": 450,
+  "fps": 30
+}
+\`\`\`
+
+**Key points:**
+- Section timing is derived from actual TTS audio timestamps (not estimated)
+- \`voiceover.timestamps\` contains character-level timing for word-by-word animations
+- Video duration will always match voiceover duration exactly
+
+### Step 4: Create Scenes (Match Section Timing)
+
+**CRITICAL:** Use \`durationInFrames\` from each section. This ensures audio/video sync.
+
+\`\`\`tsx
+// Read manifest sections and create matching scenes
+import manifest from '../../public/video-manifest.json';
+
+// Scene durations MUST match manifest sections
+export const SECTION_1_DURATION = manifest.sections[0].durationInFrames; // 84
+export const SECTION_2_DURATION = manifest.sections[1].durationInFrames; // 162
+// ... etc
+
+export const FULL_VIDEO_DURATION = manifest.totalDurationInFrames; // 450
+\`\`\`
+
+Example scene component:
+
+\`\`\`tsx
+// src/remotion/scenes/Scene1.tsx
+import { AbsoluteFill, Img, staticFile, useCurrentFrame, useVideoConfig, spring } from "remotion";
+import manifest from '../../../public/video-manifest.json';
+
+const section = manifest.sections[0];
+export const SCENE_1_DURATION = section.durationInFrames;
+
+export const Scene1: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const progress = spring({ frame, fps, config: { damping: 15, stiffness: 100 } });
+
+  return (
+    <AbsoluteFill>
+      <Img src={staticFile(section.imagePath)} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+      <div style={{
+        position: 'absolute',
+        bottom: 100,
+        left: 0,
+        right: 0,
+        textAlign: 'center',
+        opacity: progress,
+        transform: \`translateY(\${(1 - progress) * 20}px)\`,
+      }}>
+        <h1 style={{ color: 'white', fontSize: 60, textShadow: '2px 2px 8px rgba(0,0,0,0.8)' }}>
+          {section.text}
+        </h1>
+      </div>
+    </AbsoluteFill>
+  );
+};
 \`\`\`
 
-### Technical Documentation with Diagrams
+### Step 5: Update FullVideo.tsx
+
+\`\`\`tsx
+import { AbsoluteFill, Series, Audio, staticFile, useCurrentFrame, interpolate } from "remotion";
+import manifest from '../../public/video-manifest.json';
+import { Scene1, SCENE_1_DURATION } from "./scenes/Scene1";
+import { Scene2, SCENE_2_DURATION } from "./scenes/Scene2";
+// ... import all scenes
+
+export const FULL_VIDEO_DURATION = manifest.totalDurationInFrames;
+
+const BackgroundMusic: React.FC = () => {
+  const frame = useCurrentFrame();
+  const fadeIn = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: "clamp" });
+  const fadeOut = interpolate(frame, [FULL_VIDEO_DURATION - 20, FULL_VIDEO_DURATION], [1, 0], { extrapolateLeft: "clamp" });
+  return <Audio src={staticFile("audio/music.mp3")} volume={fadeIn * fadeOut * 0.25} />;
+};
+
+export const FullVideo: React.FC = () => {
+  return (
+    <AbsoluteFill>
+      <Series>
+        <Series.Sequence durationInFrames={SCENE_1_DURATION}>
+          <Scene1 />
+        </Series.Sequence>
+        <Series.Sequence durationInFrames={SCENE_2_DURATION}>
+          <Scene2 />
+        </Series.Sequence>
+        {/* Add all sections */}
+      </Series>
+
+      <Audio src={staticFile("audio/voiceover.wav")} volume={1} />
+      <BackgroundMusic />
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+### Step 6: Preview & Render
 
 \`\`\`bash
-${cmd2} create "API Reference" \\
-  --file ./docs/api.md \\
-  --file ./diagrams/architecture.png \\
-  --mode best --amount detailed \\
-  --goal inform
+npm run dev     # Preview in Remotion Studio
+npm run render  # Output to out/video.mp4
 \`\`\`
 
-### Quick Project Overview
+## CLI Commands Reference
+
+### ${cmd2} video create
+
+| Option | Required | Default | Description |
+|--------|----------|---------|-------------|
+| \`-s, --script <text>\` | Yes* | - | Narration script |
+| \`--script-file <path>\` | Yes* | - | Path to script file |
+| \`-t, --topic <text>\` | No | auto | Topic for image search |
+| \`-v, --voice <name>\` | No | Kore | TTS voice |
+| \`-m, --music-prompt <text>\` | No | auto | Music description |
+| \`-n, --num-images <n>\` | No | 5 | Number of images |
+| \`-o, --output <dir>\` | No | ./public | Output directory |
+
+### ${cmd2} tts generate
 
 \`\`\`bash
-cat README.md package.json | ${cmd2} create "Project Introduction" \\
-  -m instant --slides 5
+${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
+${cmd2} tts voices  # List all voices
 \`\`\`
 
-### Sales Deck from Existing Presentation
+**Voices:** Kore (professional female), Puck (energetic male), Rachel (calm female), alloy (neutral)
+
+### ${cmd2} music generate
 
 \`\`\`bash
-${cmd2} create "Product Demo" \\
-  --file ./existing-deck.pptx \\
-  --goal persuade \\
-  --audience "Enterprise buyers" \\
-  --tone professional
+${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
 \`\`\`
 
-### Research Presentation
+**Good prompts:** "uplifting corporate", "calm ambient, soft piano", "cinematic orchestral"
+
+### ${cmd2} image search / video search
 
 \`\`\`bash
-${cmd2} create "Market Analysis" \\
-  --file ./research.pdf \\
-  --sources https://report.com/industry.pdf \\
-  --tone formal --audience "Executive team" \\
-  --goal report
+${cmd2} image search -q "tropical beach" -n 5 -s large
+${cmd2} video search "tech workspace" -n 5
 \`\`\`
 
-## Output
+### ${cmd2} mix create
 
-Successful creation returns:
+Post-process audio into existing video:
+
+\`\`\`bash
+${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
 \`\`\`
-\u2713 Presentation created successfully
 
-  Title: Authentication System
-  Slides: 8
-  Generated in: 45s \xB7 12,500 tokens
+## Audio Guidelines
 
-  Open: ${url}/en/view/presentations/auth-system-v1-abc123
+| Element | Volume | Notes |
+|---------|--------|-------|
+| Voiceover | 100% | Primary audio |
+| Background music | 20-30% | Fade in/out over ~10-20 frames |
+
+Generate music 5s longer than video for fade out.
+
+## Animation Quality Checklist
+
+Before rendering, ensure your video follows these standards from motion-standards.md:
+
+1. **Physics over linearity** - Use \`spring()\` for all animations, never linear interpolate for movement
+2. **Orchestration** - Stagger element entrances (3-8 frame delays), never animate all at once
+3. **Virtual camera** - Add subtle zoom/scale even on static scenes (1.0 \u2192 1.03 over duration)
+4. **Micro-interactions** - Use components from micro-interactions.md for buttons, text reveals, highlights
+
+---
+
+# \u{1F3AC} PROJECT-BASED VIDEO WORKFLOW (Mode A)
+
+**Use this when user has a project/app to showcase.**
+
+## \u{1F4CB} PHASE 1: EXPLORE THE APP
+
+### 1.1 Find Brand Assets
+
+\`\`\`bash
+# Logo
+find src -name "*[Ll]ogo*" 2>/dev/null
+find public -name "*logo*" 2>/dev/null
+
+# Colors - THIS IS CRITICAL
+cat tailwind.config.* | grep -A 30 "colors"
+cat src/app/globals.css | head -50
+
+# Fonts
+grep -r "fontFamily" tailwind.config.* src/app/layout.tsx
 \`\`\`
 
-For scripting, use JSON output:
+### 1.2 Read Key UI Components
+
+**Don't copy - just read to understand the visual structure:**
+
 \`\`\`bash
-URL=$(${cmd2} create "Demo" --context "..." -o json | jq -r '.viewUrl')
+# Find main components
+find src/components -name "*.tsx" | head -30
+
+# Read them to understand layout, colors, structure
+cat src/components/slides/SlidesSidebar.tsx
+cat src/components/tools/ToolsPanel.tsx
+cat src/components/ui/button.tsx
 \`\`\`
 
-## Best Practices
+**For each component, note:**
+- Layout structure (sidebar? grid? list?)
+- Colors used (bg-slate-900, text-teal-400, etc.)
+- Visual elements (badges, icons, thumbnails)
+- Typography (font sizes, weights)
 
-1. **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.
+### 1.3 Document Your Findings
 
-## Supported File Types
+\`\`\`markdown
+## Brand Discovery: [App Name]
 
-- **Documents**: PDF, DOCX, XLSX, PPTX
-- **Images**: JPEG, PNG, GIF, WebP
-- **Text**: Markdown, TXT, CSV, JSON
+### Colors (from tailwind.config)
+- Background: #0f172a (slate-900)
+- Surface: #1e293b (slate-800)
+- Primary: #14b8a6 (teal-500)
+- Accent: #f472b6 (pink-400)
+- Text: #ffffff / #94a3b8 (slate-400)
 
-## Troubleshooting
+### Key UI Elements I Observed
+1. **Sidebar** - Dark bg, slide thumbnails with numbers
+2. **Main viewer** - Light slide content area
+3. **Tools panel** - Grid of cards with icons
+\`\`\`
+
+---
+
+## \u{1F4CB} PHASE 2: PLAN THE VIDEO
+
+### Scene Structure
+
+\`\`\`markdown
+## Video Plan: [App Name] Demo
+
+### Scene 1: Intro (3s / 90 frames)
+**What to show:** Logo + tagline on dark background
+**Colors:** bg #0f172a, logo centered
+**Animation:** Logo scales in with spring, tagline fades up
+
+### Scene 2: Sidebar UI (5s / 150 frames)
+**What to show:** Replicate the slides sidebar
+**Reference:** Read src/components/slides/SlidesSidebar.tsx
+**Build:** Dark sidebar with slide items, thumbnails
+**Animation:** Sidebar slides in, items stagger
+
+### Scene 3: Main Editor (5s / 150 frames)
+**What to show:** Replicate the slide viewer
+**Reference:** Read src/components/slides/SlideViewer.tsx
+**Animation:** Content fades in
+
+### Scene 4: CTA (3s / 90 frames)
+**What to show:** Logo + CTA button + URL
+**Animation:** Logo fades in, button pulses
+\`\`\`
+
+---
+
+## \u{1F528} PHASE 3: BUILD
+
+### 3.1 Create Fresh Project
+
+\`\`\`bash
+rm -rf ../appname-video
+${cmd2} video init ../appname-video
+cd ../appname-video
+\`\`\`
+
+### 3.2 Copy Brand Assets Only
+
+\`\`\`bash
+# Logo
+cp ../myapp/public/logo.svg ./public/
+
+# Tailwind config (for colors/fonts)
+cp ../myapp/tailwind.config.* ./
+
+# Global CSS
+cp ../myapp/src/app/globals.css ./src/styles/
+\`\`\`
+
+### 3.3 Build Scene Components - PIXEL PERFECT
+
+**Each scene replicates what you observed, using Remotion:**
+
+\`\`\`tsx
+// src/remotion/scenes/SidebarScene.tsx
+// Replicates: src/components/slides/SlidesSidebar.tsx
+
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
+
+const mockSlides = [
+  { id: 1, title: "Title Slide", selected: true },
+  { id: 2, title: "Overview", selected: false },
+  { id: 3, title: "Key Players", selected: false },
+];
+
+export const SIDEBAR_SCENE_DURATION = 150;
+
+export const SidebarScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const sidebarProgress = spring({ frame, fps, config: { damping: 20, stiffness: 100 } });
+  const sidebarX = (1 - sidebarProgress) * -280;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
+      {/* Sidebar - EXACT colors from tailwind.config */}
+      <div style={{
+        width: 280,
+        height: "100%",
+        backgroundColor: "#0f172a",
+        borderRight: "1px solid #1e293b",
+        transform: \`translateX(\${sidebarX}px)\`,
+        padding: 16,
+      }}>
+        {/* Header - EXACT styling from component */}
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
+          <span style={{ color: "#14b8a6", fontSize: 14, fontWeight: 500 }}>
+            SLIDES CONTROL
+          </span>
+        </div>
+
+        {/* Slide items - staggered animation */}
+        {mockSlides.map((slide, i) => {
+          const itemProgress = spring({
+            frame: frame - 10 - i * 8,
+            fps,
+            config: { damping: 15, stiffness: 100 },
+          });
+
+          return (
+            <div key={slide.id} style={{
+              opacity: itemProgress,
+              transform: \`translateX(\${(1 - itemProgress) * -20}px)\`,
+              marginBottom: 8,
+              padding: 12,
+              borderRadius: 8,
+              backgroundColor: slide.selected ? "#1e293b" : "transparent",
+              border: slide.selected ? "1px solid #14b8a6" : "1px solid transparent",
+            }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <div style={{ width: 48, height: 32, backgroundColor: "#334155", borderRadius: 4 }} />
+                <div>
+                  <span style={{ color: "#64748b", fontSize: 12 }}>
+                    SLIDE {String(i + 1).padStart(2, "0")}
+                  </span>
+                  {slide.selected && <span style={{ color: "#f87171", fontSize: 12, marginLeft: 8 }}>SELECTED</span>}
+                  <p style={{ color: "#ffffff", fontSize: 14, margin: 0 }}>{slide.title}</p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+### 3.4 Key Principles: PIXEL-PERFECT Replication
+
+**The video UI should be indistinguishable from the real app.**
+
+1. **EXACT colors** - Copy hex values directly from tailwind.config
+2. **EXACT spacing** - If \`p-4 gap-3\`, use \`padding: 16px, gap: 12px\`
+3. **EXACT typography** - Same font size, weight, color
+4. **EXACT borders** - Same border width, color, radius
+5. **EXACT layout** - Same flex direction, alignment, widths
+6. **Then add animations** - spring() entrances, stagger delays
+
+---
+
+## \u{1F3AC} PHASE 4: AUDIO & RENDER
+
+### Generate Audio
+
+\`\`\`bash
+${cmd2} video create \\
+  --script "Your narration..." \\
+  --music-prompt "modern uplifting tech" \\
+  --output ./public
+\`\`\`
+
+### Preview & Render
 
 \`\`\`bash
-# Check if authenticated
-${cmd2} whoami
+npm run dev    # Preview
+npm run render # Output to out/video.mp4
+\`\`\`
+
+---
 
-# Verify API key
-${cmd2} config show
+## \u274C WHAT NOT TO DO
 
-# Debug mode
-${cmd2} create "Test" --context "test" --debug
+### Bad: Generic rectangles
+\`\`\`tsx
+// \u274C NO
+<div style={{ background: "linear-gradient(#667eea, #764ba2)", width: 200, height: 150 }} />
 \`\`\`
+
+### Bad: Made-up content
+\`\`\`tsx
+// \u274C NO
+<h2>Key Insights from Research</h2>
+<li>Finding 1: Performance improved by 45%</li>
+\`\`\`
+
+### Bad: Not matching the app
+\`\`\`tsx
+// \u274C NO - App uses slate-900, not gray-800
+<div style={{ backgroundColor: "#1f2937" }}>
+\`\`\`
+
+### Good: Replicated UI with correct brand
+\`\`\`tsx
+// \u2705 YES - Matches actual app colors and structure
+<div style={{ backgroundColor: "#0f172a", borderColor: "#1e293b" }}>
+  <span style={{ color: "#14b8a6" }}>SLIDES CONTROL</span>
+</div>
+\`\`\`
+
+---
+
+## \u2705 Project Video Checklist
+
+### Before Building
+- [ ] Read motion-standards.md and micro-interactions.md
+- [ ] Found logo path
+- [ ] Found colors from tailwind.config
+- [ ] Read key components to understand visual structure
+- [ ] Documented findings
+- [ ] Planned scenes
+
+### While Building
+- [ ] Using exact colors from tailwind.config
+- [ ] Matching layout structure of real app
+- [ ] Using spring() for animations
+- [ ] Mock data is realistic
+
+### Before Render
+- [ ] Logo appears in intro and CTA
+- [ ] Colors match the app exactly
+- [ ] All scenes have smooth animations
 `;
 }
-var 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" }
-];
-var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skill for AI coding assistants`).addHelpText(
-  "after",
-  `
-${chalk12.bold("Examples:")}
-  ${chalk12.gray("# Install skill for all detected editors")}
-  $ ${brand.name} skill install
+function generateMotionStandardsRule() {
+  return `---
+name: motion-standards
+description: Animation quality standards for high-end video production
+---
 
-  ${chalk12.gray("# Install to specific directory")}
-  $ ${brand.name} skill install --dir ~/.claude
+# Motion Design Standards
 
-  ${chalk12.gray("# Show skill content")}
-  $ ${brand.name} skill show
-`
-);
-skillCommand.command("install").description(`Install the ${brand.displayName} skill for AI coding assistants`).option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").action(async (options) => {
-  const installed = [];
-  const skipped = [];
-  const errors = [];
-  const baseDir = options.local ? process.cwd() : homedir();
-  const skillContent = generateSkillContent(brand);
-  if (options.dir) {
-    const skillPath = join(options.dir, "skills", brand.name);
-    try {
-      installSkill(skillPath, skillContent, options.force);
-      installed.push(options.dir);
-    } catch (err) {
-      errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
-    }
-  } else {
-    for (const editor of EDITORS) {
-      const editorDir = join(baseDir, editor.dir);
+Generate videos that feel like high-end productions (Apple, Stripe, Linear quality).
+
+**Follow these standards for every Remotion component.**
+
+## STANDARD 01: PHYSICS OVER LINEARITY
+
+- **Rule:** Never use linear interpolation for movement or scaling
+- **Implementation:** Use \`spring()\` for ALL entrance/exit animations
+- **Default config:** \`{ mass: 0.8, stiffness: 150, damping: 15 }\`
+
+\`\`\`tsx
+// BAD
+const opacity = interpolate(frame, [0, 30], [0, 1]);
+
+// GOOD
+const progress = spring({ frame, fps, config: { mass: 0.8, stiffness: 150, damping: 15 } });
+\`\`\`
+
+## STANDARD 02: ORCHESTRATION & CASCADE
+
+- **Rule:** NEVER animate all elements simultaneously
+- **Implementation:** Staggered entrances with 3-5 frames between items
+
+\`\`\`tsx
+// GOOD - cascading entrance
+<FadeIn delay={0}><Header /></FadeIn>
+<FadeIn delay={8}><Content /></FadeIn>
+<FadeIn delay={16}><Footer /></FadeIn>
+
+// GOOD - staggered list
+{items.map((item, i) => (
+  <SlideUp key={item.id} delay={i * 4}>
+    <ListItem data={item} />
+  </SlideUp>
+))}
+\`\`\`
+
+## STANDARD 03: THE VIRTUAL CAMERA
+
+- **Rule:** Even when UI is idle, add subtle movement
+- **Implementation:** Dolly zoom (slow push in)
+
+\`\`\`tsx
+const CinematicContainer = ({ children }) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  const scale = interpolate(frame, [0, durationInFrames], [1, 1.03]);
+
+  return (
+    <AbsoluteFill style={{ transform: \`scale(\${scale})\` }}>
+      {children}
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+## STANDARD 04: HUMAN SIMULATION
+
+- **Rule:** NEVER move cursor in straight lines
+- **Implementation:** Use curved/Bezier paths for cursor movement
+
+## STANDARD 05: TECHNICAL CONSTRAINTS
+
+1. **Styling:** Tailwind CSS or inline styles
+2. **Layout:** Use \`AbsoluteFill\` for scene composition
+3. **State:** NO \`useState\` or \`useEffect\` - derive from \`useCurrentFrame()\`
+
+## Execution Checklist
+
+1. Analyze UI hierarchy
+2. Choreograph order of appearance
+3. Apply \`spring()\` physics
+4. Add subtle camera movement
+5. Human touches for interactions
+`;
+}
+function generateMicroInteractionsRule() {
+  return `---
+name: micro-interactions
+description: Animation components and patterns
+---
+
+# Micro-Interactions
+
+## Core Principles
+
+1. **Subtle** - Effects enhance, never distract
+2. **Purposeful** - Every animation communicates something
+3. **Physics-based** - Use \`spring()\`, not linear easing
+4. **Continuous** - Always have something moving subtly
+
+## Spring Configurations
+
+\`\`\`tsx
+const SPRING_CONFIGS = {
+  snappy: { damping: 15, stiffness: 200, mass: 0.5 },
+  smooth: { damping: 20, stiffness: 100, mass: 1 },
+  bouncy: { damping: 8, stiffness: 150, mass: 0.8 },
+  gentle: { damping: 30, stiffness: 50, mass: 1 },
+};
+\`\`\`
+
+## Entry Animations
+
+### Fade + Slide
+
+\`\`\`tsx
+const AnimatedEntry = ({ delay = 0, direction = 'up', children }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 20, stiffness: 100 }
+  });
+
+  const directions = {
+    up: { x: 0, y: 30 },
+    down: { x: 0, y: -30 },
+    left: { x: 30, y: 0 },
+    right: { x: -30, y: 0 },
+  };
+
+  const { x, y } = directions[direction];
+
+  return (
+    <div style={{
+      opacity: progress,
+      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
+    }}>
+      {children}
+    </div>
+  );
+};
+\`\`\`
+
+### Staggered List
+
+\`\`\`tsx
+const StaggeredList = ({ children, itemDelay = 5 }) => (
+  <>
+    {React.Children.map(children, (child, i) => (
+      <AnimatedEntry delay={i * itemDelay}>{child}</AnimatedEntry>
+    ))}
+  </>
+);
+\`\`\`
+
+## Interaction Simulation
+
+### Button Press
+
+\`\`\`tsx
+const ButtonPress = ({ pressFrame, children }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const isPressing = frame >= pressFrame && frame < pressFrame + 3;
+  const isReleasing = frame >= pressFrame + 3;
+
+  const releaseProgress = isReleasing ? spring({
+    frame: frame - pressFrame - 3,
+    fps,
+    config: { damping: 10, stiffness: 300 }
+  }) : 0;
+
+  const scale = isPressing ? 0.95 : (0.95 + releaseProgress * 0.05);
+
+  return <div style={{ transform: \`scale(\${scale})\` }}>{children}</div>;
+};
+\`\`\`
+
+### Typed Text
+
+\`\`\`tsx
+const TypedText = ({ text, startFrame = 0, speed = 2 }) => {
+  const frame = useCurrentFrame();
+  const charsToShow = Math.floor((frame - startFrame) / speed);
+
+  if (frame < startFrame) return null;
+
+  return (
+    <span>
+      {text.slice(0, Math.min(charsToShow, text.length))}
+      {charsToShow < text.length && (
+        <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
+      )}
+    </span>
+  );
+};
+\`\`\`
+
+### Counting Number
+
+\`\`\`tsx
+const CountingNumber = ({ from = 0, to, startFrame = 0, duration = 30 }) => {
+  const frame = useCurrentFrame();
+  const progress = interpolate(frame - startFrame, [0, duration], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp'
+  });
+  const eased = 1 - Math.pow(1 - progress, 3);
+  return <span>{Math.round(from + (to - from) * eased)}</span>;
+};
+\`\`\`
+
+## Timing Guidelines
+
+| Effect | Duration |
+|--------|----------|
+| Entry animation | 15-25 frames |
+| Button press | 10-15 frames |
+| Highlight/focus | 30-60 frames |
+| Stagger delay | 3-8 frames |
+`;
+}
+function generateAnimationComponents() {
+  return `/**
+ * Remotion Animation Components
+ * Copy these into your project as needed.
+ */
+
+import React from 'react';
+import { useCurrentFrame, useVideoConfig, interpolate, spring, Easing } from 'remotion';
+
+// Spring configurations
+export const SPRING_CONFIGS = {
+  snappy: { damping: 15, stiffness: 200, mass: 0.5 },
+  smooth: { damping: 20, stiffness: 100, mass: 1 },
+  bouncy: { damping: 8, stiffness: 150, mass: 0.8 },
+  gentle: { damping: 30, stiffness: 50, mass: 1 },
+};
+
+// Animated entry with direction
+export const AnimatedEntry: React.FC<{
+  children: React.ReactNode;
+  delay?: number;
+  direction?: 'up' | 'down' | 'left' | 'right' | 'none';
+  distance?: number;
+}> = ({ children, delay = 0, direction = 'up', distance = 30 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: SPRING_CONFIGS.smooth,
+  });
+
+  const directions = {
+    up: { x: 0, y: distance },
+    down: { x: 0, y: -distance },
+    left: { x: distance, y: 0 },
+    right: { x: -distance, y: 0 },
+    none: { x: 0, y: 0 },
+  };
+
+  const { x, y } = directions[direction];
+
+  return (
+    <div style={{
+      opacity: interpolate(progress, [0, 1], [0, 1]),
+      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
+    }}>
+      {children}
+    </div>
+  );
+};
+
+// Scale in animation
+export const ScaleIn: React.FC<{
+  children: React.ReactNode;
+  delay?: number;
+  from?: number;
+}> = ({ children, delay = 0, from = 0.8 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: SPRING_CONFIGS.bouncy,
+  });
+
+  return (
+    <div style={{
+      opacity: interpolate(progress, [0, 0.5], [0, 1], { extrapolateRight: 'clamp' }),
+      transform: \`scale(\${interpolate(progress, [0, 1], [from, 1])})\`,
+    }}>
+      {children}
+    </div>
+  );
+};
+
+// Staggered list
+export const StaggeredList: React.FC<{
+  children: React.ReactNode;
+  itemDelay?: number;
+  startFrame?: number;
+}> = ({ children, itemDelay = 5, startFrame = 0 }) => (
+  <>
+    {React.Children.map(children, (child, i) => (
+      <AnimatedEntry delay={startFrame + i * itemDelay}>{child}</AnimatedEntry>
+    ))}
+  </>
+);
+
+// Button press animation
+export const ButtonPress: React.FC<{
+  children: React.ReactNode;
+  pressFrame: number;
+}> = ({ children, pressFrame }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const isPressing = frame >= pressFrame && frame < pressFrame + 3;
+  const isReleasing = frame >= pressFrame + 3;
+
+  const releaseProgress = isReleasing ? spring({
+    frame: frame - pressFrame - 3,
+    fps,
+    config: { damping: 10, stiffness: 300 },
+  }) : 0;
+
+  const scale = isPressing ? 0.95 : 0.95 + releaseProgress * 0.05;
+
+  return <div style={{ transform: \`scale(\${Math.min(1, scale)})\` }}>{children}</div>;
+};
+
+// Typed text effect
+export const TypedText: React.FC<{
+  text: string;
+  startFrame?: number;
+  speed?: number;
+  showCursor?: boolean;
+}> = ({ text, startFrame = 0, speed = 2, showCursor = true }) => {
+  const frame = useCurrentFrame();
+  const charsToShow = Math.floor((frame - startFrame) / speed);
+
+  if (frame < startFrame) return null;
+
+  const isTyping = charsToShow < text.length;
+
+  return (
+    <span>
+      {text.slice(0, Math.min(charsToShow, text.length))}
+      {showCursor && isTyping && (
+        <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
+      )}
+    </span>
+  );
+};
+
+// Counting number
+export const CountingNumber: React.FC<{
+  from?: number;
+  to: number;
+  startFrame?: number;
+  duration?: number;
+  format?: (n: number) => string;
+}> = ({ from = 0, to, startFrame = 0, duration = 30, format = String }) => {
+  const frame = useCurrentFrame();
+
+  const progress = interpolate(frame - startFrame, [0, duration], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const eased = 1 - Math.pow(1 - progress, 3);
+  const value = Math.round(from + (to - from) * eased);
+
+  return <span>{format(value)}</span>;
+};
+
+// Floating element
+export const FloatingElement: React.FC<{
+  children: React.ReactNode;
+  amplitude?: number;
+  speed?: number;
+}> = ({ children, amplitude = 3, speed = 0.05 }) => {
+  const frame = useCurrentFrame();
+  const y = Math.sin(frame * speed) * amplitude;
+
+  return <div style={{ transform: \`translateY(\${y}px)\` }}>{children}</div>;
+};
+
+// Highlight effect
+export const Highlight: React.FC<{
+  children: React.ReactNode;
+  startFrame: number;
+  duration?: number;
+}> = ({ children, startFrame, duration = 45 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const isActive = frame >= startFrame && frame < startFrame + duration;
+  const progress = spring({
+    frame: isActive ? frame - startFrame : 0,
+    fps,
+    config: SPRING_CONFIGS.snappy,
+  });
+
+  const scale = isActive ? 1 + progress * 0.03 : 1;
+
+  return (
+    <div style={{
+      transform: \`scale(\${scale})\`,
+      boxShadow: isActive ? \`0 \${8 + progress * 12}px \${16 + progress * 24}px rgba(0,0,0,0.15)\` : undefined,
+    }}>
+      {children}
+    </div>
+  );
+};
+
+// Cursor pointer
+export const CursorPointer: React.FC<{
+  path: Array<{ x: number; y: number; frame: number }>;
+  size?: number;
+}> = ({ path, size = 24 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  let x = path[0].x;
+  let y = path[0].y;
+
+  for (let i = 0; i < path.length - 1; i++) {
+    const from = path[i];
+    const to = path[i + 1];
+
+    if (frame >= from.frame && frame <= to.frame) {
+      const progress = spring({
+        frame: frame - from.frame,
+        fps,
+        config: { damping: 20, stiffness: 80 },
+      });
+
+      x = interpolate(progress, [0, 1], [from.x, to.x]);
+      y = interpolate(progress, [0, 1], [from.y, to.y]);
+      break;
+    } else if (frame > to.frame) {
+      x = to.x;
+      y = to.y;
+    }
+  }
+
+  return (
+    <div style={{
+      position: 'absolute',
+      left: \`\${x}%\`,
+      top: \`\${y}%\`,
+      transform: 'translate(-50%, -50%)',
+      zIndex: 1000,
+      pointerEvents: 'none',
+    }}>
+      <svg width={size} height={size} viewBox="0 0 24 24">
+        <path
+          d="M4 4 L4 20 L9 15 L13 22 L16 20 L12 13 L19 13 Z"
+          fill="white"
+          stroke="black"
+          strokeWidth="1.5"
+        />
+      </svg>
+    </div>
+  );
+};
+`;
+}
+function generateComponentIntegrationRule(b) {
+  const cmd2 = b.name;
+  return `---
+name: component-integration
+description: Integrating app components into Remotion videos
+---
+
+# Integrating App Components into Remotion
+
+Use your actual React components OR replicate them pixel-perfect in Remotion videos.
+
+## Two Approaches
+
+### Approach A: Replicate UI (Recommended)
+Read your app's components, note every visual detail, build identical-looking components in Remotion.
+
+**Why?** Your app components have hooks, state, and dependencies that don't work in Remotion. Replication is cleaner.
+
+### Approach B: Copy Components (When simple enough)
+For truly simple presentational components, you can copy them directly.
+
+\`\`\`bash
+cp -r ../my-app/src/components/Card ./src/app-components/
+cp ../my-app/tailwind.config.js ./
+\`\`\`
+
+---
+
+## Adapting Components
+
+### 1. Remove Interactivity
+
+\`\`\`tsx
+// BEFORE (interactive app)
+<Button onClick={handleSubmit}>Submit</Button>
+
+// AFTER (video-ready)
+<Button disabled style={{ pointerEvents: 'none' }}>Submit</Button>
+\`\`\`
+
+### 2. Replace Dynamic Data
+
+\`\`\`tsx
+// BEFORE (fetches from API)
+const { data } = useQuery('GET_USERS');
+
+// AFTER (scripted data)
+const data = [
+  { id: 1, name: 'Sarah Chen', role: 'Designer' },
+  { id: 2, name: 'Alex Rivera', role: 'Developer' },
+];
+\`\`\`
+
+### 3. Wrap with Animation
+
+\`\`\`tsx
+import { FadeIn, SlideUp } from '../shared';
+
+<FadeIn delay={0}>
+  <Navbar />
+</FadeIn>
+
+<SlideUp delay={15}>
+  <Sidebar />
+</SlideUp>
+\`\`\`
+
+---
+
+## Common Showcase Patterns
+
+### Dashboard with Staggered Widgets
+
+\`\`\`tsx
+const DashboardShowcase = () => {
+  return (
+    <DashboardLayout>
+      <FadeIn delay={0}>
+        <Header user={mockUser} />
+      </FadeIn>
+
+      <div className="grid grid-cols-3 gap-4">
+        <SlideUp delay={15}><StatsWidget data={revenueData} /></SlideUp>
+        <SlideUp delay={23}><StatsWidget data={usersData} /></SlideUp>
+        <SlideUp delay={31}><StatsWidget data={ordersData} /></SlideUp>
+      </div>
+
+      <FadeIn delay={45}>
+        <ChartWidget data={chartData} />
+      </FadeIn>
+    </DashboardLayout>
+  );
+};
+\`\`\`
+
+### Form with Typing Simulation
+
+\`\`\`tsx
+const FormShowcase = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <LoginForm>
+      <Input
+        label="Email"
+        value={<TextReveal text="sarah@example.com" startFrame={0} />}
+      />
+      <Input
+        label="Password"
+        type="password"
+        value={frame > fps * 2 ? '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' : ''}
+      />
+    </LoginForm>
+  );
+};
+\`\`\`
+
+### Modal Slide-In
+
+\`\`\`tsx
+const ModalShowcase = () => {
+  const frame = useCurrentFrame();
+  const showModal = frame > 30;
+
+  return (
+    <>
+      <PageBackground />
+      {showModal && (
+        <>
+          <FadeIn delay={30}>
+            <div className="absolute inset-0 bg-black/50" />
+          </FadeIn>
+          <SlideUp delay={35}>
+            <ConfirmationModal title="Confirm Delete" message="Are you sure?" isOpen />
+          </SlideUp>
+        </>
+      )}
+    </>
+  );
+};
+\`\`\`
+
+---
+
+## Troubleshooting
+
+### Component uses hooks that don't work
+\`\`\`tsx
+// PROBLEM: useRouter, useAuth won't work
+// SOLUTION: Pass as props or mock the context
+const MockAuthProvider = ({ children }) => (
+  <AuthContext.Provider value={{ user: mockUser }}>
+    {children}
+  </AuthContext.Provider>
+);
+\`\`\`
+
+### Component too large for frame
+\`\`\`tsx
+// Use transform scale to fit
+<div style={{ transform: 'scale(0.8)', transformOrigin: 'top left' }}>
+  <LargeComponent />
+</div>
+\`\`\`
+`;
+}
+function generateProjectVideoWorkflowRule(b) {
+  const cmd2 = b.name;
+  return `---
+name: project-video-workflow
+description: Create promotional videos using actual project UI
+---
+
+# Project-Based Video Workflow
+
+Create promotional videos using **your actual project's UI** replicated in Remotion.
+
+## When to Use
+
+- User has existing React/Next.js/Vue project
+- User wants "product demo", "feature walkthrough", or "promotional video"
+- User mentions showcasing specific features/UI
+- User wants to animate their actual app interface
+
+## Quick Start
+
+\`\`\`bash
+# 1. Scaffold video project
+${cmd2} video init my-app-promo
+cd my-app-promo
+
+# 2. Generate audio assets
+${cmd2} video create \\
+  --script "Introducing our new app..." \\
+  --output ./public
+
+# 3. Build scenes replicating your app's UI
+
+# 4. Preview & Render
+npm run dev
+npm run render
+\`\`\`
+
+---
+
+## Full Workflow
+
+### Step 1: Analyze Project
+
+\`\`\`bash
+# Check framework
+cat package.json | grep -E "react|next|vue"
+
+# List components
+ls -la src/components/
+
+# Get colors
+cat tailwind.config.* | grep -A 30 "colors"
+\`\`\`
+
+**Identify:**
+- Framework: React, Next.js, Vue
+- Styling: Tailwind, CSS modules, styled-components
+- Key components: Forms, cards, modals, dashboards
+- Views to showcase
+
+### Step 2: Document Brand
+
+\`\`\`markdown
+## Brand: [App Name]
+
+### Colors (from tailwind.config)
+- Background: #0f172a
+- Surface: #1e293b
+- Primary: #14b8a6
+- Text: #ffffff
+
+### Key Components
+1. Sidebar - Dark bg, navigation items
+2. Dashboard - Stats cards, charts
+3. Modal - Overlay, card
+\`\`\`
+
+### Step 3: Plan Scenes
+
+\`\`\`markdown
+## Scene Plan
+
+### Scene 1: Intro (3s)
+- Logo centered
+- Tagline fades up
+
+### Scene 2: Dashboard (5s)
+- Stats widgets stagger in
+- Chart animates
+
+### Scene 3: Feature Demo (5s)
+- Sidebar slides in
+- Selection animates
+
+### Scene 4: CTA (3s)
+- Logo + button
+\`\`\`
+
+### Step 4: Build Scenes
+
+Create scenes in \`src/remotion/scenes/\` that replicate your UI:
+
+\`\`\`tsx
+// src/remotion/scenes/DashboardScene.tsx
+import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
+
+export const DASHBOARD_SCENE_DURATION = 150;
+
+const mockData = {
+  revenue: 125000,
+  users: 1234,
+  orders: 567,
+};
+
+export const DashboardScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#0f172a", padding: 40 }}>
+      {/* Replicate your dashboard layout here */}
+      {/* Use EXACT colors from your tailwind.config */}
+    </AbsoluteFill>
+  );
+};
+\`\`\`
+
+### Step 5: Generate Audio
+
+\`\`\`bash
+${cmd2} video create \\
+  --script "Introducing [App]. The fastest way to..." \\
+  --music-prompt "modern uplifting tech" \\
+  --output ./public
+\`\`\`
+
+### Step 6: Render
+
+\`\`\`bash
+npm run dev      # Preview
+npm run render   # Final video
+\`\`\`
+
+---
+
+## Tips
+
+1. **Start simple** - Get basic scenes working before adding complex animations
+2. **Use mock data** - Pre-define realistic demo data
+3. **Match voiceover timing** - Sync visual transitions with narration
+4. **Keep scenes focused** - One main idea per scene
+5. **Test at 1x speed** - Preview at normal speed to catch timing issues
+`;
+}
+function generateAllSkillFiles(b) {
+  return {
+    "SKILL.md": generateSkillContent(b),
+    "rules/presentations.md": generatePresentationsRule(b),
+    "rules/video.md": generateVideoRule(b),
+    "rules/motion-standards.md": generateMotionStandardsRule(),
+    "rules/micro-interactions.md": generateMicroInteractionsRule(),
+    "rules/component-integration.md": generateComponentIntegrationRule(b),
+    "rules/project-video-workflow.md": generateProjectVideoWorkflowRule(b),
+    "assets/animation-components.tsx": generateAnimationComponents()
+  };
+}
+var EDITORS = [
+  { 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" }
+];
+var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skill for AI coding assistants`).addHelpText(
+  "after",
+  `
+${chalk12.bold("Examples:")}
+  ${chalk12.gray("# Install skill for all detected editors")}
+  $ ${brand.name} skill install
+
+  ${chalk12.gray("# Install to specific directory")}
+  $ ${brand.name} skill install --dir ~/.claude
+
+  ${chalk12.gray("# Install without remotion-best-practices")}
+  $ ${brand.name} skill install --skip-remotion
+
+  ${chalk12.gray("# Show skill content")}
+  $ ${brand.name} skill show
+`
+);
+skillCommand.command("install").description(`Install the ${brand.displayName} skill for AI coding assistants`).option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").option("--skip-remotion", "Skip installing remotion-best-practices skill").action(async (options) => {
+  const installed = [];
+  const skipped = [];
+  const errors = [];
+  const baseDir = options.local ? process.cwd() : homedir();
+  const skillFiles = generateAllSkillFiles(brand);
+  if (options.dir) {
+    const skillPath = join(options.dir, "skills", brand.name);
+    try {
+      installSkill(skillPath, skillFiles, options.force);
+      installed.push(options.dir);
+    } catch (err) {
+      errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  } else {
+    for (const editor of EDITORS) {
+      const editorDir = join(baseDir, editor.dir);
       const skillPath = join(editorDir, "skills", brand.name);
       const skillFile = join(skillPath, "SKILL.md");
       if (!existsSync2(editorDir)) {
@@ -3371,7 +4781,7 @@ skillCommand.command("install").description(`Install the ${brand.displayName} sk
         continue;
       }
       try {
-        installSkill(skillPath, skillContent, options.force);
+        installSkill(skillPath, skillFiles, options.force);
         installed.push(editor.name);
       } catch (err) {
         errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
@@ -3383,6 +4793,7 @@ skillCommand.command("install").description(`Install the ${brand.displayName} sk
     success("Skill installed successfully");
     console.log();
     keyValue("Installed to", installed.join(", "));
+    keyValue("Files", Object.keys(skillFiles).length.toString());
   }
   if (skipped.length > 0) {
     console.log();
@@ -3401,10 +4812,35 @@ skillCommand.command("install").description(`Install the ${brand.displayName} sk
     console.log(chalk12.gray("Supported editors: " + EDITORS.map((e) => e.name).join(", ")));
     console.log(chalk12.gray("Use --dir <path> to install to a specific directory"));
   }
+  if (installed.length > 0 && !options.skipRemotion) {
+    console.log();
+    info("Installing remotion-best-practices skill...");
+    try {
+      execSync("npx -y skills add https://github.com/remotion-dev/skills --skill remotion-best-practices --all", {
+        stdio: "inherit",
+        timeout: 6e4
+      });
+      success("remotion-best-practices skill installed");
+    } catch (err) {
+      warn("Could not install remotion-best-practices skill automatically");
+      console.log(chalk12.gray("  Run manually: npx skills add remotion-dev/skills"));
+    }
+  }
   console.log();
 });
-skillCommand.command("show").description("Display the skill content").action(() => {
-  console.log(generateSkillContent(brand));
+skillCommand.command("show").description("Display the skill content").option("-a, --all", "Show all files").action((options) => {
+  const files = generateAllSkillFiles(brand);
+  if (options.all) {
+    for (const [path2, content] of Object.entries(files)) {
+      console.log(chalk12.bold.cyan(`
+=== ${path2} ===
+`));
+      console.log(content);
+    }
+  } else {
+    console.log(files["SKILL.md"]);
+    console.log(chalk12.gray("\nUse --all to show all files"));
+  }
 });
 skillCommand.command("uninstall").description(`Remove the ${brand.displayName} skill from AI coding assistants`).option("-g, --global", "Uninstall globally (from home directory)", true).option("-l, --local", "Uninstall locally (from current directory)").action(async (options) => {
   const { rmSync } = await import("fs");
@@ -3429,10 +4865,13 @@ skillCommand.command("uninstall").description(`Remove the ${brand.displayName} s
   }
   console.log();
 });
-function installSkill(skillPath, content, force) {
-  const skillFile = join(skillPath, "SKILL.md");
-  mkdirSync(skillPath, { recursive: true });
-  writeFileSync(skillFile, content, "utf-8");
+function installSkill(skillPath, files, force) {
+  mkdirSync(join(skillPath, "rules"), { recursive: true });
+  mkdirSync(join(skillPath, "assets"), { recursive: true });
+  for (const [relativePath, content] of Object.entries(files)) {
+    const filePath = join(skillPath, relativePath);
+    writeFileSync(filePath, content, "utf-8");
+  }
 }
 
 // src/commands/tts.ts
@@ -3860,8 +5299,98 @@ init_output();
 init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
-import { mkdir, writeFile as writeFile5, readFile as readFile2 } from "fs/promises";
-import { join as join2 } from "path";
+import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm } from "fs/promises";
+import { join as join2, resolve as resolve4 } from "path";
+import { execSync as execSync2, spawn } from "child_process";
+var DEFAULT_TEMPLATE = "inizio-inc/remotion-composition";
+var DEFAULT_FPS = 30;
+function parseScriptIntoSections(script) {
+  if (script.includes("---") || script.includes("[Section")) {
+    const parts = script.split(/---|\[Section \d+\]/i).filter((s) => s.trim());
+    if (parts.length > 1) {
+      return parts.map((p) => p.trim());
+    }
+  }
+  const sentences = script.split(/(?<=[.!?])\s+/).map((s) => s.trim()).filter((s) => s.length > 0);
+  const sections = [];
+  let pendingShort = "";
+  for (const sentence of sentences) {
+    const wordCount = sentence.split(/\s+/).length;
+    if (pendingShort) {
+      sections.push(`${pendingShort} ${sentence}`);
+      pendingShort = "";
+    } else if (wordCount < 5 && sections.length < sentences.length - 1) {
+      pendingShort = sentence;
+    } else {
+      sections.push(sentence);
+    }
+  }
+  if (pendingShort) {
+    if (sections.length > 0) {
+      sections[sections.length - 1] += ` ${pendingShort}`;
+    } else {
+      sections.push(pendingShort);
+    }
+  }
+  return sections;
+}
+function calculateSectionTiming(sections, totalDuration, fps = DEFAULT_FPS, timestamps) {
+  if (timestamps && timestamps.characters.length > 0) {
+    return calculateSectionTimingFromTimestamps(sections, timestamps, fps);
+  }
+  const totalWords = sections.reduce((sum, s) => sum + s.split(/\s+/).length, 0);
+  let currentTime = 0;
+  return sections.map((text, index) => {
+    const wordCount = text.split(/\s+/).length;
+    const proportion = wordCount / totalWords;
+    const durationInSeconds = totalDuration * proportion;
+    const durationInFrames = Math.round(durationInSeconds * fps);
+    const section = {
+      id: index + 1,
+      text,
+      wordCount,
+      startTime: currentTime,
+      endTime: currentTime + durationInSeconds,
+      durationInSeconds,
+      durationInFrames
+    };
+    currentTime += durationInSeconds;
+    return section;
+  });
+}
+function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
+  const { characters, characterStartTimesSeconds, characterEndTimesSeconds } = timestamps;
+  const fullText = characters.join("");
+  const results = [];
+  let charIndex = 0;
+  for (let i = 0; i < sections.length; i++) {
+    const sectionText = sections[i];
+    const sectionLength = sectionText.length;
+    while (charIndex < characters.length && characters[charIndex].match(/^\s*$/)) {
+      charIndex++;
+    }
+    const startCharIndex = charIndex;
+    const startTime = characterStartTimesSeconds[startCharIndex] || 0;
+    charIndex += sectionLength;
+    let endCharIndex = charIndex - 1;
+    while (endCharIndex > startCharIndex && characters[endCharIndex]?.match(/^\s*$/)) {
+      endCharIndex--;
+    }
+    const endTime = characterEndTimesSeconds[Math.min(endCharIndex, characterEndTimesSeconds.length - 1)] || startTime + 1;
+    const durationInSeconds = endTime - startTime;
+    const durationInFrames = Math.round(durationInSeconds * fps);
+    results.push({
+      id: i + 1,
+      text: sectionText,
+      wordCount: sectionText.split(/\s+/).length,
+      startTime,
+      endTime,
+      durationInSeconds,
+      durationInFrames
+    });
+  }
+  return results;
+}
 async function downloadFile3(url, outputPath) {
   if (url.startsWith("data:")) {
     const matches = url.match(/^data:[^;]+;base64,(.+)$/);
@@ -3937,13 +5466,24 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       duration: ttsResult.duration,
       voice: options.voice,
       provider: ttsResult.provider,
-      cost: ttsResult.cost
+      cost: ttsResult.cost,
+      timestamps: ttsResult.timestamps
+      // Include for word-level sync
     };
     if (format === "human") {
       spinner?.stop();
       success(`Voiceover: ${voiceoverPath} (${ttsResult.duration.toFixed(1)}s)`);
       spinner?.start();
     }
+    if (spinner) spinner.text = "Analyzing script sections...";
+    const sectionTexts = parseScriptIntoSections(script);
+    const sections = calculateSectionTiming(sectionTexts, ttsResult.duration, DEFAULT_FPS, ttsResult.timestamps);
+    if (format === "human") {
+      spinner?.stop();
+      const timingSource = ttsResult.timestamps ? "TTS timestamps" : "word estimation";
+      success(`Sections: ${sections.length} sections (timing from ${timingSource})`);
+      spinner?.start();
+    }
     const musicDuration = Math.min(30, Math.ceil(ttsResult.duration) + 5);
     const musicPrompt = options.musicPrompt || "uplifting background music, positive energy";
     if (spinner) spinner.text = "Generating music...";
@@ -4025,13 +5565,24 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       success(`Images: Downloaded ${downloadedImages.length} images to ${imagesDir}`);
       spinner?.start();
     }
+    const sectionsWithImages = sections.map((section, index) => {
+      const imageIndex = index % downloadedImages.length;
+      return {
+        ...section,
+        imagePath: downloadedImages[imageIndex]?.path
+      };
+    });
     if (spinner) spinner.text = "Writing manifest...";
+    const totalDurationInFrames = Math.round(ttsResult.duration * DEFAULT_FPS);
     const manifest = {
       topic,
       script,
       voiceover: voiceoverInfo,
       music: musicInfo,
       images: downloadedImages,
+      sections: sectionsWithImages,
+      totalDurationInFrames,
+      fps: DEFAULT_FPS,
       totalCost,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
@@ -4052,15 +5603,16 @@ var createCommand2 = new Command19("create").description("Create video assets (v
     info(`Topic: ${topic}`);
     info(`Voiceover: ${voiceoverInfo.path} (${voiceoverInfo.duration.toFixed(1)}s, ${voiceoverInfo.voice})`);
     info(`Music: ${musicInfo.path} (${musicInfo.duration}s)`);
+    info(`Sections: ${sections.length} (${totalDurationInFrames} frames at ${DEFAULT_FPS}fps)`);
     info(`Images: ${downloadedImages.length} downloaded`);
     info(`Manifest: ${manifestPath}`);
     console.log();
     info(`Total cost: $${totalCost.toFixed(4)}`);
     console.log();
     info("Next steps:");
-    info("  1. Create Remotion project (see remotion-best-practices skill)");
-    info("  2. Use manifest data to configure video composition");
-    info("  3. Run: npm start (preview) / npm run render (build)");
+    info("  1. Create Remotion scenes matching section timings in manifest");
+    info("  2. Each section has exact durationInFrames - use these for sync");
+    info("  3. Run: npx remotion render FullVideo out/video.mp4");
   } catch (err) {
     spinner?.stop();
     error(err instanceof Error ? err.message : "Unknown error");
@@ -4111,10 +5663,93 @@ var searchCommand2 = new Command19("search").description("Search for stock video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(createCommand2).addCommand(searchCommand2);
+var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--no-install", "Skip pnpm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
+  const format = options.format;
+  const spinner = format === "human" ? ora12("Initializing video project...").start() : null;
+  try {
+    const targetDir = resolve4(process.cwd(), name);
+    try {
+      await access(targetDir);
+      spinner?.stop();
+      error(`Directory "${name}" already exists`);
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    } catch {
+    }
+    if (spinner) spinner.text = `Downloading template from ${options.template}...`;
+    try {
+      execSync2(`npx --yes degit ${options.template} "${targetDir}"`, {
+        stdio: "pipe"
+      });
+    } catch {
+      if (spinner) spinner.text = "Cloning template...";
+      execSync2(`git clone --depth 1 https://github.com/${options.template}.git "${targetDir}"`, {
+        stdio: "pipe"
+      });
+      await rm(join2(targetDir, ".git"), { recursive: true, force: true });
+    }
+    if (format === "human") {
+      spinner?.stop();
+      success(`Template downloaded to ${name}/`);
+      spinner?.start();
+    }
+    if (options.install) {
+      if (spinner) spinner.text = "Installing dependencies...";
+      await new Promise((resolvePromise, reject) => {
+        const child = spawn("pnpm", ["install"], {
+          cwd: targetDir,
+          stdio: "pipe",
+          shell: true
+        });
+        child.on("close", (code) => {
+          if (code === 0) {
+            resolvePromise();
+          } else {
+            reject(new Error(`pnpm install failed with code ${code}`));
+          }
+        });
+        child.on("error", reject);
+      });
+      if (format === "human") {
+        spinner?.stop();
+        success("Dependencies installed");
+        spinner?.start();
+      }
+    }
+    spinner?.stop();
+    if (format === "json") {
+      printJson({
+        name,
+        path: targetDir,
+        template: options.template,
+        installed: options.install
+      });
+      return;
+    }
+    if (format === "quiet") {
+      console.log(targetDir);
+      return;
+    }
+    console.log();
+    success(`Video project "${name}" created successfully!`);
+    console.log();
+    info("Next steps:");
+    info(`  cd ${name}`);
+    if (!options.install) {
+      info("  pnpm install");
+    }
+    info("  pnpm dev             # Preview in Remotion Studio");
+    info("  cc video create ...  # Generate assets to public/");
+    info("  pnpm render          # Render final video");
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Unknown error");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2);
 
 // src/index.ts
-var VERSION = "0.1.5";
+var VERSION = "0.1.6";
 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({