@conceptcraft/mindframes 0.1.12 → 0.1.14

package/dist/index.js

@@ -2,7 +2,7 @@
 import { createRequire } from 'module'; const require = createRequire(import.meta.url);
 
 // src/index.ts
-import { Command as Command20 } from "commander";
+import { Command as Command21 } from "commander";
 import chalk13 from "chalk";
 
 // src/lib/brand.ts
@@ -1087,6 +1087,12 @@ async function searchImages(searchRequest) {
     body: searchRequest
   });
 }
+async function generateImage(generateRequest) {
+  return request("/api/cli/images/generate", {
+    method: "POST",
+    body: generateRequest
+  });
+}
 async function searchVideos(searchRequest) {
   return request("/api/cli/videos/search", {
     method: "POST",
@@ -1103,6 +1109,12 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
+async function scrapeUrl(url) {
+  return request("/api/cli/scrape", {
+    method: "POST",
+    body: { url }
+  });
+}
 
 // src/lib/feature-cache.ts
 var cache = new Conf2({
@@ -1158,7 +1170,7 @@ function getCachePath() {
 }
 
 // src/commands/login.ts
-var CLI_CLIENT_NAME = "ConceptCraft CLI";
+var CLI_CLIENT_NAME = `${brand.displayName} CLI`;
 var CALLBACK_PORT_START = 8765;
 var CALLBACK_PORT_END = 8775;
 function generateCodeVerifier() {
@@ -1408,11 +1420,11 @@ async function runLoginFlow(options) {
     throw err;
   }
 }
-var loginCommand = new Command("login").description("Authenticate with ConceptCraft (opens browser)").option("--no-browser", "Print URL instead of opening browser").action(async (options) => {
+var loginCommand = new Command("login").description(`Authenticate with ${brand.displayName} (opens browser)`).option("--no-browser", "Print URL instead of opening browser").action(async (options) => {
   console.log();
   if (hasOAuthTokens()) {
     warn("You are already logged in.");
-    info("Run 'conceptcraft logout' to log out first, or continue to re-authenticate.");
+    info(`Run '${brand.commands[0]} logout' to log out first, or continue to re-authenticate.`);
     console.log();
   }
   try {
@@ -1470,7 +1482,7 @@ import ora2 from "ora";
 var configCommand = new Command3("config").description("Manage CLI configuration").addCommand(
   new Command3("init").description("Initialize configuration interactively").action(async () => {
     console.log();
-    console.log(chalk4.bold("ConceptCraft CLI Configuration"));
+    console.log(chalk4.bold(`${brand.displayName} CLI Configuration`));
     console.log(chalk4.gray("\u2500".repeat(35)));
     console.log();
     try {
@@ -1489,7 +1501,7 @@ var configCommand = new Command3("config").description("Manage CLI configuration
       });
       setApiKey(apiKey.trim());
       const useCustomUrl = await confirm2({
-        message: "Use a custom API URL? (default: www.mindframes.app)",
+        message: `Use a custom API URL? (default: ${brand.apiUrl.replace("https://", "")})`,
         default: false
       });
       if (useCustomUrl) {
@@ -1544,7 +1556,7 @@ var configCommand = new Command3("config").description("Manage CLI configuration
         warn(
           `Could not verify API key: ${apiErr instanceof Error ? apiErr.message : String(apiErr)}`
         );
-        warn("You may need to set the team ID manually: mindframes config set team-id <id>");
+        warn(`You may need to set the team ID manually: ${brand.commands[0]} config set team-id <id>`);
       }
       console.log();
       success("Configuration saved!");
@@ -1648,7 +1660,7 @@ var configCommand = new Command3("config").description("Manage CLI configuration
     try {
       await fetchAndCache();
       spinner.succeed("Feature flags refreshed");
-      info("Run 'conceptcraft --help' to see updated commands");
+      info(`Run '${brand.commands[0]} --help' to see updated commands`);
     } catch (err) {
       spinner.fail("Failed to refresh");
       error(err instanceof Error ? err.message : String(err));
@@ -1996,29 +2008,29 @@ ${chalk6.bold("Recommended Usage:")}
 
 ${chalk6.bold("Examples:")}
   ${chalk6.gray("# Content from PDF + style from image reference")}
-  $ conceptcraft create "Quarterly Report" \\
+  $ ${brand.commands[0]} create "Quarterly Report" \\
       --file ./report.pdf \\
       --reference-url https://example.com/style-template.png \\
       -n 12 -m best --audience "Executive team"
 
   ${chalk6.gray("# Upload content files (PDF, PPTX, DOCX)")}
-  $ conceptcraft create "Product Demo" \\
+  $ ${brand.commands[0]} create "Product Demo" \\
       --file ./existing-deck.pptx --file ./specs.pdf \\
       --goal persuade --audience "Enterprise buyers"
 
   ${chalk6.gray("# Inline context with custom styling")}
-  $ conceptcraft create "Q4 Business Review" \\
+  $ ${brand.commands[0]} create "Q4 Business Review" \\
       -n 12 -m best --goal inform \\
       --context "Revenue: $50M (+25% YoY), EBITDA: $8M" \\
       --reference-url https://example.com/brand-style.jpg
 
   ${chalk6.gray("# Research presentation from URLs")}
-  $ conceptcraft create "AI Industry Trends" \\
+  $ ${brand.commands[0]} create "AI Industry Trends" \\
       -n 10 -m best -t educational \\
       --sources https://example.com/ai-report.pdf
 
   ${chalk6.gray("# Pipe content from another command")}
-  $ cat meeting-notes.md | conceptcraft create "Meeting Summary" \\
+  $ cat meeting-notes.md | ${brand.commands[0]} create "Meeting Summary" \\
       -n 6 -m balanced --goal inform
 
 ${chalk6.bold("Content Options (what to include in slides):")}
@@ -2047,7 +2059,7 @@ ${chalk6.bold("Theme Options:")}
   --decorations <style>      Background style (none, waves-bottom-left, waves-top-right, blob-corners, minimal)
 
   ${chalk6.gray("Example: Apply corporate colors")}
-  $ conceptcraft create "Brand Deck" \\
+  $ ${brand.commands[0]} create "Brand Deck" \\
       --theme blue --primary-color "#1E40AF" --decorations waves-bottom-left
 
 ${chalk6.bold("Mode Reference:")}
@@ -2282,11 +2294,11 @@ Uploading ${options.file.length} file(s)...`));
     console.log(chalk6.gray("  -c, --context <text>      Direct text context"));
     console.log(chalk6.gray("  --context-file <path>     Read from a file"));
     console.log(chalk6.gray("  --sources <urls...>       URLs to scrape"));
-    console.log(chalk6.gray("  cat file | conceptcraft   Pipe content"));
+    console.log(chalk6.gray(`  cat file | ${brand.commands[0]}   Pipe content`));
     console.log();
     console.log(chalk6.gray("Example:"));
-    console.log(chalk6.cyan('  conceptcraft create "Q4 Report" --file ./report.pdf'));
-    console.log(chalk6.cyan('  conceptcraft create "Q4 Report" --context "Revenue: $10M, Growth: 25%"'));
+    console.log(chalk6.cyan(`  ${brand.commands[0]} create "Q4 Report" --file ./report.pdf`));
+    console.log(chalk6.cyan(`  ${brand.commands[0]} create "Q4 Report" --context "Revenue: $10M, Growth: 25%"`));
     process.exit(6);
   }
   try {
@@ -2427,7 +2439,7 @@ var listCommand = new Command5("list").description("List presentations").option(
   const teamId = options.teamId ?? getDefaultTeamId();
   if (!teamId) {
     error(
-      "Team ID required. Set a default with 'mindframes config set team-id <id>' or use --team-id"
+      "`Team ID required. Set a default with '${brand.commands[0]} config set team-id <id>' or use --team-id`"
     );
     process.exit(6);
   }
@@ -2698,7 +2710,7 @@ var brandingCommand = new Command10("branding").description("Manage brand profil
           console.log();
           console.log(
             chalk8.gray(
-              "Create one with: conceptcraft branding extract <url>"
+              "`Create one with: ${brand.commands[0]} branding extract <url>`"
             )
           );
         }
@@ -2831,7 +2843,7 @@ var brandingCommand = new Command10("branding").description("Manage brand profil
         console.log(`    Confidence: ${Math.round(brand2.confidence * 100)}%`);
         console.log();
       }
-      info(`Create a presentation with this brand: conceptcraft create "Your Topic" -b ${result.id}`);
+      info(`Create a presentation with this brand: ${brand2.commands[0]} create "Your Topic" -b ${result.id}`);
       console.log();
     } catch (err) {
       spinner.fail("Extraction failed");
@@ -2994,7 +3006,7 @@ var ideasCommand = new Command12("ideas").description("Generate presentation top
   console.log("For now, try these approaches:");
   console.log(
     chalk10.gray(
-      "  1. Visit the ConceptCraft dashboard and use the idea generator"
+      "`  1. Visit the ${brand.displayName} dashboard and use the idea generator`"
     )
   );
   console.log(
@@ -3090,6 +3102,7 @@ A comprehensive CLI for AI-powered content creation. Generate presentations, vid
 | Search images | \`${cmd2} image search -q "mountain landscape"\` |
 | Search videos | \`${cmd2} video search "ocean waves"\` |
 | Mix audio tracks | \`${cmd2} mix create --video v.mp4 --music m.mp3\` |
+| Scrape URL content | \`${cmd2} scrape https://example.com\` |
 
 ---
 
@@ -3146,7 +3159,7 @@ ${cmd2} create "Pitch Deck" \\
 - \`--mode <instant|ultrafast|fast|balanced|best>\` - Quality/speed tradeoff
 - \`--tone <creative|professional|educational|formal|casual>\`
 - \`--file <paths...>\` - Extract content from files
-- \`--sources <urls...>\` - Scrape URLs for context
+- \`--sources <urls...>\` - Scrape URLs for context (auto-routes YouTube, Twitter/X)
 - \`--brand <id|url>\` - Apply branding
 - \`--open\` - Open in browser when done
 
@@ -3187,7 +3200,7 @@ cat <<'EOF' | ${cmd2} video create --output ./public
       "imageQuery": "call to action button"
     }
   ],
-  "voice": "Kore",
+  "voiceId": "21m00Tcm4TlvDq8ikWAM",
   "voiceSettings": {
     "speed": 0.95,
     "stability": 0.4,
@@ -3333,7 +3346,35 @@ Music automatically loops to match video duration.
 
 ---
 
-## 8. Branding
+## 8. URL Scraping
+
+Extract content from URLs for analysis, context gathering, or research.
+
+\`\`\`bash
+# Basic scrape
+${cmd2} scrape https://example.com
+
+# Save to file
+${cmd2} scrape https://company.com/about -o about.md
+
+# JSON output (for programmatic use)
+${cmd2} scrape https://docs.example.com --format json
+
+# Quiet mode (content only)
+${cmd2} scrape https://blog.example.com --format quiet > content.txt
+\`\`\`
+
+**Use cases:**
+- Gather context for presentation creation
+- Research competitor features
+- Extract documentation for analysis
+- Feed content into other workflows
+
+**Output includes:** title, description, full content (markdown), token count, cost
+
+---
+
+## 9. Branding
 
 Manage brand profiles for consistent styling.
 
@@ -3356,7 +3397,7 @@ ${cmd2} create "Topic" --brand my-company
 
 ---
 
-## 9. Configuration
+## 10. Configuration
 
 \`\`\`bash
 # Interactive setup
@@ -3483,231 +3524,636 @@ ${cmd2} --version           # Version info
 `;
 }
 
-// src/commands/skill/rules/video/content.ts
-var THUMBNAIL_RULES = `Consider creating separate thumbnail component with Remotion (can be captured with remotion still, not used in actual video).
+// src/commands/skill/generate-video-skill.ts
+function generateVideoSkillContent(context) {
+  const { name, cmd: cmd2 } = context;
+  return `---
+name: ${name}-video
+description: Orchestrates video asset assembly for marketing videos, product demos, explainers, and promo content. Analyzes projects to extract branding (logos, colors, fonts), identifies reusable UI components, generates voiceovers and music via CLI, searches stock media, and produces a video-manifest.json. Use when user says "create a video", "make a promo", "product demo", "explainer video", "marketing video", "gather video assets", "video for my project", or "TikTok/Reels content".
+---
 
-**High-CTR principles:**
-- Expressive faces (emotion, not neutral) boost CTR 20-30%
-- High contrast, bold colors (yellow, orange stand out)
-- Simple: 3 main elements max (face + text + 1 visual)
-- Mobile-first: readable at 320px width (70% of views)
-- Minimal text: 3-5 words, bold legible fonts (60-80px)
-- Rule of thirds composition
+# Video Asset Assembler (Phase 1)
 
-**Specs:** 1280x720, <2MB, 16:9 ratio
+You are an expert video producer who prepares all assets needed for Remotion video rendering. Your job is to analyze the project, gather resources, generate audio, and create a complete manifest\u2014NOT to render the final video.
 
-Can capture: \`pnpm exec remotion still ThumbnailScene out/thumb.png\`
-`;
-var MOTION_DESIGN_GUIDELINES = `# Motion Design Principles
+## When to Use This Skill
 
-**Core Philosophy:** "Atomic, Kinetic Construction" - nothing is static. Elements arrive and leave via physics-based transitions.
+\u2705 **USE for:**
+- Marketing videos, product demos, launch videos
+- News/trending topic videos
+- Explainer videos from any source
+- Social content (TikTok, Reels, YouTube Shorts)
+- Any video that needs voiceover + visuals + music
 
-## Design System Approach
+\u274C **DO NOT use for:**
+- Editing existing video files (use ffmpeg directly)
+- Live streaming setup
+- Video format conversion
+- Simple image slideshows without voiceover
 
-**Separate content from logic:**
-- Theme object: colors (primary, accent, background, text), fonts, corner radiuses in config
-- Scene object: define by duration in frames and content type, not timecodes
-- Avoid hardcoding: colors, text, data values can be passed via props or config file
+## Critical Rules
 
-## Animation Physics (Spring-Based)
+1. **NEVER hallucinate file paths.** Before referencing any file, VERIFY it exists with \`ls\` or \`find\`.
+2. **NEVER skip the discovery phase.** Always analyze source material before scripting.
+3. **ALWAYS use the CLI** for audio generation\u2014don't simulate or skip it.
+4. **ALWAYS produce a valid video-manifest.json** at the end.
+5. **ALWAYS ask clarifying questions** if video type, duration, or tone is unclear.
 
-**Spring Pop:**
-- UI cards, bubbles, logos "pop" with bounce
-- \`spring()\` function works well: low mass (0.5), moderate damping (10-12), high stiffness (100-200)
-- Spring value can map to scale (0 to 1) and opacity (0 to 1)
-- Consider \`transform-origin\` placement (center for bubbles, top for dropdowns)
+## Video Types & Source Detection
 
-**Kinetic Typography:**
-- Text entering line-by-line or word-by-word (not all at once)
-- Can split text into arrays, stagger with delays (index * 5 frames)
-- \`interpolate()\` works for opacity [0,1] and translateY [20px, 0px] - slide up
-- Cubic easing works well for slide-up motion
+Detect the video type and source material FIRST. This determines your asset strategy.
 
-**Constructed UI:**
-- Building UI from HTML/CSS divs works better than screenshots
-- If user shares project: study actual UI components (buttons, cards, modals) and implement pixel-perfect recreations - match colors, fonts, shadows, border-radius
-- Bar charts: can animate height/width from 0% to target
-- Line charts: can animate SVG path \`stroke-dashoffset\`
-- Donut charts: can animate \`stroke-dasharray\` of SVG circle
-- Numbers: counter component interpolating from 0 to target over 30-60 frames
+| Video Type | Source | Asset Strategy |
+|------------|--------|----------------|
+| **Project Launch** | Local codebase | Extract components, branding, screenshots from code |
+| **Website Promo** | Live URL | Screenshot pages, extract colors/logos via browser |
+| **News/Trending** | External articles, URLs | Summarize content, use 100% stock media |
+| **Explainer/Tutorial** | Topic or concept | Research topic, use diagrams + stock |
+| **Product Announcement** | Press release, changelog | Extract key points, mix branded + stock |
 
-## Visual Composition
+### Source Detection Logic
 
-**Background Ambience:**
-- Static backgrounds feel flat - consider faint dots/patterns
-- Slow oscillation works well: \`Math.sin(frame / 100)\` applied to position/rotation for "floating" effect
-- Parallax adds depth: background moves slower than foreground
+Check what the user provides or what's available:
 
-**SVG Handling:**
-- Inline SVGs allow control of fill color via theme (better than img tags)
-- Chat bubbles can be constructed with SVG paths or heavy border-radius
-- Animating bubble "tail" separately adds polish
+| User Provides | Action |
+|---------------|--------|
+| **Local codebase** (package.json, src/) | Extract components, branding, screenshots |
+| **URL to website** | Screenshot pages, extract colors/logos |
+| **URL to article/news** | Fetch content, summarize key points |
+| **Document** (PDF, markdown, .txt) | Parse and extract key messages |
+| **Raw text/script** | Use directly for voiceover |
+| **Images/videos** | Use as-is for scenes |
+| **Topic/concept** | Research + generate stock queries |
 
-**Scene Transitions:**
-- Scenes can slide or camera can "pan" to new area
-- Slide-out approach: Scene A \`translateX\` 0% to -100%, Scene B 100% to 0%
-- Spatial pan approach: place scenes on giant canvas, animate parent container transform
+**Sources can combine.** Examples:
+- "Launch video for my project + our blog post" = codebase + URL
+- "News video about X with our branding" = article + local logo
+- "Explainer using these screenshots" = user images + generated VO
 
-## Suggested Component Architecture
+---
 
-Consider these reusable patterns:
-- KineticText: text, delay, style props - handles word-splitting and stagger
-- SmartCard: container with Spring Pop entry and glassmorphism styles
-- AnimatedCounter: from, to, duration props - number ticking
-- ProgressBar/ChartElement: percentage, color props - growth animation from 0
+## Phase 1: Discovery & Analysis
 
-**Motion Blur (optional):** Can simulate by stretching element in direction of movement on fast transitions.
-`;
-var SVG_ANIMATION_GUIDELINES = `# SVG Line Animation (Write-On Effect)
+Run the relevant discovery based on detected source type.
 
-**Core Concept:** "Invisible Ink Rule" - lines draw in (don't fade in), as if hand-drawn in real-time.
+### 1.1 Codebase Analysis (if local project)
 
-**Animation approach:**
-- Setting \`pathLength="1"\` on SVG path elements normalizes length
-- Animating \`strokeDashoffset\` from 1 (hidden) to 0 (drawn) creates write-on effect
-- \`strokeDasharray: 1\` with interpolate \`[1, 0]\` over 20-30 frames works well
-- \`stroke-linecap="round"\` creates friendly hand-drawn look
+\`\`\`bash
+# Find branding assets
+find . -type f \\( -name "logo*" -o -name "favicon*" -o -name "brand*" \\) 2>/dev/null | head -20
 
-**Draw & vanish sequence:**
-- Draw in: 20 frames (offset 1\u21920)
-- Hold: 10 frames
-- Draw out: fade opacity or continue offset
+# Find color configuration
+find . -type f \\( -name "tailwind.config.*" -o -name "theme.*" -o -name "colors.*" \\) 2>/dev/null
 
-**Reusable component pattern:**
-- Props: path data (d), color, width, delay, type (underline/spark/circle/arrow)
-- Pre-defined path dictionaries work better than generating random coordinates
-- Positioning with top/left/scale/rotation props for text accents
-`;
-var ASSET_USAGE_GUIDELINES = `# Asset Usage & Optimization
+# Find impressive UI components (prioritize pages/containers over atoms)
+find . -path "*/components/*" -name "*.tsx" 2>/dev/null | head -30
+\`\`\`
 
-**For project-specific videos:** Study the project first - extract logos, colors, fonts, actual UI components. Recreate components pixel-perfect in Remotion (match exact colors, shadows, border-radius, fonts). Use project's actual branding and design system for authentic look.
+**Extract:**
+- [ ] Logo path (verify exists)
+- [ ] Primary/accent colors from config
+- [ ] 2-4 "hero" components worth showcasing
 
-**CLI provides flexible asset search** - images and videos can be used creatively throughout compositions.
+### 1.2 Website Analysis (if URL provided)
 
-**Video assets (from CLI video search):**
-- Full-screen backgrounds (with overlays/text)
-- Embedded in UI cards or windows alongside text
-- Picture-in-picture style elements
-- Background layers with reduced opacity
-- Transitional footage between scenes
+\`\`\`bash
+# Scrape website content for analysis
+${cmd2} scrape "https://example.com" --format json
 
-**Image assets (from CLI image search):**
-- Scene backgrounds (static or with animation)
-- Embedded elements within compositions
-- UI component content (cards, panels)
-- Layered for depth and parallax effects
+# Save content to file for reference
+${cmd2} scrape "https://example.com" -o ./content/homepage.md
 
-**Dynamic backgrounds (Three.js/WebGL):**
-- Three.js/React Three Fiber for performance-optimized animated backgrounds
-- Particle systems, procedural gradients, geometric patterns
-- SVG animations for abstract shapes and patterns
-- WebGL shaders for dynamic effects
-- Combines well with static assets for depth
+# Scrape multiple pages
+${cmd2} scrape "https://example.com/features" -o ./content/features.md
+${cmd2} scrape "https://example.com/pricing" -o ./content/pricing.md
+\`\`\`
 
-**Best approach:** Mix CLI assets (images/videos) with generated elements (Three.js, SVG) for rich, performant compositions.
-`;
+**Extract from scraped content:**
+- [ ] Main value proposition / headline
+- [ ] Key features and benefits
+- [ ] Brand name and tagline
+- [ ] Color mentions (if in content) or use stock visuals
 
-// src/commands/skill/generate-video-skill.ts
-function generateVideoSkillContent(context) {
-  const { name, cmd: cmd2 } = context;
-  return `---
-name: ${name}-video
-description: Use when user asks to create videos (product demos, explainers, social content, promos). Handles video asset generation, Remotion implementation, and thumbnail embedding.
----
+### 1.3 Content Analysis (if document/article)
+
+For news articles, blog posts, press releases, changelogs:
+
+\`\`\`bash
+# Scrape and parse article
+${cmd2} scrape "https://example.com/article" -o ./content.md
+
+# Or read local document
+cat ./CHANGELOG.md | head -100
+\`\`\`
+
+**Extract:**
+- [ ] Main headline / title
+- [ ] 3-5 key points for scenes
+- [ ] Quotes or stats to highlight
+- [ ] Related images (if embedded)
+
+### 1.4 User-Provided Content
+
+If user provides text, script, or topic directly:
 
-# ${name} Video Creation CLI
+**Raw script provided:**
+- Use as-is for voiceover
+- Plan visuals based on content
 
-Generate video assets (voiceover, music, images, stock videos) and render with Remotion.
+**Topic/concept provided:**
+- Research topic using your web search capabilities
+- Or scrape relevant URLs: \`${cmd2} scrape "https://relevant-article.com"\`
+
+**Images/videos provided:**
+- Verify files exist
+- Note dimensions and quality
+- Plan scenes around provided assets
+
+**Extract:**
+- [ ] Key messages (3-5 per video)
+- [ ] Visual concepts for each message
+- [ ] Any specific assets user wants included
+
+### 1.5 Content Brief & User Clarification
+
+**Goal:** Align on video purpose before scripting.
+
+**Use AskUserQuestion tool:** If your AI environment provides an \`AskUserQuestion\` tool (Claude Code, Agent SDK, etc.), use it to gather user preferences about duration, tone, focus, and CTA before proceeding. This provides a better UX than plain text questions.
+
+**When to ask vs. proceed:**
+- **Vague request** ("make a video for my project") \u2192 ASK clarifying questions
+- **Partial details** ("30-second TikTok for my app") \u2192 ASK remaining questions
+- **Detailed brief** (duration, tone, CTA specified) \u2192 PROCEED directly
+- **User says "just do it" or "use defaults"** \u2192 USE defaults below
+
+**Reasonable defaults (if user opts out of questions):**
+- Duration: 30-45 seconds
+- Tone: Professional
+- Focus: Balanced (show problem + solution)
+- CTA: "Try it free" or "Learn more"
+- Structure: Hook \u2192 Main Point \u2192 CTA
+
+**Validation Gate:** Do NOT proceed to asset generation until you have:
+- [ ] Clear video type identified
+- [ ] Source material gathered (screenshots, content, or stock queries planned)
+- [ ] Duration and tone (confirmed OR defaulted)
 
 ---
 
-## Prerequisites
+## Phase 2: Script & Scene Planning
 
-**Authenticate:**
-\`\`\`bash
-${cmd2} login
+### 2.1 Narrative Structure
+
+Follow this arc for maximum engagement:
+
+| Scene | Duration | Purpose | Example |
+|-------|----------|---------|---------|
+| **Hook** | 3-5s | Stop the scroll, create curiosity | "What if your dashboard updated itself?" |
+| **Problem** | 5-8s | Relatable pain point | "Tired of manual data entry?" |
+| **Solution** | 10-20s | Show the product/concept | Demo of key features |
+| **Proof** | 5-10s | Social proof, stats, benefits | "10x faster than competitors" |
+| **CTA** | 3-5s | Clear next step | "Try free at example.com" |
+
+**For Short Videos (15-30s):** Hook \u2192 Solution \u2192 CTA (skip Problem/Proof)
+
+### 2.2 Scene Definition
+
+For each scene, define:
+
+\`\`\`json
+{
+  "name": "SceneName",
+  "script": "Voiceover text (conversational, 2-3 sentences max)",
+  "imageQuery": "Stock search query if needed",
+  "videoQuery": "Stock video search query if preferred over image",
+  "componentPath": "src/components/Feature.tsx (Project Mode only, VERIFIED path)"
+}
 \`\`\`
 
+**Script Writing Tips:**
+- Keep sentences SHORT (8-12 words ideal for voiceover)
+- Use active voice: "Build faster" not "Faster building is possible"
+- Include natural pauses with periods, not commas
+- Match script length to desired scene duration (~150 words/minute)
+
 ---
 
-## Video Creation Workflow
+## Phase 3: Asset Generation
 
-### 1. Generate Assets
+### 3.1 Generate Voiceovers & Music
 
-Generate voiceover, music, and visual assets:
+**CRITICAL:** Run this command with your scenes JSON. Music is generated LAST to match total duration.
 
 \`\`\`bash
-cat <<SCENES | ${cmd2} video create --output ./public
+cat <<'SCENES_JSON' | ${cmd2} video create --output ./public
 {
   "scenes": [
-    { 
-      "name": "Hook", 
-      "script": "Watch how we transformed this complex workflow into a single click.",
-      "imageQuery": "modern dashboard interface dark theme"
+    {
+      "name": "Hook",
+      "script": "Your hook script here.",
+      "imageQuery": "abstract tech gradient particles"
     },
-    { 
-      "name": "Demo", 
-      "script": "Our AI analyzes your data in real-time, surfacing insights that matter."
+    {
+      "name": "Solution",
+      "script": "Your solution script here.",
+      "videoQuery": "modern dashboard interface animation"
+    },
+    {
+      "name": "CTA",
+      "script": "Your call to action here.",
+      "imageQuery": "gradient background call to action"
     }
   ],
-  "voice": "Kore"
+  "voiceId": "21m00Tcm4TlvDq8ikWAM",
+  "voiceSettings": {
+    "speed": 1.0,
+    "stability": 0.5,
+    "similarity": 0.75,
+    "style": 0.3
+  },
+  "musicPrompt": "upbeat corporate, modern synth, positive energy"
 }
-SCENES
+SCENES_JSON
 \`\`\`
 
-**Output:**
-- \`public/audio/*.wav\` - scene voiceovers
-- \`public/audio/music.mp3\` - background music
-- \`public/video-manifest.json\` - timing, metadata, timeline
+**Voice ID:** Use ElevenLabs voice IDs. Get available voices with \`${cmd2} tts voices\`.
+Common voice IDs:
+- \`21m00Tcm4TlvDq8ikWAM\` - Rachel (default, calm female)
+- \`EXAVITQu4vr4xnSDxMaL\` - Bella (young female)
+- \`ErXwobaYiN019PkySvjV\` - Antoni (male)
 
-### 2. Initialize Remotion (MANDATORY)
+**Voice Settings Tuning:**
+| Setting | Low (0.2-0.4) | Medium (0.5) | High (0.6-0.8) |
+|---------|---------------|--------------|----------------|
+| stability | More expressive/variable | Balanced | Consistent/monotone |
+| similarity | Creative interpretation | Balanced | Strict voice match |
+| style | Subtle emotion | Moderate | Dramatic/animated |
+| speed | Slower, dramatic | Normal | Faster, energetic |
 
-Scaffold the template and copy assets:
+### 3.2 Search Additional Stock Media (Optional)
+
+If scenes need more visuals:
 
 \`\`\`bash
-cd .. && ${cmd2} video init my-video
-cd my-video
-# Assets are now in public/ directory
+# Search stock images
+${cmd2} image search "modern SaaS dashboard dark theme" --count 5
+
+# Search stock videos
+${cmd2} video search "tech particles animation blue" --license free
 \`\`\`
 
-### 3. Render Video
+### 3.3 Verify Generated Assets
 
-**IMPORTANT:** Always version output files to avoid overwriting. Check existing files and increment version:
-- First render: \`out/video-v1.mp4\`
-- Re-render: \`out/video-v2.mp4\`, \`out/video-v3.mp4\`, etc.
+After CLI completes, verify all files exist:
 
-**For landscape videos (16:9):**
 \`\`\`bash
-pnpm exec remotion render FullVideo out/video-v1.mp4
+ls -la ./public/audio/
+ls -la ./public/images/
+ls -la ./public/videos/
+cat ./public/video-manifest.json
 \`\`\`
 
-**For vertical videos (9:16) with captions:**
+**Validation Gate:** Ensure:
+- [ ] Each scene has an audio file (\`.wav\` or \`.mp3\`)
+- [ ] Music file exists (\`audio/music.mp3\`)
+- [ ] video-manifest.json is valid JSON
+- [ ] Total duration looks reasonable for content
+
+---
+
+## Phase 4: Manifest Enrichment
+
+After CLI generates base manifest, enhance it with metadata based on your source type.
+
+**Add these fields as relevant:**
+
+\`\`\`json
+{
+  "source": "codebase|website|article|topic",
+  "sourceUrl": "https://... (if external)",
+
+  "scenes": [
+    {
+      "componentPath": "src/components/X.tsx",
+      "screenshotPath": "screenshots/home.png",
+      "textOverlay": "Key message here"
+    }
+  ],
+
+  "theme": {
+    "primary": "#3b82f6",
+    "accent": "#10b981"
+  },
+
+  "branding": {
+    "logoPath": "public/logo.svg",
+    "companyName": "Name"
+  },
+
+  "attribution": {
+    "source": "SourceName",
+    "date": "2024-01-15"
+  }
+}
+\`\`\`
+
+**Key rules:**
+- Only add \`componentPath\` for VERIFIED files
+- Only add \`screenshotPath\` if you captured screenshots
+- Only add \`attribution\` for news/article sources
+- \`theme\` and \`branding\` only if extracted from actual source
+
+---
+
+## Output Checklist
+
+Before completing Phase 1, verify:
+
+**Required for ALL videos:**
+- [ ] \`./public/audio/\` contains voiceover for each scene
+- [ ] \`./public/audio/music.mp3\` exists (or user opted out)
+- [ ] \`./public/video-manifest.json\` is valid JSON
+- [ ] Each scene has visual source (image, video, screenshot, or componentPath)
+
+**If using local codebase:**
+- [ ] All \`componentPath\` references VERIFIED to exist
+- [ ] Theme colors extracted from actual config
+- [ ] Logo path verified
+
+**If using website URL:**
+- [ ] Screenshots captured for key pages
+- [ ] Colors/branding extracted or noted
+
+**If news/content video:**
+- [ ] Source attribution included
+- [ ] Key points extracted for scenes
+
+**Success Message:**
+\`\`\`
+\u2705 Phase 1 Complete: Video assets assembled
+   - Video type: [project/website/news/explainer]
+   - Scenes: X
+   - Total duration: ~Xs
+   - Audio files: X
+   - Visuals: X images, X videos, X screenshots
+   - Components to adapt: X (if any)
+
+Ready for Phase 2: Remotion implementation
+\`\`\`
+
+---
+
+## Handoff to Phase 2: Remotion Setup
+
+After Phase 1 is complete, prepare the Remotion project:
+
+### Step 1: Initialize Remotion Project
+
 \`\`\`bash
-pnpm exec remotion render CaptionedVideo out/tiktok-v1.mp4 \\
-  --props='{"timeline":'$(cat public/video-manifest.json | jq -c .timeline)',"showCaptions":true}'
+# Create Remotion project in current directory
+${cmd2} video init my-video
+
+# For TikTok/Reels format (9:16)
+${cmd2} video init my-video --type tiktok
 \`\`\`
 
-### 4. Generate & Inject Thumbnail
+This creates \`./my-video/\` with the Remotion template.
+
+### Step 2: Copy Assets to Remotion Project
 
-${THUMBNAIL_RULES}
+\`\`\`bash
+# Copy all generated assets to Remotion public folder
+cp -r ./public/audio ./my-video/public/
+cp -r ./public/images ./my-video/public/
+cp -r ./public/videos ./my-video/public/
+cp ./public/video-manifest.json ./my-video/public/
+\`\`\`
+
+### Step 3: Verify Transfer
 
 \`\`\`bash
-${cmd2} video thumbnail out/video.mp4 --image out/thumb.png
+# Confirm all assets are in place
+ls -la ./my-video/public/
+cat ./my-video/public/video-manifest.json | jq '.scenes | length'
+\`\`\`
+
+**Expected structure in Remotion project:**
+\`\`\`
+my-video/
+\u251C\u2500\u2500 public/
+\u2502   \u251C\u2500\u2500 audio/
+\u2502   \u2502   \u251C\u2500\u2500 hook.wav
+\u2502   \u2502   \u251C\u2500\u2500 solution.wav
+\u2502   \u2502   \u251C\u2500\u2500 cta.wav
+\u2502   \u2502   \u2514\u2500\u2500 music.mp3
+\u2502   \u251C\u2500\u2500 images/
+\u2502   \u2502   \u2514\u2500\u2500 *.jpg, *.png
+\u2502   \u251C\u2500\u2500 videos/
+\u2502   \u2502   \u2514\u2500\u2500 *.mp4
+\u2502   \u2514\u2500\u2500 video-manifest.json
+\u251C\u2500\u2500 src/
+\u2502   \u2514\u2500\u2500 ... (Remotion components)
+\u2514\u2500\u2500 package.json
+\`\`\`
+
+### Step 4: Hand Off to Phase 2
+
+\`\`\`
+\u{1F4E6} Assets transferred to Remotion project: ./my-video/
+   
+Next steps (Phase 2 - Remotion Implementation):
+   cd my-video
+   pnpm dev              # Preview in Remotion Studio
+   # Then implement scenes using video-manifest.json
 \`\`\`
 
+**Note:** Phase 2 (Remotion implementation) is handled by a separate skill.
+
 ---
 
-${MOTION_DESIGN_GUIDELINES}
+## Examples
+
+### Example 1: News Video
+**User says:** "Make a video about the latest AI news"
+
+**Actions:**
+1. Ask: "Any specific article or topic? What duration (30s or 60s)?"
+2. User provides article URL or topic
+3. Fetch/research content, extract 3-4 key points
+4. Write script with Hook \u2192 Key Points \u2192 Takeaway
+5. Run CLI with stock video queries for each point
+6. Generate manifest with source attribution
+
+**Result:** 45-second news video with stock footage, voiceover, and music
 
 ---
 
-${SVG_ANIMATION_GUIDELINES}
+### Example 2: Product Launch (with codebase)
+**User says:** "Create a promo video for my app"
+
+**Actions:**
+1. Scan project: find logo, colors, impressive components
+2. Ask: "Which features to highlight? Duration preference?"
+3. Write script: Hook \u2192 Problem \u2192 Feature Demo \u2192 CTA
+4. Run CLI with scenes, use componentPath for demo scenes
+5. Enrich manifest with theme colors and branding
+
+**Result:** 60-second promo with branded visuals and component references
 
 ---
 
-${ASSET_USAGE_GUIDELINES}
+### Example 3: Website Promo (URL only)
+**User says:** "Make a video for https://example.com"
+
+**Actions:**
+1. Scrape website content: \`${cmd2} scrape "https://example.com" -o content.md\`
+2. Extract key messages, features, and value props from content
+3. Write script based on scraped content
+4. Run CLI with stock media queries matching the product/service
+5. Use text overlays for key messages
+
+**Result:** 30-second website promo with stock visuals and key messaging from site
+
+---
+
+### Example 4: Explainer (topic only)
+**User says:** "Explain how blockchain works in 30 seconds"
+
+**Actions:**
+1. Research topic briefly if needed
+2. Write simple script: Concept \u2192 How it works \u2192 Why it matters
+3. Run CLI with visual metaphor queries ("digital ledger", "chain links")
+4. Use 100% stock media
+
+**Result:** 30-second explainer with abstract visualizations
+
+---
+
+## Error Recovery
+
+Use standalone CLI commands if \`video create\` fails partially.
+
+### If TTS Fails for One Scene
+
+\`\`\`bash
+# Retry single scene with standalone tts command
+${cmd2} tts "Your script text here" --voice Kore --output ./public/audio/scene-name.wav
+\`\`\`
+
+If still fails: try different voice, or skip scene.
+
+### If Music Generation Fails
+
+\`\`\`bash
+# Retry music separately
+${cmd2} music generate "upbeat corporate synth" --duration 30 --output ./public/audio/music.mp3
+\`\`\`
+
+If still fails: continue without music, notify user.
+
+### If Stock Search Returns Nothing
+
+\`\`\`bash
+# Try standalone image search with simpler query
+${cmd2} image search "dashboard" --count 10
+
+# Or try video search
+${cmd2} video search "tech animation" --license free
+\`\`\`
+
+Fallback: use solid color background with text overlay.
+
+### If Component Not Found
+1. DO NOT guess or hallucinate path
+2. Fall back to stock media for that scene
+3. Add to manifest: \`"componentPath": null, "fallbackReason": "not found"\`
 
 ---
+
+## Troubleshooting
+
+### CLI Command Fails
+
+**Error:** \`command not found: ${cmd2}\`
+**Fix:** Install CLI globally: \`npm install -g @anthropic/${name}\` or use npx: \`npx ${cmd2} video create\`
+
+**Error:** \`Authentication required\`
+**Fix:** Run \`${cmd2} login\` to authenticate with API key
+
+### Audio Generation Issues
+
+**Error:** \`Voice not found\`
+**Fix:** Use one of: Kore, Puck, Rachel, alloy (case-sensitive)
+
+**Error:** \`Music duration too short\`
+**Cause:** ElevenLabs requires minimum 3 seconds
+**Fix:** Ensure total script duration is at least 5 seconds
+
+### Stock Search Returns Nothing
+
+**Cause:** Query too specific or API limit reached
+**Fix:**
+1. Simplify query: "dashboard" instead of "modern SaaS dashboard with dark theme"
+2. Try alternative terms: "interface" instead of "UI"
+3. Check API quota: \`${cmd2} account\`
+
+### Component Path Not Found
+
+**Cause:** Guessed path without verification
+**Fix:**
+1. ALWAYS run \`ls\` or \`find\` before referencing
+2. Use stock media as fallback
+3. Add to manifest: \`"componentPath": null, "fallback": "stock"\`
+
+### Manifest JSON Invalid
+
+**Cause:** Syntax error in manual edits
+**Fix:** Validate JSON before saving: \`cat video-manifest.json | jq .\`
+
+---
+
+## Quick Reference
+
+### Minimum Viable Command
+\`\`\`bash
+cat <<'EOF' | ${cmd2} video create --output ./public
+{"scenes":[{"name":"Main","script":"Your script here."}],"musicPrompt":"ambient background"}
+EOF
+\`\`\`
+
+### Full Command with All Options
+\`\`\`bash
+cat <<'EOF' | ${cmd2} video create --output ./public
+{
+  "scenes": [
+    {"name": "Hook", "script": "...", "imageQuery": "..."},
+    {"name": "Demo", "script": "...", "videoQuery": "..."},
+    {"name": "CTA", "script": "...", "imageQuery": "..."}
+  ],
+  "voiceId": "21m00Tcm4TlvDq8ikWAM",
+  "voiceSettings": {"speed": 1.0, "stability": 0.5, "similarity": 0.75, "style": 0.3},
+  "musicPrompt": "genre, mood, instruments"
+}
+EOF
+\`\`\`
+
+### Voice Settings Presets
+| Preset | speed | stability | similarity | style | Best For |
+|--------|-------|-----------|------------|-------|----------|
+| Professional | 1.0 | 0.6 | 0.8 | 0.2 | Corporate, B2B |
+| Energetic | 1.1 | 0.4 | 0.7 | 0.5 | Startups, Apps |
+| Calm | 0.9 | 0.7 | 0.8 | 0.2 | Tutorial, Explainer |
+| Dramatic | 0.85 | 0.3 | 0.6 | 0.7 | Announcements |
+
+---
+
+## References
+
+For advanced techniques, consult these files after Phase 1:
+- \`rules/video/motion-design.md\` - Animation principles
+- \`rules/video/thumbnails.md\` - CTR optimization
+- \`rules/video/svg-animations.md\` - Write-on effects
+- \`rules/video/asset-usage.md\` - Creative asset usage
 `;
 }
 
@@ -3715,7 +4161,7 @@ ${ASSET_USAGE_GUIDELINES}
 function generatePresentationSkillContent(context) {
   const { name, cmd: cmd2 } = context;
   return `---
-name: ${name}-presentation
+name: ${cmd2}-presentation
 description: Use when user asks to create presentations (slides, decks, pitch decks). Generates AI-powered presentations with structured content and professional design.
 ---
 
@@ -3753,8 +4199,12 @@ ${cmd2} create --file product-brief.md
 
 ### From URL
 
+Supports websites, YouTube videos, and Twitter/X posts:
+
 \`\`\`bash
 ${cmd2} create --url https://company.com/product
+${cmd2} create --url https://youtube.com/watch?v=abc123
+${cmd2} create --url https://x.com/user/status/123456
 \`\`\`
 
 ### From Piped Content
@@ -4745,7 +5195,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 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 ID (ElevenLabs: Rachel, Josh, Adam; OpenAI: alloy, nova; Gemini: Kore, Puck)").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 {
@@ -4771,6 +5221,7 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       }
     }
     const voice = scenesInput?.voice || options.voice;
+    const voiceId = scenesInput?.voiceId;
     const musicPrompt = scenesInput?.musicPrompt || options.musicPrompt || "uplifting background music, positive energy";
     const audioDir = join2(options.output, "audio");
     const imagesDir = join2(options.output, "images");
@@ -4799,6 +5250,8 @@ var createCommand3 = new Command19("create").description("Create video assets (v
         texts: ttsRequests,
         options: {
           voice,
+          voiceId,
+          // ElevenLabs voice ID takes priority on backend
           voiceSettings: scenesInput.voiceSettings
         }
       });
@@ -4956,7 +5409,7 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       timeline.elements.length > 0 ? Math.max(...timeline.elements.map((e) => e.endMs)) : 0
     );
     const actualVideoDuration = videoEndTimeMs / 1e3;
-    const musicDuration = Math.min(30, Math.ceil(actualVideoDuration));
+    const musicDuration = Math.min(300, Math.ceil(actualVideoDuration));
     console.log(`[Music Generation] Requesting music:`, {
       prompt: musicPrompt,
       requestedDuration: musicDuration,
@@ -4965,71 +5418,107 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       timelineDurationMs: videoEndTimeMs
     });
     let musicInfo;
-    if (musicDuration < 3) {
-      if (format === "human") {
-        spinner?.stop();
-        warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
-        warn(`Skipping music generation...`);
-        spinner?.start();
+    let thumbnailPath;
+    if (spinner) spinner.text = "Generating music and thumbnail...";
+    const firstScene = scenes[0];
+    const thumbnailPrompt = `YouTube thumbnail, bold text overlay, high contrast, vibrant colors, 16:9 aspect ratio: ${firstScene?.text?.slice(0, 100) || "video thumbnail"}`;
+    const parallelTasks = [];
+    const musicTask = (async () => {
+      if (musicDuration < 3) {
+        if (format === "human") {
+          spinner?.stop();
+          warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
+          spinner?.start();
+        }
+        return null;
       }
-    } else {
       try {
-        if (spinner) spinner.text = "Generating music...";
-        let musicResult = await generateMusic({
+        let musicResult2 = await generateMusic({
           prompt: musicPrompt,
           duration: musicDuration
         });
-        if (musicResult.status !== "completed" && musicResult.status !== "failed") {
-          if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
-          musicResult = await pollForCompletion(
-            () => checkMusicStatus(musicResult.requestId),
+        if (musicResult2.status !== "completed" && musicResult2.status !== "failed") {
+          musicResult2 = await pollForCompletion(
+            () => checkMusicStatus(musicResult2.requestId),
             60,
             2e3
           );
         }
-        if (musicResult.status === "failed") {
-          throw new Error(musicResult.error || "Unknown error");
+        if (musicResult2.status === "failed") {
+          throw new Error(musicResult2.error || "Unknown error");
         }
         const musicPath = join2(audioDir, "music.mp3");
-        if (musicResult.audioUrl) {
-          await downloadFile3(musicResult.audioUrl, musicPath);
+        if (musicResult2.audioUrl) {
+          await downloadFile3(musicResult2.audioUrl, musicPath);
         }
-        totalCost += musicResult.cost || 0;
-        const actualMusicDuration = musicResult.duration || musicDuration;
-        console.log(`[Music Generation] Received music:`, {
-          requestedDuration: musicDuration,
-          returnedDuration: musicResult.duration,
-          actualUsedDuration: actualMusicDuration,
-          totalAudioDuration: totalDuration,
-          difference: actualMusicDuration - totalDuration,
-          audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
-        });
-        musicInfo = {
+        return {
           path: "audio/music.mp3",
-          duration: actualMusicDuration,
+          duration: musicResult2.duration || musicDuration,
           prompt: musicPrompt,
-          cost: musicResult.cost || 0
+          cost: musicResult2.cost || 0
         };
+      } catch (err) {
         if (format === "human") {
           spinner?.stop();
-          success(`Music: ${musicPath} (${musicInfo.duration}s)`);
-          if (actualMusicDuration < actualVideoDuration) {
-            warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
-            warn(`Consider using audio looping or extending music in Remotion.`);
+          warn(`Music generation failed: ${err.message}`);
+          spinner?.start();
+        }
+        return null;
+      }
+    })();
+    parallelTasks.push(musicTask);
+    const thumbnailTask = (async () => {
+      try {
+        const result = await generateImage({
+          prompt: thumbnailPrompt,
+          options: {
+            width: 1280,
+            height: 720
           }
+        });
+        if (result.success && result.data.url) {
+          const thumbPath = join2(options.output, "thumbnail.jpg");
+          await downloadFile3(result.data.url, thumbPath);
+          totalCost += result.data.cost || 0;
+          return thumbPath;
+        }
+        return null;
+      } catch (err) {
+        if (format === "human") {
+          spinner?.stop();
+          warn(`Thumbnail generation failed: ${err.message}`);
           spinner?.start();
         }
-      } catch (musicError) {
+        return null;
+      }
+    })();
+    parallelTasks.push(thumbnailTask);
+    const [musicResult, thumbResult] = await Promise.all(parallelTasks);
+    if (musicResult) {
+      musicInfo = musicResult;
+      totalCost += musicResult.cost || 0;
+      if (format === "human") {
+        spinner?.stop();
+        success(`Music: ${join2(audioDir, "music.mp3")} (${musicResult.duration}s)`);
+        if (musicResult.duration < actualVideoDuration) {
+          warn(`Music duration (${musicResult.duration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
+        }
+        spinner?.start();
+      }
+    }
+    if (thumbResult) {
+      thumbnailPath = thumbResult;
+      if (format === "human") {
         spinner?.stop();
-        warn(`Music generation failed: ${musicError.message}`);
-        warn(`Continuing without background music...`);
-        if (spinner && format === "human") spinner?.start();
+        success(`Thumbnail: ${thumbnailPath}`);
+        spinner?.start();
       }
     }
     if (spinner) spinner.text = "Writing manifest...";
     const totalDurationInFrames = Math.round(actualVideoDuration * DEFAULT_FPS);
     const manifest = {
       music: musicInfo,
+      thumbnail: thumbnailPath ? "thumbnail.jpg" : void 0,
       images: allImages,
       videos: allVideos,
       scenes,
@@ -5117,7 +5606,7 @@ var searchCommand2 = new Command19("search").description("Search for stock video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--type <type>", "Video type: landscape (16:9) or tiktok (9:16)", "landscape").option("--no-install", "Skip pnpm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
+var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--type <type>", "Video type: landscape (16:9) or tiktok (9:16)", "landscape").option("--no-install", "Skip npm 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 {
@@ -5157,7 +5646,7 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     if (options.install) {
       if (spinner) spinner.text = "Installing dependencies...";
       await new Promise((resolvePromise, reject) => {
-        const child = spawn("pnpm", ["install"], {
+        const child = spawn("npm", ["install"], {
           cwd: targetDir,
           stdio: "pipe",
           shell: true
@@ -5166,7 +5655,7 @@ var initCommand = new Command19("init").description("Create a new Remotion video
           if (code === 0) {
             resolvePromise();
           } else {
-            reject(new Error(`pnpm install failed with code ${code}`));
+            reject(new Error(`npm install failed with code ${code}`));
           }
         });
         child.on("error", reject);
@@ -5224,14 +5713,14 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     info("Next steps:");
     info(`  cd ${name}`);
     if (!options.install) {
-      info("  pnpm install");
+      info("  npm install");
     }
-    info("  pnpm dev             # Preview in Remotion Studio");
+    info("  npm run dev          # Preview in Remotion Studio");
     info("  cc video create ...  # Generate assets to public/");
     if (options.type === "tiktok") {
-      info("  pnpm exec remotion render TikTokVideo  # Render TikTok video");
+      info("  npx remotion render TikTokVideo out/tiktok.mp4 --props='{...}'  # Render TikTok video");
     } else {
-      info("  pnpm exec remotion render FullVideo    # Render final video");
+      info("  npx remotion render YouTubeVideo out/youtube.mp4 --props='{...}'  # Render YouTube video");
     }
   } catch (err) {
     spinner?.stop();
@@ -5281,7 +5770,6 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
       if (options.composition) {
         if (spinner) spinner.text = `Extracting frame ${frameNum} from ${options.composition}...`;
         const args = [
-          "exec",
           "remotion",
           "still",
           options.composition,
@@ -5289,7 +5777,7 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
           `--frame=${frameNum}`
         ];
         try {
-          execSync(`pnpm ${args.join(" ")}`, {
+          execSync(`npx ${args.join(" ")}`, {
             stdio: "pipe",
             cwd: process.cwd()
           });
@@ -5378,9 +5866,65 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
 });
 var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
+// src/commands/scrape.ts
+import { Command as Command20 } from "commander";
+import ora13 from "ora";
+import { writeFile as writeFile6 } from "fs/promises";
+var scrapeCommand = new Command20("scrape").description("Extract content from a URL").argument("<url>", "URL to scrape").option("-o, --output <path>", "Save content to file").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (url, options) => {
+  const format = options.format;
+  const spinner = format === "human" ? ora13("Scraping URL...").start() : null;
+  try {
+    const result = await scrapeUrl(url);
+    spinner?.stop();
+    if (!result.success) {
+      error(result.error || "Failed to scrape URL");
+      process.exit(EXIT_CODES.GENERAL_ERROR);
+    }
+    const data = result.data;
+    if (options.output) {
+      await writeFile6(options.output, data.content, "utf-8");
+      if (format === "human") {
+        success(`Content saved to: ${options.output}`);
+      }
+    }
+    if (format === "json") {
+      printJson(data);
+      return;
+    }
+    if (format === "quiet") {
+      console.log(data.content);
+      return;
+    }
+    if (data.title) {
+      console.log();
+      console.log(`Title: ${data.title}`);
+    }
+    if (data.metadata?.description) {
+      console.log(`Description: ${data.metadata.description}`);
+    }
+    console.log(`URL: ${data.url}`);
+    console.log(`Tokens: ~${data.metadata?.tokenUsage?.toLocaleString() || "unknown"}`);
+    if (data.warning) {
+      warn(data.warning);
+    }
+    if (!options.output) {
+      console.log();
+      console.log("--- Content ---");
+      console.log(data.content);
+    }
+    if (data.cost && data.cost > 0) {
+      info(`Cost: $${data.cost.toFixed(6)}`);
+    }
+  } catch (err) {
+    spinner?.stop();
+    error(err instanceof Error ? err.message : "Unknown error");
+    process.exit(EXIT_CODES.GENERAL_ERROR);
+  }
+});
+
 // src/index.ts
-var VERSION = "0.1.12";
-var program = new Command20();
+var VERSION = "0.1.14";
+var program = new Command21();
 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({
   outputError: (str, write) => {
@@ -5405,6 +5949,7 @@ program.addCommand(musicCommand);
 program.addCommand(mixAudioCommand);
 program.addCommand(imageCommand);
 program.addCommand(videoCommand);
+program.addCommand(scrapeCommand);
 var deriveCommand = buildDeriveCommand();
 if (deriveCommand.commands.length > 0) {
   program.addCommand(deriveCommand);