@conceptcraft/mindframes 0.1.6 → 0.1.7

package/dist/index.js

@@ -1025,7 +1025,7 @@ async function pollForCompletion(checkFn, maxAttempts = 60, intervalMs = 2e3) {
     if (result.status === "completed" || result.status === "failed") {
       return result;
     }
-    await new Promise((resolve5) => setTimeout(resolve5, intervalMs));
+    await new Promise((resolve6) => setTimeout(resolve6, intervalMs));
   }
   throw new ApiError("Operation timed out", 408, 1);
 }
@@ -1132,10 +1132,10 @@ function generateState() {
 async function findAvailablePort(start, end) {
   for (let port = start; port <= end; port++) {
     try {
-      await new Promise((resolve5, reject) => {
+      await new Promise((resolve6, reject) => {
         const server = http.createServer();
         server.listen(port, () => {
-          server.close(() => resolve5());
+          server.close(() => resolve6());
         });
         server.on("error", reject);
       });
@@ -1193,7 +1193,7 @@ async function exchangeCodeForTokens(tokenEndpoint, code, codeVerifier, redirect
   return response.json();
 }
 function startCallbackServer(port, expectedState) {
-  return new Promise((resolve5, reject) => {
+  return new Promise((resolve6, reject) => {
     let timeoutId;
     let settled = false;
     const cleanup = () => {
@@ -1279,7 +1279,7 @@ function startCallbackServer(port, expectedState) {
         </html>
       `);
       cleanup();
-      resolve5({ code, state });
+      resolve6({ code, state });
     });
     server.listen(port);
     process.once("SIGINT", onCancel);
@@ -2422,21 +2422,21 @@ Uploading ${options.file.length} file(s)...`));
   }
 });
 async function readStdin() {
-  return new Promise((resolve5) => {
+  return new Promise((resolve6) => {
     let data = "";
     process.stdin.setEncoding("utf8");
     if (process.stdin.isTTY) {
-      resolve5("");
+      resolve6("");
       return;
     }
     process.stdin.on("data", (chunk) => {
       data += chunk;
     });
     process.stdin.on("end", () => {
-      resolve5(data.trim());
+      resolve6(data.trim());
     });
     setTimeout(() => {
-      resolve5(data.trim());
+      resolve6(data.trim());
     }, 100);
   });
 }
@@ -3127,170 +3127,197 @@ var whoamiCommand = new Command13("whoami").description("Show current user and t
   }
 });
 
-// src/commands/skill.ts
+// src/commands/skill/index.ts
 init_output();
 import { Command as Command14 } from "commander";
 import chalk12 from "chalk";
-import { mkdirSync, writeFileSync, existsSync as existsSync2 } from "fs";
-import { join } from "path";
-import { homedir } from "os";
-import { execSync } from "child_process";
-function generateSkillContent(b) {
-  const cmd2 = b.name;
-  const pkg = b.packageName;
-  const url = b.apiUrl;
-  const name = b.displayName;
-  return `---
-name: ${cmd2}
-description: Create AI-powered presentations 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
+// src/commands/skill/sections/frontmatter.ts
+var frontmatter = {
+  title: "Frontmatter",
+  render: (ctx) => `---
+name: ${ctx.cmd}
+description: Use when user asks to create presentations (slides, decks, pitch decks) or videos (product demos, explainers, social content, promos). Also handles voiceover and music generation.
+---`
+};
 
-Create professional presentations and videos directly from your terminal.
+// src/commands/skill/sections/header.ts
+var header3 = {
+  title: "Header",
+  render: (ctx) => `# ${ctx.name} CLI
 
-## Prerequisites
+Create professional presentations directly from your terminal. The CLI generates AI-powered slides from any context you provide - text, files, URLs, or piped content.`
+};
+
+// src/commands/skill/sections/prerequisites.ts
+var prerequisites = {
+  title: "Prerequisites",
+  render: (ctx) => `## Prerequisites
 
 \`\`\`bash
-npm install -g ${pkg}
-${cmd2} login    # Authenticate (opens browser)
-${cmd2} whoami   # Verify setup
+npm install -g ${ctx.pkg}
+${ctx.cmd} login    # Authenticate (opens browser)
+${ctx.cmd} whoami   # Verify auth
 \`\`\`
 
-## Rules
+### Authentication
 
-Read these for detailed usage:
+If not authenticated, run \`${ctx.cmd} login\` - it opens browser for OAuth.
+If login fails or user declines, fall back to API key: \`${ctx.cmd} config init\``
+};
 
-- [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
+// src/commands/skill/sections/workflow.ts
+var workflow = {
+  title: "Core Workflow",
+  render: (ctx) => `## Core Workflow
 
-## Quick Reference
+1. **Gather context** - Read relevant files, code, or documentation
+2. **Create presentation** - Pass context to \`${ctx.cmd} create\`
+3. **Share URL** - Return the presentation link to the user`
+};
 
-### Presentations
+// src/commands/skill/sections/create-command.ts
+var createCommand2 = {
+  title: "Create Command",
+  render: (ctx) => `## Commands
 
-\`\`\`bash
-# Create from context
-cat README.md | ${cmd2} create "Project Overview"
+### Create Presentation
 
-# With files
-${cmd2} create "Product Demo" --file ./deck.pptx --file ./logo.png
+Context is **required**. Provide it via one of these methods:
 
-# With options
-${cmd2} create "API Docs" --slides 8 --tone educational --goal inform
-\`\`\`
+\`\`\`bash
+# Upload files (PDFs, PPTX, images, docs)
+${ctx.cmd} create "Product Overview" --file ./deck.pptx --file ./logo.png
 
-### Video Creation
+# Direct text context
+${ctx.cmd} create "Topic Title" --context "Key points, data, facts..."
 
-\`\`\`bash
-# Scaffold project
-${cmd2} video init my-video
+# From a text file
+${ctx.cmd} create "Topic Title" --context-file ./notes.md
 
-# Generate all assets (voiceover, music, images)
-${cmd2} video create --script "Your narration..." --output ./public
+# Pipe content (auto-detected)
+cat README.md | ${ctx.cmd} create "Project Overview"
 
-# Search for stock content
-${cmd2} image search -q "tropical beach" -n 5
-${cmd2} video search "tech workspace" -n 5
-\`\`\`
+# From URLs (scraped automatically)
+${ctx.cmd} create "Competitor Analysis" --sources https://example.com/report
 
-### Audio Generation
+# Combine multiple sources
+cat src/auth/*.ts | ${ctx.cmd} create "Auth System" \\
+  --file ./architecture.png \\
+  --context "Focus on security patterns"
+\`\`\``
+};
 
-\`\`\`bash
-# Text-to-speech
-${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
+// src/commands/skill/sections/create-options.ts
+var createOptions = {
+  title: "Create Options",
+  render: (_ctx) => `### Create Options
 
-# Music generation
-${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
+| Option | Description | Default |
+|--------|-------------|---------|
+| \`-n, --slides <count>\` | Number of slides (1-20) | 10 |
+| \`-m, --mode <mode>\` | Quality: \`instant\`, \`fast\`, \`balanced\`, \`best\` | balanced |
+| \`-t, --tone <tone>\` | Tone: \`professional\`, \`educational\`, \`creative\`, \`formal\`, \`casual\` | professional |
+| \`--amount <amount>\` | Density: \`minimal\`, \`concise\`, \`detailed\`, \`extensive\` | concise |
+| \`--audience <text>\` | Target audience | General Audience |
+| \`-g, --goal <type>\` | Purpose: \`inform\`, \`persuade\`, \`train\`, \`learn\`, \`entertain\`, \`report\` | - |
+| \`--custom-goal <text>\` | Custom goal description | - |
+| \`-f, --file <paths...>\` | Files to upload (PDF, PPTX, images, docs) | - |
+| \`-l, --language <lang>\` | Output language | en |
+| \`-b, --brand <id>\` | Branding ID to apply | - |
+| \`-o, --output <format>\` | Output: \`human\`, \`json\`, \`quiet\` | human |`
+};
 
-# Mix audio into video
-${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
-\`\`\`
+// src/commands/skill/sections/other-commands.ts
+var otherCommands = {
+  title: "Other Commands",
+  render: (ctx) => `### Other Commands
 
-## Assets
+\`\`\`bash
+# Check authentication
+${ctx.cmd} whoami
 
-Copy animation components from \`assets/animation-components.tsx\` for Remotion videos.
+# List presentations
+${ctx.cmd} list
+${ctx.cmd} list --format json
 
-## Asking Questions
+# Get presentation details
+${ctx.cmd} get <id-or-slug>
 
-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
----
+# Export to ZIP
+${ctx.cmd} export <id-or-slug> -o presentation.zip
 
-# Presentations
+# Import presentation
+${ctx.cmd} import ./presentation.zip
 
-## Workflow
+# Manage branding
+${ctx.cmd} branding list
+${ctx.cmd} branding extract https://company.com
 
-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
+# Install/manage this skill
+${ctx.cmd} skill install
+${ctx.cmd} skill show
+\`\`\``
+};
 
-## Create Command
+// src/commands/skill/sections/examples.ts
+var examples = {
+  title: "Examples",
+  render: (ctx) => `## Examples
 
-Context is **required**. Provide via:
+### Present a Codebase Feature
 
 \`\`\`bash
-# Upload files (PDFs, PPTX, images, docs)
-${cmd2} create "Product Overview" --file ./deck.pptx --file ./logo.png
-
-# Direct text context
-${cmd2} create "Topic Title" --context "Key points, data, facts..."
+# Read the relevant files and create presentation
+cat src/lib/auth.ts src/lib/session.ts | ${ctx.cmd} create "Authentication System" \\
+  --slides 8 --tone educational --audience "New developers" \\
+  --goal train
+\`\`\`
 
-# From a text file
-${cmd2} create "Topic Title" --context-file ./notes.md
+### Technical Documentation with Diagrams
 
-# Pipe content
-cat README.md | ${cmd2} create "Project Overview"
+\`\`\`bash
+${ctx.cmd} create "API Reference" \\
+  --file ./docs/api.md \\
+  --file ./diagrams/architecture.png \\
+  --mode best --amount detailed \\
+  --goal inform
+\`\`\`
 
-# From URLs
-${cmd2} create "Competitor Analysis" --sources https://example.com/report
+### Quick Project Overview
 
-# Combine sources
-cat src/auth/*.ts | ${cmd2} create "Auth System" \\
-  --file ./architecture.png \\
-  --context "Focus on security patterns"
+\`\`\`bash
+cat README.md package.json | ${ctx.cmd} create "Project Introduction" \\
+  -m instant --slides 5
 \`\`\`
 
-## Options
+### Sales Deck from Existing Presentation
 
-| Option | Description | Default |
-|--------|-------------|---------|
-| \`-n, --slides <count>\` | Number of slides (1-20) | 10 |
-| \`-m, --mode <mode>\` | Quality: \`instant\`, \`fast\`, \`balanced\`, \`best\` | balanced |
-| \`-t, --tone <tone>\` | Tone: \`professional\`, \`educational\`, \`creative\`, \`formal\`, \`casual\` | professional |
-| \`--amount <amount>\` | Density: \`minimal\`, \`concise\`, \`detailed\`, \`extensive\` | concise |
-| \`--audience <text>\` | Target audience | General Audience |
-| \`-g, --goal <type>\` | Purpose: \`inform\`, \`persuade\`, \`train\`, \`learn\`, \`entertain\`, \`report\` | - |
-| \`-f, --file <paths...>\` | Files to upload | - |
-| \`-l, --language <lang>\` | Output language | en |
-| \`-b, --brand <id>\` | Branding ID | - |
+\`\`\`bash
+${ctx.cmd} create "Product Demo" \\
+  --file ./existing-deck.pptx \\
+  --goal persuade \\
+  --audience "Enterprise buyers" \\
+  --tone professional
+\`\`\`
 
-## Other Commands
+### Research Presentation
 
 \`\`\`bash
-${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
-\`\`\`
+${ctx.cmd} create "Market Analysis" \\
+  --file ./research.pdf \\
+  --sources https://report.com/industry.pdf \\
+  --tone formal --audience "Executive team" \\
+  --goal report
+\`\`\``
+};
 
-## Output
+// src/commands/skill/sections/output.ts
+var output = {
+  title: "Output",
+  render: (ctx) => `## Output
 
+Successful creation returns:
 \`\`\`
 \u2713 Presentation created successfully
 
@@ -3298,1581 +3325,1424 @@ ${cmd2} branding extract https://...  # Extract branding from URL
   Slides: 8
   Generated in: 45s \xB7 12,500 tokens
 
-  Open: ${url}/en/view/presentations/auth-system-v1-abc123
+  Open: ${ctx.url}/en/view/presentations/auth-system-v1-abc123
 \`\`\`
-`;
-}
-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.
+For scripting, use JSON output:
+\`\`\`bash
+URL=$(${ctx.cmd} create "Demo" --context "..." -o json | jq -r '.viewUrl')
+\`\`\``
+};
 
----
+// src/commands/skill/sections/best-practices.ts
+var bestPractices = {
+  title: "Best Practices",
+  render: (_ctx) => `## Best Practices
+
+1. **Provide rich context** - More context = better slides. Include code, docs, data.
+2. **Use file uploads for binary content** - PDFs, images, PPTX files need \`--file\`.
+3. **Specify a goal** - Helps tailor the presentation structure and messaging.
+4. **Use appropriate mode** - \`instant\` for quick drafts, \`best\` for important presentations.
+5. **Specify audience** - Helps tailor complexity and terminology.
+6. **Combine sources** - Pipe multiple files for comprehensive presentations.`
+};
 
-## \u26D4 HARD RULES
+// src/commands/skill/sections/file-types.ts
+var fileTypes = {
+  title: "Supported File Types",
+  render: (_ctx) => `## Supported File Types
 
-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\`.
+- **Documents**: PDF, DOCX, XLSX, PPTX
+- **Images**: JPEG, PNG, GIF, WebP
+- **Text**: Markdown, TXT, CSV, JSON`
+};
 
----
+// src/commands/skill/sections/troubleshooting.ts
+var troubleshooting = {
+  title: "Troubleshooting",
+  render: (ctx) => `## Troubleshooting
 
-## \u{1F534} PHASE 0: READ REFERENCES FIRST
+\`\`\`bash
+# Check if authenticated
+${ctx.cmd} whoami
 
-**Before doing ANYTHING, read these files:**
+# Re-authenticate if needed
+${ctx.cmd} login
 
-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
+# Debug mode
+${ctx.cmd} create "Test" --context "test" --debug
+\`\`\``
+};
 
----
+// src/commands/skill/sections/video-creation.ts
+var videoCreation = {
+  title: "Video Creation",
+  render: (ctx) => `## Video Creation
 
-## \u{1F3AF} TWO VIDEO MODES
+### How to Create a Perfect Video
 
-### 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
+Videos must feel like premium tech launches (Stripe, Apple, Linear) - **Kinetic Composition**, not slideshows.
 
-### 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
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
 
-**DEFAULT TO MODE A if user mentions their app/project.**
+### Required Reading (The Motion Bible)
 
----
+| Rule | Why This Matters |
+|------|------------------|
+| [video-creation-guide.md](rules/video/video-creation-guide.md) | **The Motion Bible.** Camera rigs, 2.5D entrances, cursor physics, typography, backgrounds |
+| [failures.md](rules/video/failures.md) | **Avoid rejection.** 7 common mistakes that make videos look like slideshows |
+| [project-based.md](rules/video/project-based.md) | **Copy real components.** Eject actual UI code, strip logic, animate pixel-perfect |
+| [parameterization.md](rules/video/parameterization.md) | **Saves debugging.** Never hardcode frame numbers |
+| [layers.md](rules/video/layers.md) | **Prevents z-index bugs.** Background orbs \u2192 Vignette \u2192 CameraRig \u2192 Content |
+| [social-media.md](rules/video/social-media.md) | **Platform specs.** Resolution, aspect ratio, duration per platform |
 
-## Pre-Creation Questions
+**Required:** \`npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices\`
 
-Before creating a video, use \`AskUserQuestion\` tool (if available) to ask:
+### Workflow
 
-\`\`\`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
-    }
-  ]
-}
-\`\`\`
+#### Phase 1: Discovery
 
-If \`AskUserQuestion\` tool is not available, ask these questions in text format.
+Explore the project thoroughly - assets, components, branding, what makes this product/topic unique.
 
-## Audio-First Workflow
+#### Phase 2: Video Brief
 
-**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.
+Present a brief outline (scenes, duration, assets found) and get user approval before production.
 
-### Step 1: Write Script
+#### Phase 3: Production
 
-Write narration for the target duration. Structure: Hook \u2192 Key points \u2192 CTA
+1. **Read video-creation-guide.md + project-based.md + remotion-best-practices**
+2. **Generate audio** - \`${ctx.cmd} video create\` with scenes JSON
+3. **Scaffold OUTSIDE project** - \`cd .. && ${ctx.cmd} video init my-video\`
+4. **Copy assets** - Logo, fonts, colors from project into video project
+5. **Implement kinetically** - Camera rig, 2.5D entrances, staggered lists, transitions
+6. **Verify checklist** - Is it kinetic or static?
 
-Tip: ~2.5 words per second for natural pacing.
+#### Phase 4: Render
 
-### Step 2: Generate Assets (Audio-First)
+Auto-render when done: \`pnpm exec remotion render FullVideo\`
 
-\`\`\`bash
-${cmd2} video create \\
-  --script "Your narration script..." \\
-  --topic "topic for image search" \\
-  --voice Kore \\
-  --music-prompt "uplifting corporate" \\
-  --num-images 5 \\
-  --output ./public
-\`\`\`
+Only open Studio if user asks.
 
-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**
+### Kinetic Checklist
 
-### Step 3: Read Manifest Sections
+- [ ] CameraRig wraps entire scene with drift/zoom
+- [ ] Every UI element uses 2.5D rotation entrance (\`perspective + rotateX\`)
+- [ ] Cursor moves in Bezier curves with overshoot
+- [ ] Lists/grids stagger (never appear all at once)
+- [ ] Text uses masked reveal or keyword animation
+- [ ] Background has moving orbs + vignette + noise
+- [ ] Something is moving on EVERY frame
+- [ ] No static resting states longer than 30 frames
 
-The manifest includes a \`sections\` array with **exact timing from TTS character-level timestamps**:
+### Asset Generation
 
-\`\`\`json
+\`\`\`bash
+cat <<EOF | ${ctx.cmd} video create --output ./public
 {
-  "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"
-    }
+  "scenes": [
+    { "name": "Hook", "script": "..." },
+    { "name": "Demo", "script": "..." },
+    { "name": "CTA", "script": "..." }
   ],
-  "totalDurationInFrames": 450,
-  "fps": 30
+  "voice": "Kore",
+  "musicPrompt": "upbeat corporate"
 }
-\`\`\`
+EOF
+\`\`\``
+};
 
-**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
+// src/commands/skill/generate-content.ts
+var DEFAULT_SECTIONS = [
+  frontmatter,
+  header3,
+  prerequisites,
+  workflow,
+  createCommand2,
+  createOptions,
+  otherCommands,
+  examples,
+  output,
+  videoCreation,
+  bestPractices,
+  fileTypes,
+  troubleshooting
+];
+function createSkillContext(brand2) {
+  return {
+    cmd: brand2.name,
+    pkg: brand2.packageName,
+    url: brand2.apiUrl,
+    name: brand2.displayName
+  };
+}
+function generateSkillContent(brand2, sections = DEFAULT_SECTIONS) {
+  const ctx = createSkillContext(brand2);
+  return sections.map((section) => section.render(ctx)).join("\n\n");
+}
 
-### Step 4: Create Scenes (Match Section Timing)
+// src/commands/skill/installer.ts
+import { mkdirSync, writeFileSync, existsSync as existsSync2, rmSync } from "fs";
+import { join, resolve as resolve4, relative } from "path";
+import { homedir } from "os";
+
+// src/commands/skill/editors.ts
+var SUPPORTED_EDITORS = [
+  { name: "Claude Code", dir: ".claude" },
+  { name: "Cursor", dir: ".cursor" },
+  { name: "Codex", dir: ".codex" },
+  { name: "OpenCode", dir: ".opencode" },
+  { name: "Windsurf", dir: ".windsurf" },
+  { name: "Agent", dir: ".agent" }
+];
 
-**CRITICAL:** Use \`durationInFrames\` from each section. This ensures audio/video sync.
+// src/commands/skill/rules/video/content.ts
+var VIDEO_RULE_CONTENTS = [
+  {
+    filename: "video-creation-guide.md",
+    content: `# Video Creation Guide
 
-\`\`\`tsx
-// Read manifest sections and create matching scenes
-import manifest from '../../public/video-manifest.json';
+> **ALSO READ:**
+> - [project-based.md](project-based.md) - How to extract and animate real project components pixel-perfect
+> - If installed, check \`remotion-best-practices\` skill for Remotion-specific patterns
 
-// 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
-\`\`\`
+# The "Kinetic SaaS" Motion Design System
 
-Example scene component:
+**Objective:** Replicate the high-energy, fluid feel of premium tech product videos (Stripe, Apple, Linear, Affable.ai).
 
-\`\`\`tsx
-// src/remotion/scenes/Scene1.tsx
-import { AbsoluteFill, Img, staticFile, useCurrentFrame, useVideoConfig, spring } from "remotion";
-import manifest from '../../../public/video-manifest.json';
+**Core Philosophy:** "Nothing sits still. Everything is physics-based. Every pixel breathes."
 
-const section = manifest.sections[0];
-export const SCENE_1_DURATION = section.durationInFrames;
+This is the difference between **Static Composition** (slideshows) and **Kinetic Composition** (motion graphics). You must rebuild UI as individual animated layers and film with a virtual camera.
 
-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>
-  );
-};
-\`\`\`
+## 1. The Global Camera Rig (The "Anti-Static" Layer)
 
-### Step 5: Update FullVideo.tsx
+Even when reading text, the screen is slowly zooming or panning.
 
-\`\`\`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
+### Virtual Camera
 
-export const FULL_VIDEO_DURATION = manifest.totalDurationInFrames;
+Every scene must be wrapped in a \`CameraRig\` component:
 
-const BackgroundMusic: React.FC = () => {
+\`\`\`tsx
+const CameraRig: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   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} />;
-};
+  const { durationInFrames } = useVideoConfig();
+
+  // The "Drift" - constant subtle movement
+  const scale = interpolate(frame, [0, durationInFrames], [1.0, 1.05]);
+  const rotation = interpolate(frame, [0, durationInFrames], [0, 0.5]);
 
-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 style={{
+      transform: \`scale(\${scale}) rotate(\${rotation}deg)\`,
+    }}>
+      {children}
     </AbsoluteFill>
   );
 };
 \`\`\`
 
-### Step 6: Preview & Render
-
-\`\`\`bash
-npm run dev     # Preview in Remotion Studio
-npm run render  # Output to out/video.mp4
-\`\`\`
-
-## 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 |
+### Zoom-Through Transitions
 
-### ${cmd2} tts generate
-
-\`\`\`bash
-${cmd2} tts generate -t "Narration text" -o voice.wav --voice Kore
-${cmd2} tts voices  # List all voices
-\`\`\`
+Transitions are NOT just fades - they are camera movements:
 
-**Voices:** Kore (professional female), Puck (energetic male), Rachel (calm female), alloy (neutral)
-
-### ${cmd2} music generate
-
-\`\`\`bash
-${cmd2} music generate -p "uplifting corporate" -d 30 -o music.mp3
+\`\`\`tsx
+// Camera scales rapidly into an element (logo, dot) until it fills screen
+const zoomThrough = interpolate(frame, [TRANSITION_START, TRANSITION_END], [1, 50]);
+// The element becomes the background for the next scene
 \`\`\`
 
-**Good prompts:** "uplifting corporate", "calm ambient, soft piano", "cinematic orchestral"
+---
 
-### ${cmd2} image search / video search
+## 2. UI & Mockup Animation Rules (Rebuilding Reality)
 
-\`\`\`bash
-${cmd2} image search -q "tropical beach" -n 5 -s large
-${cmd2} video search "tech workspace" -n 5
-\`\`\`
+UI doesn't just fade in. It pops up with weight.
 
-### ${cmd2} mix create
+### Priority: Use Real Project Components
 
-Post-process audio into existing video:
+**If you're in a project folder, ALWAYS check for actual components first:**
 
 \`\`\`bash
-${cmd2} mix create --video video.mp4 --voice voice.wav --music music.mp3 -o final.mp4
+# Before building ANY UI, explore the project
+ls src/components/
+ls src/app/
 \`\`\`
 
-## Audio Guidelines
+**When project components exist:**
+1. **Copy the actual component** into your Remotion project
+2. **Strip logic** (remove useState, API calls, event handlers)
+3. **Keep visuals identical** (same styles, colors, spacing)
+4. **Add animation props** (progress, isHovered, etc.)
+5. **Apply kinetic animation** using the rules below
 
-| Element | Volume | Notes |
-|---------|--------|-------|
-| Voiceover | 100% | Primary audio |
-| Background music | 20-30% | Fade in/out over ~10-20 frames |
+See [project-based.md](project-based.md) for the full component extraction process.
 
-Generate music 5s longer than video for fade out.
+**This is the priority order:**
+1. \u2705 Pixel-perfect copy of real project components (animated)
+2. \u26A0\uFE0F Recreate UI from project's design system (colors, fonts, spacing)
+3. \u274C Generic mockups or stock images (ONLY for non-UI scenes like hooks)
 
-## Animation Quality Checklist
+### The "Pop-Up" Entrance (2.5D Rotation)
 
-Before rendering, ensure your video follows these standards from motion-standards.md:
+\`\`\`tsx
+// Heavy spring for weighty feel
+const progress = spring({
+  frame,
+  fps,
+  config: { mass: 2, damping: 20, stiffness: 100 },
+});
 
-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
+// Start tilted back, spring to flat
+const rotateX = interpolate(progress, [0, 1], [20, 0]);
+const y = interpolate(progress, [0, 1], [100, 0]);
+const scale = interpolate(progress, [0, 1], [0.8, 1.0]);
 
----
-
-# \u{1F3AC} PROJECT-BASED VIDEO WORKFLOW (Mode A)
+<div style={{
+  transform: \`perspective(1000px) rotateX(\${rotateX}deg) translateY(\${y}px) scale(\${scale})\`,
+}}>
+  {uiComponent}
+</div>
+\`\`\`
 
-**Use this when user has a project/app to showcase.**
+### Cursor Simulation
 
-## \u{1F4CB} PHASE 1: EXPLORE THE APP
+**Movement:** Never linear. Cursors move in **Bezier Curves** with an arc.
 
-### 1.1 Find Brand Assets
+\`\`\`tsx
+// 1. Spring progress from start to end
+const progress = spring({
+  frame: frame - startFrame,
+  fps,
+  config: { damping: 20, stiffness: 80 }, // Slower, deliberate
+});
 
-\`\`\`bash
-# Logo
-find src -name "*[Ll]ogo*" 2>/dev/null
-find public -name "*logo*" 2>/dev/null
+// 2. Linear interpolation for X and Y
+const linearX = interpolate(progress, [0, 1], [start.x, end.x]);
+const linearY = interpolate(progress, [0, 1], [start.y, end.y]);
 
-# Colors - THIS IS CRITICAL
-cat tailwind.config.* | grep -A 30 "colors"
-cat src/app/globals.css | head -50
+// 3. THE ARC: Parabola that peaks mid-travel (this is the secret sauce)
+const arcHeight = 100; // How much the cursor "loops"
+const arcOffset = Math.sin(progress * Math.PI) * arcHeight;
 
-# Fonts
-grep -r "fontFamily" tailwind.config.* src/app/layout.tsx
+// 4. Apply arc to Y position
+const cursorY = linearY - arcOffset;
 \`\`\`
 
-### 1.2 Read Key UI Components
+**Click Interaction:**
+\`\`\`tsx
+// On click:
+// 1. Cursor scales down
+const cursorScale = isClicking ? 0.8 : 1;
 
-**Don't copy - just read to understand the visual structure:**
+// 2. Button squishes
+const buttonScaleX = isClicking ? 1.05 : 1;
+const buttonScaleY = isClicking ? 0.95 : 1;
 
-\`\`\`bash
-# Find main components
-find src/components -name "*.tsx" | head -30
+// 3. Release both with spring
+\`\`\`
 
-# 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
+**Standard Cursor SVG:**
+\`\`\`tsx
+// Mac-style cursor (use as reference, customize as needed)
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path
+    d="M4 4L11.5 26L16 17.5L25 25L27 23L18.5 15L28 11.5L4 4Z"
+    fill="black"
+    stroke="white"
+    strokeWidth="2"
+  />
+</svg>
 \`\`\`
 
-**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)
+### Staggered Lists & Grids
 
-### 1.3 Document Your Findings
+**Rule:** NEVER show a list or grid all at once.
 
-\`\`\`markdown
-## Brand Discovery: [App Name]
+\`\`\`tsx
+const STAGGER_FRAMES = 4; // ~0.05s at 60fps
 
-### 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)
+{items.map((item, i) => {
+  const delay = i * STAGGER_FRAMES;
+  const progress = spring({
+    frame: frame - delay,
+    fps,
+    config: { damping: 15, stiffness: 120 },
+  });
 
-### 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
+  return (
+    <div style={{
+      opacity: progress,
+      transform: \`translateY(\${interpolate(progress, [0, 1], [20, 0])}px)\`,
+    }}>
+      {item}
+    </div>
+  );
+})}
 \`\`\`
 
 ---
 
-## \u{1F4CB} PHASE 2: PLAN THE VIDEO
-
-### Scene Structure
+## 3. Kinetic Typography (Text that Hits)
 
-\`\`\`markdown
-## Video Plan: [App Name] Demo
+Text doesn't fade. It slams in, changes fill, or slides up.
 
-### 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
+### Pattern A: The "Masked Reveal"
 
-### 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
+Text rises from a floor:
 
-### 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
+\`\`\`tsx
+<div style={{ overflow: 'hidden', height: 80 }}>
+  <h1 style={{
+    transform: \`translateY(\${interpolate(progress, [0, 1], [100, 0])}%)\`,
+  }}>
+    INTRODUCING
+  </h1>
+</div>
 \`\`\`
 
----
+### Pattern B: Variable Weight (Animate Keywords)
 
-## \u{1F528} PHASE 3: BUILD
+Don't animate the whole sentence. Animate **keywords**:
 
-### 3.1 Create Fresh Project
-
-\`\`\`bash
-rm -rf ../appname-video
-${cmd2} video init ../appname-video
-cd ../appname-video
+\`\`\`tsx
+// "Teams waste HOURS" - only "HOURS" animates
+<p>
+  Teams waste{' '}
+  <span style={{
+    transform: \`scale(\${interpolate(keywordProgress, [0, 1], [1, 1.2])})\`,
+    color: interpolateColors(keywordProgress, [0, 1], ['#F0F0F0', '#FF6B6B']),
+    textShadow: \`0 0 \${glowProgress * 20}px rgba(255,107,107,0.5)\`,
+  }}>
+    HOURS
+  </span>
+</p>
 \`\`\`
 
-### 3.2 Copy Brand Assets Only
+### Pattern C: The "Glitch/Tech" Accent
 
-\`\`\`bash
-# Logo
-cp ../myapp/public/logo.svg ./public/
-
-# Tailwind config (for colors/fonts)
-cp ../myapp/tailwind.config.* ./
+Chromatic aberration on impact:
 
-# Global CSS
-cp ../myapp/src/app/globals.css ./src/styles/
+\`\`\`tsx
+// Duplicate text, offset by 2px with color channels, flash for 2 frames
+{isImpactFrame && (
+  <>
+    <span style={{ position: 'absolute', left: -2, color: '#FF0000', opacity: 0.5 }}>TEXT</span>
+    <span style={{ position: 'absolute', left: 2, color: '#0000FF', opacity: 0.5 }}>TEXT</span>
+  </>
+)}
 \`\`\`
 
-### 3.3 Build Scene Components - PIXEL PERFECT
+### Text Colors
 
-**Each scene replicates what you observed, using Remotion:**
+Never pure white (\`#FFF\`). Use \`#F0F0F0\` with subtle gradient or shadow for depth.
 
-\`\`\`tsx
-// src/remotion/scenes/SidebarScene.tsx
-// Replicates: src/components/slides/SlidesSidebar.tsx
+---
 
-import React from "react";
-import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
+## 4. Atmosphere & Backgrounds (The "Deep Space")
 
-const mockSlides = [
-  { id: 1, title: "Title Slide", selected: true },
-  { id: 2, title: "Overview", selected: false },
-  { id: 3, title: "Key Players", selected: false },
-];
+Background is never a solid color. It's deep black with floating colored orbs.
 
-export const SIDEBAR_SCENE_DURATION = 150;
+### The "Orb" System
 
-export const SidebarScene: React.FC = () => {
+\`\`\`tsx
+const MovingBackground: React.FC = () => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
 
-  const sidebarProgress = spring({ frame, fps, config: { damping: 20, stiffness: 100 } });
-  const sidebarX = (1 - sidebarProgress) * -280;
+  // Orbs move in figure-8 or circular patterns
+  const orb1X = Math.sin(frame / 60) * 200;
+  const orb1Y = Math.cos(frame / 80) * 100;
+  const orb2X = Math.sin(frame / 70 + Math.PI) * 150;
+  const orb2Y = Math.cos(frame / 90 + Math.PI) * 120;
 
   return (
-    <AbsoluteFill style={{ backgroundColor: "#0f172a" }}>
-      {/* Sidebar - EXACT colors from tailwind.config */}
+    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
+      {/* Orb 1 - Teal */}
       <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>
+        position: 'absolute',
+        width: 600,
+        height: 600,
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(20,184,166,0.3) 0%, transparent 70%)',
+        filter: 'blur(100px)',
+        transform: \`translate(\${orb1X}px, \${orb1Y}px)\`,
+        left: '20%',
+        top: '30%',
+      }} />
+
+      {/* Orb 2 - Purple */}
+      <div style={{
+        position: 'absolute',
+        width: 500,
+        height: 500,
+        borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.3) 0%, transparent 70%)',
+        filter: 'blur(100px)',
+        transform: \`translate(\${orb2X}px, \${orb2Y}px)\`,
+        right: '20%',
+        bottom: '20%',
+      }} />
     </AbsoluteFill>
   );
 };
 \`\`\`
 
-### 3.4 Key Principles: PIXEL-PERFECT Replication
-
-**The video UI should be indistinguishable from the real app.**
+### Vignette & Noise
 
-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
+\`\`\`tsx
+// Noise texture overlay (5% opacity)
+<AbsoluteFill style={{
+  backgroundImage: 'url(/noise.png)',
+  opacity: 0.05,
+  mixBlendMode: 'overlay',
+}} />
+
+// Vignette (dark corners)
+<AbsoluteFill style={{
+  background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%)',
+}} />
+\`\`\`
 
 ---
 
-## \u{1F3AC} PHASE 4: AUDIO & RENDER
+## 5. Physics & Timing Reference
 
-### Generate Audio
+### Spring Configs
 
-\`\`\`bash
-${cmd2} video create \\
-  --script "Your narration..." \\
-  --music-prompt "modern uplifting tech" \\
-  --output ./public
-\`\`\`
+| Use Case | Config | Feel |
+|----------|--------|------|
+| Standard (snappy) | \`{ mass: 1, damping: 15, stiffness: 120 }\` | Smooth, professional |
+| Heavy (UI mockups) | \`{ mass: 2, damping: 20, stiffness: 100 }\` | Weighty, premium |
+| Bouncy (attention) | \`{ mass: 1, damping: 10, stiffness: 150 }\` | Playful overshoot |
 
-### Preview & Render
+### Timing Values
 
-\`\`\`bash
-npm run dev    # Preview
-npm run render # Output to out/video.mp4
-\`\`\`
+| Action | Frames | Notes |
+|--------|--------|-------|
+| Element entrance | 15-20 | Spring to rest |
+| Stagger gap | 3-5 | Between list items |
+| Hold on key info | 45-60 | Minimum read time |
+| Scene transition | 20-30 | Zoom-through |
+
+### The Golden Rule
+
+Use \`interpolate(frame)\` to ensure \`scale\` or \`rotation\` is changing on **EVERY frame**. No static resting states.
 
 ---
 
-## \u274C WHAT NOT TO DO
+## 6. Micro-Tricks from Premium Videos
 
-### Bad: Generic rectangles
-\`\`\`tsx
-// \u274C NO
-<div style={{ background: "linear-gradient(#667eea, #764ba2)", width: 200, height: 150 }} />
-\`\`\`
+### The "Match Cut"
 
-### Bad: Made-up content
-\`\`\`tsx
-// \u274C NO
-<h2>Key Insights from Research</h2>
-<li>Finding 1: Performance improved by 45%</li>
-\`\`\`
+Small circle zooms to fill screen, becomes next scene's background:
 
-### Bad: Not matching the app
 \`\`\`tsx
-// \u274C NO - App uses slate-900, not gray-800
-<div style={{ backgroundColor: "#1f2937" }}>
+// Circle element scales 50x to wipe to next scene
+const circleScale = interpolate(frame, [MATCH_START, MATCH_END], [1, 50]);
 \`\`\`
 
-### Good: Replicated UI with correct brand
+### Search Bar Typing
+
+Include blinking cursor:
+
 \`\`\`tsx
-// \u2705 YES - Matches actual app colors and structure
-<div style={{ backgroundColor: "#0f172a", borderColor: "#1e293b" }}>
-  <span style={{ color: "#14b8a6" }}>SLIDES CONTROL</span>
-</div>
+const Typewriter: React.FC<{ text: string }> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const charIndex = Math.floor(frame / 3); // 3 frames per char
+  const showCursor = Math.floor(frame / 15) % 2 === 0; // Blink every 15 frames
+
+  return (
+    <span>
+      {text.slice(0, charIndex)}
+      {showCursor && <span style={{ opacity: 0.8 }}>|</span>}
+    </span>
+  );
+};
 \`\`\`
 
----
+### The "Card Fan"
 
-## \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
-`;
-}
-function generateMotionStandardsRule() {
-  return `---
-name: motion-standards
-description: Animation quality standards for high-end video production
----
+Stack cards, then fan out:
 
-# Motion Design Standards
+\`\`\`tsx
+const cards = [
+  { rotation: -5, x: -20 },
+  { rotation: 0, x: 0 },
+  { rotation: 5, x: 20 },
+];
 
-Generate videos that feel like high-end productions (Apple, Stripe, Linear quality).
+{cards.map((card, i) => {
+  const fanProgress = spring({ frame: frame - 30, fps, config: { damping: 15, stiffness: 100 } });
 
-**Follow these standards for every Remotion component.**
+  return (
+    <div style={{
+      position: 'absolute',
+      transform: \`rotate(\${fanProgress * card.rotation}deg) translateX(\${fanProgress * card.x}px)\`,
+      zIndex: i,
+    }}>
+      <ProfileCard />
+    </div>
+  );
+})}
+\`\`\`
 
-## 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 }\`
+## 7. Strict Animation Guidelines (DO NOT DEVIATE)
 
-\`\`\`tsx
-// BAD
-const opacity = interpolate(frame, [0, 30], [0, 1]);
+**ROLE:** Senior Motion Graphics Engineer for Remotion.
+**REFERENCE STYLE:** "High-End SaaS Product Launch" (e.g., Affable.ai, Linear.app).
 
-// GOOD
-const progress = spring({ frame, fps, config: { mass: 0.8, stiffness: 150, damping: 15 } });
-\`\`\`
+### Physics & Timing
 
-## STANDARD 02: ORCHESTRATION & CASCADE
+- **No Linear Motion:** All spatial movement (X, Y, Scale) must use \`spring\`.
+  - *Standard Spring:* \`{ mass: 1, damping: 15, stiffness: 120 }\` (Snappy but smooth)
+  - *Heavy Spring (Mockups):* \`{ mass: 2, damping: 20, stiffness: 100 }\` (Feels weighty)
+- **Continuous Flow:** Use \`interpolate(frame)\` to ensure \`scale\` or \`rotation\` is changing slightly on EVERY frame. No static resting states.
 
-- **Rule:** NEVER animate all elements simultaneously
-- **Implementation:** Staggered entrances with 3-5 frames between items
+### UI Component Behavior
 
-\`\`\`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>
-))}
-\`\`\`
+- **Entrance:** When a UI card enters, it must use **2.5D Rotation**.
+  - *Code:* \`transform: perspective(1000px) rotateX(\${rotateX}deg) translateY(\${y}px)\`
+  - *Values:* Start at \`rotateX(20deg)\` and \`y(100px)\`. Spring to \`0\`.
+- **Internal Staggering:** If the UI card contains a list or grid, use \`<Sequence>\` or \`delay\` to reveal items one by one (3 frame gap).
+- **Cursor Interaction:** If a cursor clicks a button:
+  1. Cursor scales \`1 -> 0.8\`
+  2. Button scales \`1 -> 0.95\`
+  3. Release both to \`1\` with a spring
 
-## STANDARD 03: THE VIRTUAL CAMERA
+### Typography Patterns
 
-- **Rule:** Even when UI is idle, add subtle movement
-- **Implementation:** Dolly zoom (slow push in)
+- **Pattern A (Headline):** "Masked Slide Up". Text translates Y from \`100%\` inside a clipped container.
+- **Pattern B (Keywords):** "Scale & Glow". Keywords scale to \`1.1\` and emit a \`text-shadow\`.
+- **Colors:** Text is never pure white (\`#FFF\`). Use \`#F0F0F0\` with a subtle gradient or shadow to add depth.
 
-\`\`\`tsx
-const CinematicContainer = ({ children }) => {
-  const frame = useCurrentFrame();
-  const { durationInFrames } = useVideoConfig();
-  const scale = interpolate(frame, [0, durationInFrames], [1, 1.03]);
+### Background "Aliveness"
 
-  return (
-    <AbsoluteFill style={{ transform: \`scale(\${scale})\` }}>
-      {children}
-    </AbsoluteFill>
-  );
-};
-\`\`\`
+- Create a \`<MovingBackground>\` component.
+- It must feature 2-3 \`AbsoluteFill\` gradient orbs that move in a continuous loop using \`Math.sin(frame / slowFactor)\`.
+- This ensures the video has "depth" behind the text.
 
-## STANDARD 04: HUMAN SIMULATION
+---
 
-- **Rule:** NEVER move cursor in straight lines
-- **Implementation:** Use curved/Bezier paths for cursor movement
+## 8. Seamless Scene Transitions (No Hard Cuts)
 
-## STANDARD 05: TECHNICAL CONSTRAINTS
+In high-end motion design, transitions are rarely separate "effects" (like a cross-dissolve). The *outgoing* scene physically pushes, slides, or zooms into the *incoming* scene.
 
-1. **Styling:** Tailwind CSS or inline styles
-2. **Layout:** Use \`AbsoluteFill\` for scene composition
-3. **State:** NO \`useState\` or \`useEffect\` - derive from \`useCurrentFrame()\`
+### The "Wipe" Rule (No Hard Cuts)
 
-## Execution Checklist
+- **Forbidden:** Never let Scene A end at frame X and Scene B start at frame X+1 with a simple cut.
+- **Required:** Scene B must exist *above* Scene A (z-index) for at least 15-20 frames before the cut happens.
+- **Mechanism:** Scene B enters using a "Wipe" motion (sliding in from the bottom/right) or a "Scale In" (expanding from a dot).
 
-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
----
+### The "Zoom-Through" Technique (Best for SaaS)
+
+As Scene A ends, the camera must **accelerate** its zoom:
 
-# Micro-Interactions
+\`\`\`tsx
+// Scene A Action: At duration - 20 frames, zoom way in
+const scaleA = interpolate(frame, [duration - 20, duration], [1.0, 5.0]);
+
+// Scene B Action: Starts at scale 0.5 and springs to 1.0
+const scaleB = spring({ frame, fps, config: { damping: 14, stiffness: 120 } });
+const scaleBValue = interpolate(scaleB, [0, 1], [0.5, 1]);
+\`\`\`
 
-## Core Principles
+Result: It looks like the camera flew *through* Scene A to find Scene B behind it.
 
-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
+### The "Color Swipe" (Safety Net)
 
-## Spring Configurations
+If a complex match-cut is too hard, use a "Curtain":
 
 \`\`\`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 },
-};
+// A solid colored AbsoluteFill slides in from left, covers screen for 2 frames,
+// then slides out to the right, revealing Scene B
+const curtainX = interpolate(frame, [0, 10, 12, 22], [-100, 0, 0, 100]);
 \`\`\`
 
-## Entry Animations
+### TransitionWrapper Component
 
-### Fade + Slide
+Use the \`TransitionWrapper\` from shared components:
 
 \`\`\`tsx
-const AnimatedEntry = ({ delay = 0, direction = 'up', children }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+import { TransitionWrapper } from './shared';
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: { damping: 20, stiffness: 100 }
-  });
+// Types: 'slide' | 'zoom' | 'fade' | 'none'
+// enterFrom: 'left' | 'right' | 'bottom'
 
-  const directions = {
-    up: { x: 0, y: 30 },
-    down: { x: 0, y: -30 },
-    left: { x: 30, y: 0 },
-    right: { x: -30, y: 0 },
-  };
+<TransitionWrapper type="slide" enterFrom="bottom">
+  <YourScene />
+</TransitionWrapper>
+\`\`\`
+
+### Critical: Overlap Your Sequences
 
-  const { x, y } = directions[direction];
+**This is the most important part.** To make transitions work, you must overlap sequences slightly. If Scene 1 is 90 frames, start Scene 2 at frame 75 (15-frame overlap).
 
+\`\`\`tsx
+export const MyVideo = () => {
   return (
-    <div style={{
-      opacity: progress,
-      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
-    }}>
-      {children}
-    </div>
+    <AbsoluteFill>
+      {/* SCENE 1: Ends at frame 100 */}
+      <Sequence from={0} durationInFrames={100}>
+        <SceneOne />
+      </Sequence>
+
+      {/* SCENE 2: Starts at frame 85 (15 frames early!) */}
+      {/* TransitionWrapper slides it ON TOP of Scene 1 */}
+      <Sequence from={85} durationInFrames={150}>
+        <TransitionWrapper type="slide" enterFrom="bottom">
+          <SceneTwo />
+        </TransitionWrapper>
+      </Sequence>
+
+      {/* SCENE 3: Starts early again */}
+      <Sequence from={220} durationInFrames={150}>
+        <TransitionWrapper type="zoom">
+          <SceneThree />
+        </TransitionWrapper>
+      </Sequence>
+    </AbsoluteFill>
   );
 };
 \`\`\`
 
-### Staggered List
+**Why this fixes the "Light Switch" effect:** Because Scene 2 physically slides *over* Scene 1 while Scene 1 is still visible underneath, your brain registers it as continuous movement rather than a "cut."
 
-\`\`\`tsx
-const StaggeredList = ({ children, itemDelay = 5 }) => (
-  <>
-    {React.Children.map(children, (child, i) => (
-      <AnimatedEntry delay={i * itemDelay}>{child}</AnimatedEntry>
-    ))}
-  </>
-);
-\`\`\`
-
-## Interaction Simulation
+---
 
-### Button Press
+## Quick Tips from Motion Devs
 
-\`\`\`tsx
-const ButtonPress = ({ pressFrame, children }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+- **Don't use white backgrounds.** The 2.5D lighting and shadows pop much better on dark grey or black backgrounds.
+- **Overlap delays.** If Title starts at frame 10 and Card starts at frame 30, the title hasn't finished moving when the card appears. This overlap is crucial for fluidity.
+- **High FPS.** Ensure your \`remotion.config.ts\` is set to 60fps for springs to look smooth.
 
-  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;
+## Self-Check: Is It Kinetic?
 
-  const scale = isPressing ? 0.95 : (0.95 + releaseProgress * 0.05);
+Before rendering, verify:
 
-  return <div style={{ transform: \`scale(\${scale})\` }}>{children}</div>;
-};
-\`\`\`
+- [ ] Camera rig wraps entire scene with drift/zoom
+- [ ] Every UI element uses 2.5D rotation entrance
+- [ ] Cursor moves in curves with overshoot
+- [ ] Lists/grids stagger (never appear all at once)
+- [ ] Text uses masked reveal or keyword animation
+- [ ] Background has moving orbs + vignette + noise
+- [ ] Something is moving on EVERY frame
+- [ ] No static resting states longer than 30 frames
+- [ ] Scene transitions overlap (no hard cuts between scenes)
+- [ ] TransitionWrapper used for slide/zoom entrances
 
-### Typed Text
+If your video looks like PowerPoint slides with voiceover, **START OVER**.
+`
+  },
+  {
+    filename: "failures.md",
+    content: `# Common Failures - READ THIS FIRST
 
-\`\`\`tsx
-const TypedText = ({ text, startFrame = 0, speed = 2 }) => {
-  const frame = useCurrentFrame();
-  const charsToShow = Math.floor((frame - startFrame) / speed);
+If your video looks like any of these, START OVER.
 
-  if (frame < startFrame) return null;
+## FAILURE 1: Slideshow
 
-  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>;
-};
+What you made:
+- Background image
+- Text appears on top
+- Text disappears
+- New background image
+- More text
+
+This is PowerPoint, not a video. REJECTED.
 \`\`\`
 
-## Timing Guidelines
+## FAILURE 2: Lorem Ipsum / Placeholder Content
 
-| 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 },
-};
+\`\`\`
+What you made:
+- "Lorem ipsum dolor sit amet..."
+- "Sample text here"
+- Generic placeholder content
 
-// 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();
+Use REAL content from the project. REJECTED.
+\`\`\`
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: SPRING_CONFIGS.smooth,
-  });
+## FAILURE 3: Static UI Screenshot
 
-  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 },
-  };
+\`\`\`
+What you made:
+- Screenshot of the app
+- Text overlay saying "Our Dashboard"
+- No motion, no interaction
 
-  const { x, y } = directions[direction];
+Recreate the UI in code and ANIMATE it. REJECTED.
+\`\`\`
 
-  return (
-    <div style={{
-      opacity: interpolate(progress, [0, 1], [0, 1]),
-      transform: \`translate(\${x * (1 - progress)}px, \${y * (1 - progress)}px)\`,
-    }}>
-      {children}
-    </div>
-  );
-};
+## FAILURE 4: Elements Just Appearing
 
-// 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();
+\`\`\`
+What you made:
+- Frame 0: nothing
+- Frame 1: element is fully visible
+- No transition, no animation
 
-  const progress = spring({
-    frame: frame - delay,
-    fps,
-    config: SPRING_CONFIGS.bouncy,
-  });
+Every element must animate in with spring/easing. REJECTED.
+\`\`\`
 
-  return (
-    <div style={{
-      opacity: interpolate(progress, [0, 0.5], [0, 1], { extrapolateRight: 'clamp' }),
-      transform: \`scale(\${interpolate(progress, [0, 1], [from, 1])})\`,
-    }}>
-      {children}
-    </div>
-  );
-};
+## FAILURE 5: Hard Cuts Between Scenes (The "Light Switch" Effect)
 
-// 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>
-    ))}
-  </>
-);
+\`\`\`
+What you made:
+- Scene 1 ends at frame 100
+- Scene 2 starts at frame 101
+- No overlap, no slide, no zoom-through
+- Feels like a light switching on/off
+
+FIX: Overlap sequences by 15-20 frames. Scene 2 must slide/zoom
+ON TOP of Scene 1 while Scene 1 is still visible. Use TransitionWrapper.
+REJECTED.
+\`\`\`
 
-// Button press animation
-export const ButtonPress: React.FC<{
-  children: React.ReactNode;
-  pressFrame: number;
-}> = ({ children, pressFrame }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+## FAILURE 6: Static Camera
 
-  const isPressing = frame >= pressFrame && frame < pressFrame + 3;
-  const isReleasing = frame >= pressFrame + 3;
+\`\`\`
+What you made:
+- Camera never moves
+- No drift, no zoom, no rotation
+- Feels like watching a screenshot
 
-  const releaseProgress = isReleasing ? spring({
-    frame: frame - pressFrame - 3,
-    fps,
-    config: { damping: 10, stiffness: 300 },
-  }) : 0;
+Camera must ALWAYS be subtly moving. REJECTED.
+\`\`\`
 
-  const scale = isPressing ? 0.95 : 0.95 + releaseProgress * 0.05;
+## FAILURE 7: Linear Cursor Movement
 
-  return <div style={{ transform: \`scale(\${Math.min(1, scale)})\` }}>{children}</div>;
-};
+\`\`\`
+What you made:
+- Cursor moves in straight lines
+- No overshoot on stops
+- Click has no feedback
 
-// 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);
+Cursor must move in Bezier curves with overshoot. REJECTED.
+\`\`\`
+`
+  },
+  {
+    filename: "parameterization.md",
+    content: `# Parameterization (Critical)
 
-  if (frame < startFrame) return null;
+Never hardcode frame numbers. Use variables for all keyframes.
 
-  const isTyping = charsToShow < text.length;
+## Why
 
-  return (
-    <span>
-      {text.slice(0, Math.min(charsToShow, text.length))}
-      {showCursor && isTyping && (
-        <span style={{ opacity: frame % 15 < 8 ? 1 : 0 }}>|</span>
-      )}
-    </span>
-  );
-};
+When you change timing early in video, everything else breaks if hardcoded.
 
-// 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();
+## Pattern
 
-  const progress = interpolate(frame - startFrame, [0, duration], [0, 1], {
-    extrapolateLeft: 'clamp',
-    extrapolateRight: 'clamp',
-  });
+\`\`\`ts
+// Define keyframes as variables
+const SCENE_START = 0;
+const TITLE_IN = SCENE_START + 15;
+const TITLE_HOLD = TITLE_IN + 60;
+const TITLE_OUT = TITLE_HOLD + 15;
+const SUBTITLE_IN = TITLE_IN + 20;  // Relative to title
+const SCENE_END = TITLE_OUT + 30;
 
-  const eased = 1 - Math.pow(1 - progress, 3);
-  const value = Math.round(from + (to - from) * eased);
+// Use in animations
+opacity: interpolate(frame, [TITLE_IN, TITLE_IN + 15], [0, 1])
+\`\`\`
 
-  return <span>{format(value)}</span>;
-};
+## Scene Duration
 
-// 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;
+\`\`\`ts
+// Calculate from keyframes, don't hardcode
+const sceneDuration = SCENE_END - SCENE_START;
+\`\`\`
 
-  return <div style={{ transform: \`translateY(\${y}px)\` }}>{children}</div>;
-};
+## Audio Sync
 
-// Highlight effect
-export const Highlight: React.FC<{
-  children: React.ReactNode;
-  startFrame: number;
-  duration?: number;
-}> = ({ children, startFrame, duration = 45 }) => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+\`\`\`ts
+// If audio timestamp changes, only update one variable
+const VOICEOVER_START = 45;
+const VISUAL_CUE = VOICEOVER_START + 10;  // Auto-adjusts
+\`\`\`
 
-  const isActive = frame >= startFrame && frame < startFrame + duration;
-  const progress = spring({
-    frame: isActive ? frame - startFrame : 0,
-    fps,
-    config: SPRING_CONFIGS.snappy,
-  });
+## Multi-Scene
 
-  const scale = isActive ? 1 + progress * 0.03 : 1;
+\`\`\`ts
+const SCENE_1_START = 0;
+const SCENE_1_END = SCENE_1_START + 90;
+const SCENE_2_START = SCENE_1_END - 15;  // 15 frame overlap for transition
+const SCENE_2_END = SCENE_2_START + 120;
+\`\`\`
+`
+  },
+  {
+    filename: "layers.md",
+    content: `# Layers & Composition
 
-  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>
-  );
-};
+Explicit z-index prevents visual bugs.
 
-// 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();
+## Z-Index Scale
 
-  let x = path[0].x;
-  let y = path[0].y;
+| Layer | Z-Index | Examples |
+|-------|---------|----------|
+| Background orbs | 0 | Moving gradients, noise |
+| Vignette | 1 | Dark corners overlay |
+| UI Base | 10 | Main UI container |
+| UI Elements | 20 | Buttons, cards, inputs |
+| Overlays | 30 | Modals, tooltips, highlights |
+| Text/Captions | 40 | Titles, labels |
+| Cursor | 50 | Mouse pointer |
+| Debug | 100 | Frame counter (remove in final) |
 
-  for (let i = 0; i < path.length - 1; i++) {
-    const from = path[i];
-    const to = path[i + 1];
+## Composition Structure
 
-    if (frame >= from.frame && frame <= to.frame) {
-      const progress = spring({
-        frame: frame - from.frame,
-        fps,
-        config: { damping: 20, stiffness: 80 },
-      });
+\`\`\`tsx
+<AbsoluteFill>
+  {/* Background layer */}
+  <MovingBackground />
+
+  {/* Vignette */}
+  <Vignette />
+
+  {/* Camera rig wraps all content */}
+  <CameraRig>
+    <Sequence from={0}>
+      <Scene1 />
+    </Sequence>
+    <Sequence from={SCENE_2_START}>
+      <Scene2 />
+    </Sequence>
+  </CameraRig>
+
+  {/* Audio */}
+  <Audio src={music} volume={0.3} />
+  <Audio src={voiceover} />
+</AbsoluteFill>
+\`\`\`
 
-      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;
-    }
-  }
+## Overlapping Sequences
 
-  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
----
+For zoom-through transitions, scenes overlap:
 
-# Integrating App Components into Remotion
+\`\`\`tsx
+<Sequence from={0} durationInFrames={100}>
+  <Scene1 />
+</Sequence>
+<Sequence from={80} durationInFrames={100}>  {/* 20 frame overlap */}
+  <Scene2 />
+</Sequence>
+\`\`\`
+`
+  },
+  {
+    filename: "project-based.md",
+    content: `# Component Extraction (Critical for Product Videos)
 
-Use your actual React components OR replicate them pixel-perfect in Remotion videos.
+When creating a video for a project, **copy the actual components** - don't rebuild from scratch.
 
-## Two Approaches
+## The Goal
 
-### Approach A: Replicate UI (Recommended)
-Read your app's components, note every visual detail, build identical-looking components in Remotion.
+Your video should show the REAL product UI, pixel-perfect. Viewers should not be able to tell the difference between a screenshot and your video (except yours is animated with kinetic motion).
 
-**Why?** Your app components have hooks, state, and dependencies that don't work in Remotion. Replication is cleaner.
+## Process: Eject \u2192 Simplify \u2192 Animate
 
-### Approach B: Copy Components (When simple enough)
-For truly simple presentational components, you can copy them directly.
+### Step 1: Find Components to Feature
 
 \`\`\`bash
-cp -r ../my-app/src/components/Card ./src/app-components/
-cp ../my-app/tailwind.config.js ./
+# Explore the project structure
+ls src/components/
+ls src/app/
+# Find the key UI: dashboards, forms, cards, modals, etc.
 \`\`\`
 
----
+### Step 2: Copy Component Code
 
-## Adapting Components
+Copy the actual component file into your Remotion project.
 
-### 1. Remove Interactivity
+### Step 3: Eject - Strip Logic, Keep Visuals
 
 \`\`\`tsx
-// BEFORE (interactive app)
-<Button onClick={handleSubmit}>Submit</Button>
-
-// AFTER (video-ready)
-<Button disabled style={{ pointerEvents: 'none' }}>Submit</Button>
-\`\`\`
+// BEFORE: Original component from project
+export function PricingCard({ plan, onSelect }) {
+  const [loading, setLoading] = useState(false);
+  const handleClick = async () => { /* API calls */ };
+  return <div>...</div>;
+}
 
-### 2. Replace Dynamic Data
+// AFTER: Ejected for Remotion
+export function PricingCard({ plan, progress, isHovered }) {
+  // No useState, no API calls, no handlers
+  // Just visual + animation props from Remotion
 
-\`\`\`tsx
-// BEFORE (fetches from API)
-const { data } = useQuery('GET_USERS');
+  const entranceProgress = spring({ frame: progress, fps, config: { mass: 2, damping: 20, stiffness: 100 } });
+  const rotateX = interpolate(entranceProgress, [0, 1], [20, 0]);
 
-// AFTER (scripted data)
-const data = [
-  { id: 1, name: 'Sarah Chen', role: 'Designer' },
-  { id: 2, name: 'Alex Rivera', role: 'Developer' },
-];
+  return (
+    <div style={{
+      transform: \`perspective(1000px) rotateX(\${rotateX}deg)\`,
+      // ... exact same visual styles as original
+    }}>
+      ...
+    </div>
+  );
+}
 \`\`\`
 
-### 3. Wrap with Animation
+### Step 4: Add Kinetic Animation
 
-\`\`\`tsx
-import { FadeIn, SlideUp } from '../shared';
+Apply the rules from kinetic-saas.md:
+- 2.5D rotation entrance
+- Spring physics
+- Staggered children
+- Cursor interaction states
 
-<FadeIn delay={0}>
-  <Navbar />
-</FadeIn>
+### Step 5: Fill With Real Demo Data
 
-<SlideUp delay={15}>
-  <Sidebar />
-</SlideUp>
+\`\`\`tsx
+// Use realistic data that matches the product
+const DEMO_PLANS = [
+  { name: 'Starter', price: 9, features: ['5 projects', '10GB storage'] },
+  { name: 'Pro', price: 29, features: ['Unlimited projects', '100GB storage', 'Priority support'] },
+];
+// NOT: "Plan A", "$XX/mo", "Feature 1"
 \`\`\`
 
----
-
-## Common Showcase Patterns
+## What to Copy
 
-### Dashboard with Staggered Widgets
+| Find in Project | Copy to Video |
+|-----------------|---------------|
+| \`tailwind.config.js\` | Colors, fonts, spacing |
+| \`globals.css\` | CSS variables, font imports |
+| \`/public/logo.svg\` | Actual logo file |
+| \`/src/components/*.tsx\` | Component structure & styles |
 
-\`\`\`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>
-  );
-};
-\`\`\`
+## Common Mistakes
 
-### Form with Typing Simulation
+\u274C Using placeholder colors like \`#333\`
+\u2705 Using exact project colors from tailwind config
 
-\`\`\`tsx
-const FormShowcase = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+\u274C Generic content: "Feature 1", "Lorem ipsum"
+\u2705 Real content: "Unlimited projects", "Priority support"
 
-  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>
-  );
-};
-\`\`\`
+\u274C Building from scratch based on screenshots
+\u2705 Copying actual component code and ejecting it
 
-### Modal Slide-In
+\u274C Static fade-in animations
+\u2705 2.5D rotation with spring physics (kinetic style)
+`
+  },
+  {
+    filename: "social-media.md",
+    content: `# Social Media Video Guide (TikTok/Reels/Shorts)
 
-\`\`\`tsx
-const ModalShowcase = () => {
-  const frame = useCurrentFrame();
-  const showModal = frame > 30;
+**Platforms:** TikTok, Instagram Reels, YouTube Shorts (all 9:16 vertical)
 
-  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>
-        </>
-      )}
-    </>
-  );
-};
-\`\`\`
+**Philosophy:** "Don't make ads. Make TikToks." Your video must look native to the platform - lo-fi beats polished.
 
 ---
 
-## Troubleshooting
+## 1. The "3-Second War"
 
-### 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>
-);
-\`\`\`
+You have 3 seconds before the thumb scrolls. Win or lose everything.
 
-### 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
----
+### Hook Requirements (0-3s)
 
-# Project-Based Video Workflow
+- **Text on screen in FRAME 1** - no waiting for audio
+- **Movement** - never start static
+- **Pattern interrupt** - something unexpected
 
-Create promotional videos using **your actual project's UI** replicated in Remotion.
+### Hook Types
 
-## When to Use
+| Type | Description | Use For |
+|------|-------------|---------|
+| Face Close-Up | Tight on face, zoom out | Personal/story |
+| Green Screen | Speaker + background tweet/article | Commentary |
+| Text Slam | Bold text hits screen with sound | Listicles, tips |
+| Movement | Object thrown, quick zoom | Product demos |
 
-- 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
+### Audio Hooks
 
-## Quick Start
+Bad: "Today I want to talk about..."
+Good: "Stop scrolling if you hate [X]." / "This feels illegal to know."
 
-\`\`\`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
+## 2. Pacing Rules (No Dead Air)
 
-# 3. Build scenes replicating your app's UI
+| Rule | Implementation |
+|------|----------------|
+| Visual change every 2-3s | Cut, zoom, or new element every 60-90 frames |
+| No "Millennial Pause" | Never start with 1-2s of stillness |
+| Remove all breaths | Edit out pauses between sentences |
+| Jump cuts are native | Don't smooth-cut; jump cuts feel authentic |
 
-# 4. Preview & Render
-npm run dev
-npm run render
+---
+
+## 3. Native Lo-Fi Aesthetic
+
+| Looks Like TV Ad (Bad) | Looks Native (Good) |
+|------------------------|---------------------|
+| Perfect lighting | Natural/ring light |
+| Broadcast fonts | Platform-native fonts |
+| Smooth transitions | Jump cuts |
+| Color graded | Raw, slightly oversaturated |
+
+### Native Font Stack
+
+\`\`\`tsx
+const NATIVE_FONT = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
 \`\`\`
 
 ---
 
-## Full Workflow
+## 4. Safe Zone Rules (CRITICAL)
 
-### Step 1: Analyze Project
+Platform UI overlays your content. Plan for it.
 
-\`\`\`bash
-# Check framework
-cat package.json | grep -E "react|next|vue"
+\`\`\`
+1080x1920 Canvas
++------------------------------------------+
+|  TOP SAFE ZONE (150px)                   |  <- Notch, status bar
+|  ----------------------------------------|
+|                                          |
+|  CONTENT SAFE ZONE                       |
+|  (60px left, 120px right margins)        |
+|                                          |
+|  ----------------------------------------|
+|  BOTTOM SAFE ZONE (384px / 20%)          |  <- Captions, username
+|  [Icon strip on right: 120px]            |  <- Like, Comment, Share
++------------------------------------------+
+\`\`\`
+
+### Safe Zone Values
 
-# List components
-ls -la src/components/
+\`\`\`tsx
+const SAFE_ZONE = {
+  top: 150,      // Notch/status bar
+  bottom: 384,   // 20% of 1920 - captions/username
+  left: 60,      // Edge safety
+  right: 120,    // Like/Comment/Share icons
+};
 
-# Get colors
-cat tailwind.config.* | grep -A 30 "colors"
+// Captions must sit ABOVE bottom safe zone
+const CAPTION_BOTTOM = 350; // px from bottom
 \`\`\`
 
-**Identify:**
-- Framework: React, Next.js, Vue
-- Styling: Tailwind, CSS modules, styled-components
-- Key components: Forms, cards, modals, dashboards
-- Views to showcase
+### SafeZoneGuide Component
+
+\`\`\`tsx
+const SafeZoneGuide: React.FC = () => (
+  <AbsoluteFill style={{ pointerEvents: "none" }}>
+    {/* Top danger zone */}
+    <div style={{
+      position: "absolute", top: 0, left: 0, right: 0, height: 150,
+      backgroundColor: "rgba(255,0,0,0.2)", borderBottom: "2px dashed red",
+    }} />
+    {/* Bottom danger zone */}
+    <div style={{
+      position: "absolute", bottom: 0, left: 0, right: 0, height: 384,
+      backgroundColor: "rgba(255,0,0,0.2)", borderTop: "2px dashed red",
+    }} />
+    {/* Right icon strip */}
+    <div style={{
+      position: "absolute", top: 150, right: 0, bottom: 384, width: 120,
+      backgroundColor: "rgba(255,165,0,0.2)", borderLeft: "2px dashed orange",
+    }} />
+  </AbsoluteFill>
+);
+\`\`\`
 
-### Step 2: Document Brand
+---
 
-\`\`\`markdown
-## Brand: [App Name]
+## 5. Content Formats
 
-### Colors (from tailwind.config)
-- Background: #0f172a
-- Surface: #1e293b
-- Primary: #14b8a6
-- Text: #ffffff
+### Green Screen (Speaker + Background)
 
-### Key Components
-1. Sidebar - Dark bg, navigation items
-2. Dashboard - Stats cards, charts
-3. Modal - Overlay, card
+\`\`\`tsx
+<AbsoluteFill>
+  <Img src={backgroundImage} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+  <div style={{
+    position: "absolute", bottom: 400, left: 40,
+    width: 300, height: 400, borderRadius: 20, overflow: "hidden",
+  }}>
+    <Video src={speakerVideo} />
+  </div>
+</AbsoluteFill>
 \`\`\`
 
-### Step 3: Plan Scenes
+### Listicle (Rapid-Fire)
 
-\`\`\`markdown
-## Scene Plan
+\`\`\`tsx
+const FRAMES_PER_ITEM = 60; // 2 seconds per item
+const currentIndex = Math.floor(frame / FRAMES_PER_ITEM);
+// Slam-in with spring animation for each item
+\`\`\`
 
-### Scene 1: Intro (3s)
-- Logo centered
-- Tagline fades up
+### Visual ASMR (No Talking)
 
-### Scene 2: Dashboard (5s)
-- Stats widgets stagger in
-- Chart animates
+- No voiceover, music only
+- Slow, deliberate cursor movements
+- Satisfying click feedback
+- Ken Burns zoom on details
 
-### Scene 3: Feature Demo (5s)
-- Sidebar slides in
-- Selection animates
+### POV Skit
 
-### Scene 4: CTA (3s)
-- Logo + button
+\`\`\`tsx
+<div style={{ position: "absolute", top: 160, left: 40, right: 120, fontSize: 42 }}>
+  POV: {setup}
+</div>
 \`\`\`
 
-### Step 4: Build Scenes
+---
+
+## 6. TikTok Captions
 
-Create scenes in \`src/remotion/scenes/\` that replicate your UI:
+Use \`@remotion/captions\` with \`createTikTokStyleCaptions\`:
 
 \`\`\`tsx
-// src/remotion/scenes/DashboardScene.tsx
-import { AbsoluteFill, useCurrentFrame, spring, useVideoConfig } from "remotion";
-
-export const DASHBOARD_SCENE_DURATION = 150;
+import { createTikTokStyleCaptions } from "@remotion/captions";
 
-const mockData = {
-  revenue: 125000,
-  users: 1234,
-  orders: 567,
-};
+const { pages } = createTikTokStyleCaptions({
+  captions: transcriptCaptions,
+  combineTokensWithinMilliseconds: 1200, // Higher = more words per page
+});
+\`\`\`
 
-export const DashboardScene: React.FC = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+### Word-by-Word Highlighting
 
+\`\`\`tsx
+{page.tokens.map((token) => {
+  const isActive = currentTimeMs >= token.fromMs && currentTimeMs < token.toMs;
   return (
-    <AbsoluteFill style={{ backgroundColor: "#0f172a", padding: 40 }}>
-      {/* Replicate your dashboard layout here */}
-      {/* Use EXACT colors from your tailwind.config */}
-    </AbsoluteFill>
+    <span style={{
+      color: isActive ? "#FFD700" : "#fff",
+      fontSize: 64,
+      fontWeight: 900,
+      textTransform: "uppercase",
+    }}>
+      {token.text}
+    </span>
   );
-};
+})}
 \`\`\`
 
-### Step 5: Generate Audio
+---
 
-\`\`\`bash
-${cmd2} video create \\
-  --script "Introducing [App]. The fastest way to..." \\
-  --music-prompt "modern uplifting tech" \\
-  --output ./public
-\`\`\`
+## 7. Script Structure (60 Seconds)
 
-### Step 6: Render
+| Timestamp | Section | Purpose |
+|-----------|---------|---------|
+| 0:00-0:03 | **HOOK** | Pattern interrupt, bold claim |
+| 0:03-0:10 | **PROBLEM** | Agitate the pain point |
+| 0:10-0:40 | **SOLUTION** | Rapid value delivery |
+| 0:40-0:55 | **PROOF** | Show, don't tell |
+| 0:55-0:60 | **CTA** | Soft ask (Follow/Link in bio) |
 
-\`\`\`bash
-npm run dev      # Preview
-npm run render   # Final video
-\`\`\`
+### CTA Best Practices
+
+| Do | Don't |
+|----|-------|
+| "Follow for more tips" | "SMASH that like button" |
+| "Link in bio" | "Click the link below" |
+| "Save this for later" | "Subscribe to my channel" |
 
 ---
 
-## Tips
+## 8. Quick Reference
 
-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
+### Platform Specs
 
-  ${chalk12.gray("# Install to specific directory")}
-  $ ${brand.name} skill install --dir ~/.claude
+| Platform | Ratio | Resolution | Duration | FPS |
+|----------|-------|------------|----------|-----|
+| TikTok | 9:16 | 1080x1920 | 15-60s | 30 |
+| Reels | 9:16 | 1080x1920 | 15-90s | 30 |
+| Shorts | 9:16 | 1080x1920 | 15-60s | 30 |
+| YouTube | 16:9 | 1920x1080 | any | 30/60 |
 
-  ${chalk12.gray("# Install without remotion-best-practices")}
-  $ ${brand.name} skill install --skip-remotion
+### Timing (30fps)
 
-  ${chalk12.gray("# Show skill content")}
-  $ ${brand.name} skill show
+| Action | Frames | Seconds |
+|--------|--------|---------|
+| Hook impact | 0-3 | 0-0.1s |
+| Text hold min | 45 | 1.5s |
+| Scene change max | 90 | 3s |
+| Ideal scene | 60 | 2s |
+
+### Self-Check
+
+- [ ] Text in FRAME 1 (no millennial pause)
+- [ ] Visual change every 2-3 seconds
+- [ ] All content within safe zones
+- [ ] Captions at bottom: 350px+
+- [ ] No content in bottom 20% or right 120px
+- [ ] Lo-fi aesthetic (not TV ad)
+- [ ] CTA is soft, not desperate
+- [ ] Duration 15-60 seconds
 `
-);
-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 = [];
+  }
+];
+
+// src/commands/skill/installer.ts
+function validatePath(basePath, targetPath) {
+  const resolvedBase = resolve4(basePath);
+  const resolvedTarget = resolve4(basePath, targetPath);
+  const relativePath = relative(resolvedBase, resolvedTarget);
+  if (relativePath.startsWith("..") || resolve4(resolvedTarget) !== resolvedTarget.replace(/\.\./g, "")) {
+    throw new Error(`Invalid path: "${targetPath}" would escape base directory`);
+  }
+  return resolvedTarget;
+}
+function getRuleFiles() {
+  const rules = [];
+  for (const rule of VIDEO_RULE_CONTENTS) {
+    rules.push({
+      path: `rules/video/${rule.filename}`,
+      content: rule.content
+    });
+  }
+  return rules;
+}
+function installSkillToPath(skillPath, content) {
+  const skillFile = join(skillPath, "SKILL.md");
+  mkdirSync(skillPath, { recursive: true });
+  writeFileSync(skillFile, content, "utf-8");
+  const rules = getRuleFiles();
+  for (const rule of rules) {
+    const rulePath = join(skillPath, rule.path);
+    const ruleDir = join(skillPath, rule.path.split("/").slice(0, -1).join("/"));
+    mkdirSync(ruleDir, { recursive: true });
+    writeFileSync(rulePath, rule.content, "utf-8");
+  }
+}
+function installSkill(skillName, content, options = {}) {
+  const result = {
+    installed: [],
+    skipped: [],
+    errors: []
+  };
   const baseDir = options.local ? process.cwd() : homedir();
-  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);
+      const resolvedDir = resolve4(options.dir);
+      const skillPath = validatePath(resolvedDir, join("skills", skillName));
+      installSkillToPath(skillPath, content);
+      result.installed.push(options.dir);
     } catch (err) {
-      errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
+      result.errors.push(`${options.dir}: ${err instanceof Error ? err.message : String(err)}`);
     }
   } else {
-    for (const editor of EDITORS) {
+    for (const editor of SUPPORTED_EDITORS) {
       const editorDir = join(baseDir, editor.dir);
-      const skillPath = join(editorDir, "skills", brand.name);
+      const skillPath = join(editorDir, "skills", skillName);
       const skillFile = join(skillPath, "SKILL.md");
       if (!existsSync2(editorDir)) {
         continue;
       }
       if (existsSync2(skillFile) && !options.force) {
-        skipped.push(editor.name);
+        result.skipped.push(editor.name);
         continue;
       }
       try {
-        installSkill(skillPath, skillFiles, options.force);
-        installed.push(editor.name);
+        installSkillToPath(skillPath, content);
+        result.installed.push(editor.name);
+      } catch (err) {
+        result.errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    }
+  }
+  return result;
+}
+function uninstallSkill(skillName, options = {}) {
+  const result = {
+    removed: [],
+    errors: []
+  };
+  const baseDir = options.local ? process.cwd() : homedir();
+  for (const editor of SUPPORTED_EDITORS) {
+    const skillPath = join(baseDir, editor.dir, "skills", skillName);
+    if (existsSync2(skillPath)) {
+      try {
+        rmSync(skillPath, { recursive: true });
+        result.removed.push(editor.name);
       } catch (err) {
-        errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
+        result.errors.push(`${editor.name}: ${err instanceof Error ? err.message : String(err)}`);
       }
     }
   }
+  return result;
+}
+function getSupportedEditorNames() {
+  return SUPPORTED_EDITORS.map((e) => e.name);
+}
+
+// src/commands/skill/index.ts
+var skillCommand = new Command14("skill").description(`Manage ${brand.displayName} skill for AI coding assistants`).addHelpText(
+  "after",
+  `
+${chalk12.bold("Examples:")}
+  ${chalk12.gray("# Install skill for all detected editors")}
+  $ ${brand.name} skill install
+
+  ${chalk12.gray("# Install to specific directory")}
+  $ ${brand.name} skill install --dir ~/.claude
+
+  ${chalk12.gray("# Show skill content")}
+  $ ${brand.name} skill show
+`
+);
+skillCommand.command("install").description(`Install the ${brand.displayName} skill for AI coding assistants`).option("-d, --dir <path>", "Install to specific directory").option("-g, --global", "Install globally (to home directory)", true).option("-l, --local", "Install locally (to current directory)").option("-f, --force", "Overwrite existing skill files").action(async (options) => {
+  const skillContent = generateSkillContent(brand);
+  const result = installSkill(brand.name, skillContent, {
+    dir: options.dir,
+    local: options.local,
+    force: options.force
+  });
   console.log();
-  if (installed.length > 0) {
+  if (result.installed.length > 0) {
     success("Skill installed successfully");
     console.log();
-    keyValue("Installed to", installed.join(", "));
-    keyValue("Files", Object.keys(skillFiles).length.toString());
+    keyValue("Installed to", result.installed.join(", "));
   }
-  if (skipped.length > 0) {
+  if (result.skipped.length > 0) {
     console.log();
-    info(`Skipped (already exists): ${skipped.join(", ")}`);
+    info(`Skipped (already exists): ${result.skipped.join(", ")}`);
     console.log(chalk12.gray("  Use --force to overwrite"));
   }
-  if (errors.length > 0) {
+  if (result.errors.length > 0) {
     console.log();
-    for (const err of errors) {
+    for (const err of result.errors) {
       error(err);
     }
   }
-  if (installed.length === 0 && skipped.length === 0 && errors.length === 0) {
+  if (result.installed.length === 0 && result.skipped.length === 0 && result.errors.length === 0) {
     info("No supported AI coding assistants detected.");
     console.log();
-    console.log(chalk12.gray("Supported editors: " + EDITORS.map((e) => e.name).join(", ")));
+    console.log(chalk12.gray("Supported editors: " + getSupportedEditorNames().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").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("show").description("Display the skill content").action(() => {
+  console.log(generateSkillContent(brand));
 });
 skillCommand.command("uninstall").description(`Remove the ${brand.displayName} skill from AI coding assistants`).option("-g, --global", "Uninstall globally (from home directory)", true).option("-l, --local", "Uninstall locally (from current directory)").action(async (options) => {
-  const { rmSync } = await import("fs");
-  const removed = [];
-  const baseDir = options.local ? process.cwd() : homedir();
-  for (const editor of EDITORS) {
-    const skillPath = join(baseDir, editor.dir, "skills", brand.name);
-    if (existsSync2(skillPath)) {
-      try {
-        rmSync(skillPath, { recursive: true });
-        removed.push(editor.name);
-      } catch {
-      }
-    }
-  }
+  const result = uninstallSkill(brand.name, { local: options.local });
   console.log();
-  if (removed.length > 0) {
+  if (result.removed.length > 0) {
     success("Skill uninstalled");
-    keyValue("Removed from", removed.join(", "));
+    keyValue("Removed from", result.removed.join(", "));
   } else {
     info("No installed skills found");
   }
+  if (result.errors.length > 0) {
+    for (const err of result.errors) {
+      warn(`Failed to remove: ${err}`);
+    }
+  }
   console.log();
 });
-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
 init_api();
@@ -5300,8 +5170,8 @@ init_types();
 import { Command as Command19 } from "commander";
 import ora12 from "ora";
 import { mkdir, writeFile as writeFile5, readFile as readFile2, access, rm } from "fs/promises";
-import { join as join2, resolve as resolve4 } from "path";
-import { execSync as execSync2, spawn } from "child_process";
+import { join as join2, resolve as resolve5 } from "path";
+import { execSync, spawn } from "child_process";
 var DEFAULT_TEMPLATE = "inizio-inc/remotion-composition";
 var DEFAULT_FPS = 30;
 function parseScriptIntoSections(script) {
@@ -5391,6 +5261,26 @@ function calculateSectionTimingFromTimestamps(sections, timestamps, fps) {
   }
   return results;
 }
+async function readStdin2() {
+  if (process.stdin.isTTY) {
+    return null;
+  }
+  return new Promise((resolve6) => {
+    let data = "";
+    process.stdin.setEncoding("utf-8");
+    process.stdin.on("data", (chunk) => {
+      data += chunk;
+    });
+    process.stdin.on("end", () => resolve6(data.trim() || null));
+    process.stdin.on("error", () => resolve6(null));
+    setTimeout(() => {
+      if (!data) resolve6(null);
+    }, 100);
+  });
+}
+function toFilename(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
 async function downloadFile3(url, outputPath) {
   if (url.startsWith("data:")) {
     const matches = url.match(/^data:[^;]+;base64,(.+)$/);
@@ -5420,72 +5310,199 @@ function getExtension(url) {
   }
   return "jpg";
 }
-var createCommand2 = new Command19("create").description("Create video assets (voiceover, music, images)").option("-s, --script <text>", "Narration script text").option("--script-file <path>", "Path to script file").option("-t, --topic <text>", "Topic for image search (inferred from script if not provided)").option("-d, --duration <seconds>", "Target duration (auto-calculated from script if not set)").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description (auto-generated if not provided)").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var createCommand3 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing...").start() : null;
   try {
-    let script = options.script;
-    if (options.scriptFile) {
+    const stdinData = await readStdin2();
+    let scenesInput = null;
+    if (stdinData) {
       try {
-        script = await readFile2(options.scriptFile, "utf-8");
-      } catch (err) {
-        spinner?.stop();
-        error(`Failed to read script file: ${err instanceof Error ? err.message : "Unknown error"}`);
-        process.exit(EXIT_CODES.INVALID_INPUT);
+        const parsed = JSON.parse(stdinData);
+        if (parsed.scenes && Array.isArray(parsed.scenes)) {
+          scenesInput = parsed;
+        }
+      } catch {
       }
     }
-    if (!script || script.trim().length === 0) {
-      spinner?.stop();
-      error("Either --script or --script-file is required");
-      process.exit(EXIT_CODES.INVALID_INPUT);
-    }
-    script = script.trim();
-    const topic = options.topic || script.split(".")[0].slice(0, 50);
-    const numImages = parseInt(options.numImages, 10);
-    if (isNaN(numImages) || numImages < 1 || numImages > 20) {
-      spinner?.stop();
-      error("Number of images must be between 1 and 20");
-      process.exit(EXIT_CODES.INVALID_INPUT);
+    if (!scenesInput && options.scriptFile) {
+      try {
+        const fileContent = await readFile2(options.scriptFile, "utf-8");
+        const parsed = JSON.parse(fileContent);
+        if (parsed.scenes && Array.isArray(parsed.scenes)) {
+          scenesInput = parsed;
+        }
+      } catch {
+      }
     }
+    const voice = scenesInput?.voice || options.voice;
+    const musicPrompt = scenesInput?.musicPrompt || options.musicPrompt || "uplifting background music, positive energy";
     const audioDir = join2(options.output, "audio");
     const imagesDir = join2(options.output, "images");
+    const videosDir = join2(options.output, "videos");
     if (spinner) spinner.text = "Creating directories...";
     await mkdir(audioDir, { recursive: true });
     await mkdir(imagesDir, { recursive: true });
+    await mkdir(videosDir, { recursive: true });
     let totalCost = 0;
-    if (spinner) spinner.text = "Generating voiceover...";
-    const ttsResult = await generateSpeech({
-      text: script,
-      options: { voice: options.voice }
-    });
-    const voiceoverPath = join2(audioDir, `voiceover.${ttsResult.format}`);
-    await writeFile5(voiceoverPath, ttsResult.audioData);
-    totalCost += ttsResult.cost;
-    const voiceoverInfo = {
-      path: `audio/voiceover.${ttsResult.format}`,
-      duration: ttsResult.duration,
-      voice: options.voice,
-      provider: ttsResult.provider,
-      cost: ttsResult.cost,
-      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();
+    let scenes = [];
+    let totalDuration = 0;
+    const allImages = [];
+    const allVideos = [];
+    if (scenesInput && scenesInput.scenes.length > 0) {
+      if (format === "human") {
+        spinner?.stop();
+        info(`Processing ${scenesInput.scenes.length} scenes...`);
+        spinner?.start();
+      }
+      let currentTime = 0;
+      for (let i = 0; i < scenesInput.scenes.length; i++) {
+        const scene = scenesInput.scenes[i];
+        const filename = toFilename(scene.name);
+        if (spinner) spinner.text = `[${scene.name}] Generating speech...`;
+        const ttsResult = await generateSpeech({
+          text: scene.script,
+          options: { voice }
+        });
+        const audioPath = join2(audioDir, `${filename}.${ttsResult.format}`);
+        await writeFile5(audioPath, ttsResult.audioData);
+        totalCost += ttsResult.cost;
+        const durationInSeconds = ttsResult.duration;
+        const durationInFrames = Math.round(durationInSeconds * DEFAULT_FPS);
+        const sceneData = {
+          id: i + 1,
+          name: scene.name,
+          text: scene.script,
+          wordCount: scene.script.split(/\s+/).length,
+          startTime: currentTime,
+          endTime: currentTime + durationInSeconds,
+          durationInSeconds,
+          durationInFrames,
+          audioPath: `audio/${filename}.${ttsResult.format}`
+        };
+        if (scene.imageQuery) {
+          if (spinner) spinner.text = `[${scene.name}] Searching image...`;
+          try {
+            const imageResults = await searchImages({
+              query: scene.imageQuery,
+              options: { maxResults: 1, size: "large", safeSearch: true }
+            });
+            const imgs = imageResults.data.results.flatMap((r) => r.results);
+            totalCost += imageResults.data.totalCost;
+            if (imgs.length > 0) {
+              const img = imgs[0];
+              const ext = getExtension(img.url);
+              const imgFilename = `${filename}.${ext}`;
+              const imgPath = join2(imagesDir, imgFilename);
+              await downloadFile3(img.url, imgPath);
+              sceneData.imagePath = `images/${imgFilename}`;
+              allImages.push({
+                path: `images/${imgFilename}`,
+                url: img.url,
+                width: img.width,
+                height: img.height,
+                query: scene.imageQuery
+              });
+            }
+          } catch (err) {
+            if (format === "human") {
+              spinner?.stop();
+              warn(`[${scene.name}] Image search failed: ${err instanceof Error ? err.message : "Unknown"}`);
+              spinner?.start();
+            }
+          }
+        }
+        if (scene.videoQuery) {
+          if (spinner) spinner.text = `[${scene.name}] Searching video...`;
+          try {
+            const videoResults = await searchVideos({
+              query: scene.videoQuery,
+              options: { maxResults: 1 }
+            });
+            const vids = videoResults.data.results.flatMap((r) => r.results);
+            totalCost += videoResults.data.totalCost;
+            if (vids.length > 0) {
+              const vid = vids[0];
+              const vidUrl = vid.previewUrl || vid.downloadUrl;
+              if (vidUrl) {
+                const vidFilename = `${filename}.mp4`;
+                const vidPath = join2(videosDir, vidFilename);
+                await downloadFile3(vidUrl, vidPath);
+                sceneData.videoPath = `videos/${vidFilename}`;
+                allVideos.push({
+                  path: `videos/${vidFilename}`,
+                  url: vidUrl,
+                  width: vid.width,
+                  height: vid.height,
+                  duration: vid.duration,
+                  query: scene.videoQuery
+                });
+              }
+            }
+          } catch (err) {
+            if (format === "human") {
+              spinner?.stop();
+              warn(`[${scene.name}] Video search failed: ${err instanceof Error ? err.message : "Unknown"}`);
+              spinner?.start();
+            }
+          }
+        }
+        scenes.push(sceneData);
+        currentTime += durationInSeconds;
+        totalDuration += durationInSeconds;
+        if (format === "human") {
+          spinner?.stop();
+          const assets = [
+            `audio: ${durationInSeconds.toFixed(1)}s`,
+            sceneData.imagePath ? "image" : null,
+            sceneData.videoPath ? "video" : null
+          ].filter(Boolean).join(", ");
+          success(`  ${scene.name}: ${assets}`);
+          spinner?.start();
+        }
+      }
+    } else {
+      let script = options.script;
+      if (options.scriptFile) {
+        try {
+          script = await readFile2(options.scriptFile, "utf-8");
+        } catch (err) {
+          spinner?.stop();
+          error(`Failed to read script file: ${err instanceof Error ? err.message : "Unknown error"}`);
+          process.exit(EXIT_CODES.INVALID_INPUT);
+        }
+      }
+      if (!script || script.trim().length === 0) {
+        spinner?.stop();
+        error("Provide scenes via stdin JSON, --script-file with scenes JSON, or --script for legacy mode");
+        process.exit(EXIT_CODES.INVALID_INPUT);
+      }
+      script = script.trim();
+      const _topic = options.topic || script.split(".")[0].slice(0, 50);
+      void _topic;
+      if (spinner) spinner.text = "Generating voiceover...";
+      const ttsResult = await generateSpeech({
+        text: script,
+        options: { voice }
+      });
+      const voiceoverPath = join2(audioDir, `voiceover.${ttsResult.format}`);
+      await writeFile5(voiceoverPath, ttsResult.audioData);
+      totalCost += ttsResult.cost;
+      totalDuration = ttsResult.duration;
+      const sectionTexts = parseScriptIntoSections(script);
+      const sectionsWithTiming = calculateSectionTiming(sectionTexts, ttsResult.duration, DEFAULT_FPS, ttsResult.timestamps);
+      scenes = sectionsWithTiming.map((s, i) => ({
+        ...s,
+        name: `Section${i + 1}`,
+        audioPath: `audio/voiceover.${ttsResult.format}`
+      }));
+      if (format === "human") {
+        spinner?.stop();
+        success(`Voiceover: ${voiceoverPath} (${ttsResult.duration.toFixed(1)}s)`);
+        spinner?.start();
+      }
     }
-    const musicDuration = Math.min(30, Math.ceil(ttsResult.duration) + 5);
-    const musicPrompt = options.musicPrompt || "uplifting background music, positive energy";
+    const musicDuration = Math.min(30, Math.ceil(totalDuration) + 5);
     if (spinner) spinner.text = "Generating music...";
     let musicResult = await generateMusic({
       prompt: musicPrompt,
@@ -5520,67 +5537,13 @@ var createCommand2 = new Command19("create").description("Create video assets (v
       success(`Music: ${musicPath} (${musicInfo.duration}s)`);
       spinner?.start();
     }
-    if (spinner) spinner.text = "Searching for images...";
-    const imageResults = await searchImages({
-      query: topic,
-      options: {
-        maxResults: numImages,
-        size: "large",
-        safeSearch: true
-      }
-    });
-    const allImages = imageResults.data.results.flatMap(
-      (providerResult) => providerResult.results.map((img) => ({
-        ...img,
-        provider: providerResult.providerName
-      }))
-    );
-    totalCost += imageResults.data.totalCost;
-    const downloadedImages = [];
-    for (let i = 0; i < Math.min(allImages.length, numImages); i++) {
-      const img = allImages[i];
-      const ext = getExtension(img.url);
-      const filename = `scene-${i + 1}.${ext}`;
-      const imagePath = join2(imagesDir, filename);
-      if (spinner) spinner.text = `Downloading image ${i + 1}/${Math.min(allImages.length, numImages)}...`;
-      try {
-        await downloadFile3(img.url, imagePath);
-        downloadedImages.push({
-          path: `images/${filename}`,
-          url: img.url,
-          width: img.width,
-          height: img.height,
-          query: topic
-        });
-      } catch (err) {
-        if (format === "human") {
-          spinner?.stop();
-          warn(`Failed to download image ${i + 1}: ${err instanceof Error ? err.message : "Unknown error"}`);
-          spinner?.start();
-        }
-      }
-    }
-    if (format === "human") {
-      spinner?.stop();
-      success(`Images: Downloaded ${downloadedImages.length} images to ${imagesDir}`);
-      spinner?.start();
-    }
-    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 totalDurationInFrames = Math.round(totalDuration * DEFAULT_FPS);
     const manifest = {
-      topic,
-      script,
-      voiceover: voiceoverInfo,
       music: musicInfo,
-      images: downloadedImages,
-      sections: sectionsWithImages,
+      images: allImages,
+      videos: allVideos,
+      scenes,
       totalDurationInFrames,
       fps: DEFAULT_FPS,
       totalCost,
@@ -5600,19 +5563,19 @@ var createCommand2 = new Command19("create").description("Create video assets (v
     console.log();
     success("Video assets created successfully!");
     console.log();
-    info(`Topic: ${topic}`);
-    info(`Voiceover: ${voiceoverInfo.path} (${voiceoverInfo.duration.toFixed(1)}s, ${voiceoverInfo.voice})`);
+    info(`Scenes: ${scenes.length} (${totalDurationInFrames} frames at ${DEFAULT_FPS}fps)`);
+    for (const scene of scenes) {
+      const assets = [
+        scene.audioPath ? "audio" : null,
+        scene.imagePath ? "image" : null,
+        scene.videoPath ? "video" : null
+      ].filter(Boolean).join(", ");
+      info(`  - ${scene.name}: ${scene.durationInSeconds.toFixed(1)}s [${assets}]`);
+    }
     info(`Music: ${musicInfo.path} (${musicInfo.duration}s)`);
-    info(`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 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");
@@ -5663,11 +5626,11 @@ 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("--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 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);
+    const targetDir = resolve5(process.cwd(), name);
     try {
       await access(targetDir);
       spinner?.stop();
@@ -5675,14 +5638,22 @@ var initCommand = new Command19("init").description("Create a new Remotion video
       process.exit(EXIT_CODES.INVALID_INPUT);
     } catch {
     }
+    const templatePattern = /^[a-zA-Z0-9_-]+\/[a-zA-Z0-9_.-]+(\/[a-zA-Z0-9_.-]+)*(#[a-zA-Z0-9_.-]+)?$/;
+    if (!templatePattern.test(options.template)) {
+      spinner?.stop();
+      error(`Invalid template format: "${options.template}". Expected format: owner/repo or owner/repo#branch`);
+      process.exit(EXIT_CODES.INVALID_INPUT);
+    }
     if (spinner) spinner.text = `Downloading template from ${options.template}...`;
     try {
-      execSync2(`npx --yes degit ${options.template} "${targetDir}"`, {
+      execSync(`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}"`, {
+      const repoMatch = options.template.match(/^([a-zA-Z0-9_-]+\/[a-zA-Z0-9_.-]+)/);
+      const repo = repoMatch ? repoMatch[1] : options.template;
+      execSync(`git clone --depth 1 https://github.com/${repo}.git "${targetDir}"`, {
         stdio: "pipe"
       });
       await rm(join2(targetDir, ".git"), { recursive: true, force: true });
@@ -5715,12 +5686,37 @@ var initCommand = new Command19("init").description("Create a new Remotion video
         spinner?.start();
       }
     }
+    if (options.type === "tiktok") {
+      if (spinner) spinner.text = "Configuring for TikTok (9:16)...";
+      const constantsPath = join2(targetDir, "types/constants.ts");
+      try {
+        let constantsContent = await readFile2(constantsPath, "utf-8");
+        constantsContent = constantsContent.replace(
+          /export const VIDEO_WIDTH = 1920;/,
+          "export const VIDEO_WIDTH = 1080; // TikTok 9:16"
+        ).replace(
+          /export const VIDEO_HEIGHT = 1080;/,
+          "export const VIDEO_HEIGHT = 1920; // TikTok 9:16"
+        ).replace(
+          /export const VIDEO_FPS = 60;/,
+          "export const VIDEO_FPS = 30; // TikTok standard"
+        );
+        await writeFile5(constantsPath, constantsContent, "utf-8");
+        if (format === "human") {
+          spinner?.stop();
+          success("Configured for TikTok (1080x1920 @ 30fps)");
+          spinner?.start();
+        }
+      } catch {
+      }
+    }
     spinner?.stop();
     if (format === "json") {
       printJson({
         name,
         path: targetDir,
         template: options.template,
+        type: options.type,
         installed: options.install
       });
       return;
@@ -5731,6 +5727,11 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     }
     console.log();
     success(`Video project "${name}" created successfully!`);
+    if (options.type === "tiktok") {
+      info("Format: TikTok/Reels/Shorts (1080x1920 @ 30fps)");
+    } else {
+      info("Format: Landscape (1920x1080 @ 60fps)");
+    }
     console.log();
     info("Next steps:");
     info(`  cd ${name}`);
@@ -5739,17 +5740,21 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     }
     info("  pnpm dev             # Preview in Remotion Studio");
     info("  cc video create ...  # Generate assets to public/");
-    info("  pnpm render          # Render final video");
+    if (options.type === "tiktok") {
+      info("  pnpm exec remotion render TikTokVideo  # Render TikTok video");
+    } else {
+      info("  pnpm exec remotion render FullVideo    # Render final video");
+    }
   } catch (err) {
     spinner?.stop();
     error(err instanceof Error ? err.message : "Unknown error");
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand2).addCommand(searchCommand2);
+var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2);
 
 // src/index.ts
-var VERSION = "0.1.6";
+var VERSION = "0.1.7";
 var program = new Command20();
 var cmdName = brand.commands[0];
 program.name(cmdName).description(brand.description).version(VERSION, "-v, --version", "Show version number").option("--debug", "Enable debug logging").option("--no-color", "Disable colored output").configureOutput({