@autoaiai/aicut 0.1.11 → 0.1.13

package/skills/remotion-resemble-ai/SKILL.md

@@ -1,879 +0,0 @@
----
-name: remotion-resemble-ai
-description: "Create professional AI-narrated videos with AICUT and Resemble.ai - from educational tutorials to product launches Runs in AICUT: the film is film.html, a page per shot, drawn by `aicut look` and `aicut render`."
-license: MIT
-source: "resemble-ai/remotion-resemble-skill"
----
-
-# remotion-resemble-ai
-
-## Running it in AICUT
-
-AICUT's film is `film.html`: it cuts pages, footage, pictures and sound together on tracks. A page is a web page that
-sets `window.film = { frame(t) }` and draws that moment — no framework, no build step, no composition object, no
-`registerRoot`. Five shots are five pages cut together, not one page that changes scene, so each shot stays trimmable
-and replaceable in Studio.
-
-```sh
-npx -y @autoaiai/aicut@latest          # the manual: the format and the commands, always current
-npx -y @autoaiai/aicut@latest open .   # make this folder a film and print Studio's address
-npx -y @autoaiai/aicut@latest look     # a contact sheet of the whole film, its sound, and a determinism check
-npx -y @autoaiai/aicut@latest look 4.5 # one frame, full size — look at the PNG, not at the code
-npx -y @autoaiai/aicut@latest render   # the MP4, beside film.html
-```
-
-Run the manual before the first film: it is authoritative for the format, and this skill is about the method above it.
-
-Where the words below name another program's part, it becomes this:
-
-| elsewhere | in AICUT |
-|---|---|
-| composition, timeline, project file | `film.html`; tracks and clips inside it |
-| a scene, a sequence, a slide | a page (`pages/<name>.html`) cut onto a track |
-| `useCurrentFrame()`, `interpolate()` | `frame(t)` — the picture depends only on `t`, never on state or `Date.now()` |
-| a still, a screengrab | `aicut look <t>` |
-| `render` / `build` / `export` | `aicut render` (the person can also export from Studio) |
-| a dev server, a preview window | `aicut open` and the Studio address it prints |
-
-Hard rules that hold whatever the method says: the picture depends only on `t`; every value in the person's prompt is
-binding; look at the frames `look` writes before saying a film is done.
-
-
-## When to use
-
-Use this skill when the user wants to create:
-
-1. **Educational Tutorial Videos** - Research a topic and create an animated explainer
-   - Example: "Create a tutorial about the lifecycle of a butterfly for grade 3 students"
-
-2. **SaaS Walkthrough Demos** - Showcase software features with animated UI
-   - Example: "Create a demo video showing how to use Notion's database feature"
-
-3. **Product Launch Announcements** - Marketing videos with motion graphics
-   - Example: "Create a launch video announcing our new AI-powered search feature"
-
-4. **Tutorial / Walkthrough Videos** - Step-by-step guides with cursor animations
-   - Example: "Create a tutorial showing how to set up a project in our app"
-
-5. **Social Media Promo Videos** - Short, punchy kinetic text videos for ads
-   - Example: "Create a 15-second Instagram ad for our fitness app"
-
-6. **App/Product Showcase Videos** - Kinetic text combined with floating UI mockups
-   - Example: "Create a promo showing our crypto exchange interface"
-
-7. **Landing Page Reveal Videos** - Design-tool aesthetic with webpage animations
-   - Example: "Create a video showcasing our new SaaS landing page design"
-
----
-
-## Video Production Workflow
-
-Follow this pipeline for all video types:
-
-```
-1. UNDERSTAND → 2. RESEARCH → 3. SCRIPT → 4. SCENES → 5. AUDIO → 6. ANIMATE
-```
-
-### Step 1: Understand the Request
-
-Identify:
-- **Video type:** Educational tutorial, SaaS demo, product launch, tutorial/walkthrough, social promo, app showcase, landing page reveal, or AI explainer?
-- **Target audience:** Age, expertise level, context
-- **Tone:** Educational, professional, energetic, playful, dramatic, minimal
-- **Duration:** Ultra-short (5-15s), short (30-60s), medium (1-3min), or long (3-5min)
-- **Format:** Widescreen 16:9 (1920x1080), square 1:1 (1080x1080), or vertical 9:16 (1080x1920)
-- **Visual style:** Dark dramatic, soft gradient, clean minimal, or design tool aesthetic
-
-### Step 2: Research (for tutorials and demos)
-
-For educational content:
-- Search for accurate, up-to-date information
-- Use reliable sources (official docs, educational sites)
-- Gather key facts, statistics, or steps to explain
-
-For SaaS demos:
-- Explore the product to understand features
-- Capture screenshots or note UI patterns
-- Identify the key workflow to demonstrate
-
-### Step 3: Write the Script
-
-Write a complete voiceover script BEFORE generating audio. Structure varies by video type (see below).
-
-### Step 4: Plan Scenes
-
-Break the script into visual segments:
-- Each scene = one key idea or step
-- Note what visuals accompany each line
-- Plan transitions between scenes
-
-### Step 5: Generate Audio
-
-Use Resemble.ai to generate the voiceover (see setup below).
-
-### Step 6: Create Animations
-
-Build the Remotion composition with animations synchronized to the audio.
-
----
-
-## Video Type: Educational Tutorial
-
-**Goal:** Explain a concept clearly for a specific audience level.
-
-### Script Structure
-
-```
-HOOK (5-10s)
-"Have you ever wondered how a caterpillar becomes a butterfly?"
-
-INTRODUCTION (10-15s)
-Set context and preview what they'll learn.
-
-BODY (main content, broken into 3-5 key points)
-- Point 1: Explain with visual metaphor
-- Point 2: Build on previous point
-- Point 3: Add detail or example
-- ...
-
-RECAP (10-15s)
-Summarize the key takeaways.
-
-OUTRO (5s)
-Call to action or closing thought.
-```
-
-### Audience Adaptation
-
-| Audience | Language Style | Visuals |
-|----------|---------------|---------|
-| Grade K-2 | Very simple, playful, 5-word sentences | Bright colors, cute characters, big shapes |
-| Grade 3-5 | Simple but informative, analogies | Clear diagrams, step-by-step, moderate pace |
-| Grade 6-8 | More vocabulary, cause-effect | Charts, labeled diagrams, faster pace |
-| High School+ | Technical terms OK, nuance | Data viz, detailed graphics |
-| Adults | Professional, concise | Clean design, infographics |
-
-### Animation Patterns for Tutorials
-
-- **Reveals:** Fade in elements as narrator mentions them
-- **Transformations:** Morph shapes to show change (caterpillar → butterfly)
-- **Diagrams:** Animated labels, arrows pointing to parts
-- **Timelines:** Progress bars, step indicators
-- **Comparisons:** Side-by-side with highlighting
-
-### Example Scene Plan
-
-```
-Script: "First, the butterfly lays tiny eggs on a leaf."
-
-Scene 1:
-- Visual: Leaf appears (slide in from bottom, spring animation)
-- Visual: Small eggs fade in on leaf
-- Timing: Sync "eggs" word with eggs appearing
-- Duration: 4 seconds
-```
-```
----
-```
-
-## Video Type: SaaS Walkthrough Demo
-
-**Goal:** Show users how to accomplish a task in software.
-
-### Script Structure
-
-```
-HOOK (5-10s)
-"Let me show you how to [accomplish goal] in [Product]."
-
-CONTEXT (10s)
-Why this feature matters, what problem it solves.
-
-WALKTHROUGH (main content)
-- Step 1: Navigate to X
-- Step 2: Click on Y
-- Step 3: Configure Z
-- ...
-
-RESULT (10s)
-Show the outcome, the finished state.
-
-OUTRO (5-10s)
-Recap benefit, suggest next steps.
-```
-
-### Visual Elements
-
-- **UI Mockups:** Stylized representations of the interface
-- **Cursor animations:** Animated pointer moving to click targets
-- **Highlights:** Glowing borders around buttons/fields being discussed
-- **Zoom effects:** Focus on specific areas of the UI
-- **Callouts:** Text labels pointing to UI elements
-
-### Animation Patterns for Demos
-
-- **Cursor movement:** Smooth bezier curves, slight pause before click
-- **Click effect:** Ripple or pulse on click
-- **Field focus:** Highlight border, slight scale up
-- **Typing animation:** Characters appearing in input fields
-- **Transition:** Slide or fade between screens
-- **Callout arrows:** Animate in, point to element, fade out
-
-### Example Scene Plan
-
-```
-Script: "Click the blue 'New Database' button in the sidebar."
-
-Scene:
-- Visual: UI mockup of sidebar
-- Animation: Cursor moves to button (0.8s ease-out)
-- Animation: Button highlights with glow
-- Animation: Click ripple effect
-- Animation: New panel slides in from right
-- Duration: 3 seconds
-```
-```
----
-```
-
-## Video Type: Product Launch Announcement
-
-**Goal:** Generate excitement about a new product or feature.
-
-### Script Structure
-
-```
-HOOK (5-10s)
-Bold statement or question that grabs attention.
-
-PROBLEM (10-15s)
-What pain point does this solve?
-
-SOLUTION REVEAL (10-15s)
-Introduce the product/feature dramatically.
-
-KEY FEATURES (20-40s)
-3-5 punchy feature highlights with visuals.
-
-SOCIAL PROOF (optional, 10s)
-Stats, testimonials, or credibility markers.
-
-CALL TO ACTION (5-10s)
-What should viewers do next?
-```
-
-### Visual Style
-
-- **Bold typography:** Large text, kinetic type animations
-- **Brand colors:** Use product's color palette consistently
-- **Icons and graphics:** Abstract shapes, feature icons
-- **High energy:** Faster cuts, dynamic movement
-- **Logo reveal:** Animated logo at end
-
-### Animation Patterns for Launches
-
-- **Text slams:** Words slam in with impact
-- **Kinetic typography:** Words that move, scale, rotate
-- **Counter animations:** Numbers counting up (users, revenue, etc.)
-- **Icon sequences:** Features appearing with bounce/spring
-- **Gradient backgrounds:** Slowly shifting color gradients
-- **Particle effects:** Subtle sparkles, floating shapes
-- **Logo reveal:** Scale up, fade in, or assemble from pieces
-
-### Example Scene Plan
-
-```
-Script: "Introducing Smart Search — find anything in milliseconds."
-
-Scene:
-- Visual: Dark background with gradient
-- Animation: "Introducing" fades in (0.5s)
-- Animation: "Smart Search" slams in large, bold (0.3s, with shake)
-- Animation: Tagline types out below (typewriter, 1.5s)
-- Animation: Search icon pulses
-- Duration: 4 seconds
-```
-```
----
-```
-
-## Video Type: Tutorial / Walkthrough
-
-**Goal:** Teach users how to accomplish a task with clear step-by-step visual guidance.
-
-### Script Structure
-
-```
-INTRO (3-5s)
-"Here's how to [accomplish goal] in [Product]."
-
-STEP 1 (10-20s)
-First action with clear visual demonstration.
-
-STEP 2 (10-20s)
-Second action, building on previous step.
-
-STEP 3+ (10-20s each)
-Continue through workflow...
-
-SUCCESS STATE (5-10s)
-Show completion, celebrate the outcome.
-
-RECAP (optional, 5s)
-Quick summary of what was accomplished.
-```
-
-### Visual Style
-
-- **Light, clean backgrounds:** Off-white (#fafafa), cream, or light gray
-- **Full UI context:** Show the complete interface, not just fragments
-- **Progress indicators:** Step breadcrumbs, numbered stages (1 → 2 → 3)
-- **Cursor as guide:** Smooth cursor movement leads the viewer's eye
-- **Success celebration:** Green checkmarks, confetti, or branded success screens
-- **Minimal distractions:** Focus on the task, avoid decorative elements
-
-### Animation Patterns for Tutorials
-
-- **Cursor choreography:** Smooth bezier paths with slight pause before clicks
-- **Click feedback:** Subtle ripple or highlight on click
-- **Form field focus:** Border glow when field is active
-- **Typing simulation:** Text appears character-by-character in inputs
-- **Step transitions:** Gentle crossfade or slide between screens
-- **Progress updates:** Breadcrumb/step indicator animates forward
-- **Success burst:** Checkmark scales in with bounce, optional confetti
-- **Panel reveals:** Sidebars or dropdowns slide in smoothly
-
-### Visual Elements
-
-- **Breadcrumb navigation:** "← 1. Intent → 2. Seed Idea → 3. Sketchpad"
-- **Form inputs:** Placeholder text, labels, validation states
-- **Buttons:** Clear CTAs with hover/active states shown
-- **Sidebars/panels:** AI suggestions, settings, or tool palettes
-- **Success screens:** Full-color background with icon + message
-
-### Example Scene Plan
-
-```
-Script: "First, enter what your lesson is about."
-
-Scene 1 - Setup (2s):
-- Visual: Full app interface, light background
-- Visual: Breadcrumb shows "2. Seed Idea" active
-- Animation: Screen fades in
-
-Scene 2 - Interaction (4s):
-- Visual: Form with "Enter a concept or theme:" label
-- Animation: Cursor moves to input field (0.6s ease-out)
-- Animation: Field border highlights blue
-- Animation: "The Secret Lives of Mushrooms" types in (2s)
-- Animation: Cursor moves to "Continue" button
-
-Scene 3 - Transition (2s):
-- Animation: Button highlights on hover
-- Animation: Click ripple effect
-- Animation: Screen slides left, new panel slides in
-
-Scene 4 - Result (3s):
-- Visual: Sketchpad view with AI suggestions panel
-- Animation: Suggestion cards stagger in (0.15s delay each)
-- Animation: "Lesson Flow" section populates
-
-Scene 5 - Success (3s):
-- Visual: Green full-screen background
-- Animation: White circle scales in (spring)
-- Animation: Checkmark draws inside circle
-- Animation: "Your lesson is live!" fades in below
-- Animation: Subtitle "Ready to inspire wonder and discovery" fades in
-```
-
-### Tutorial Pacing Guidelines
-
-| Step Complexity | Duration | Notes |
-|-----------------|----------|-------|
-| Simple click | 2-3s | Click and immediate result |
-| Form input | 4-6s | Type + submit |
-| Multi-field form | 8-12s | Multiple inputs |
-| Complex workflow | 15-20s | Several sub-steps |
-| Success state | 3-5s | Let it breathe |
-
-### Tips for Effective Tutorials
-
-1. **One action per scene** — Don't rush multiple clicks together
-2. **Pause on results** — Let viewers see the outcome before moving on
-3. **Highlight what changes** — Use subtle glow or scale on new elements
-4. **Match narration to action** — Click happens as narrator says "click"
-5. **Show the whole UI** — Context helps users orient themselves
-6. **End with celebration** — Success states reinforce completion
-
----
-
-## Video Type: Social Media Promo
-
-**Goal:** Grab attention fast with bold kinetic text for ads and social content.
-
-### Script Structure
-
-```
-HOOK (1-3s)
-Single powerful word or phrase that stops the scroll.
-
-VALUE PROP (3-5s)
-What's in it for them? One punchy sentence.
-
-FEATURE FLASH (5-10s)
-2-3 key benefits, rapid fire.
-
-CTA (2-3s)
-Clear action: "Download now", "Try free", URL
-```
-
-### Visual Style
-
-- **Minimal backgrounds:** Solid colors or simple gradients
-- **Maximum contrast:** Dark bg + white text OR colored bg + white text
-- **Word-by-word reveals:** Each word gets its own moment
-- **Color transitions:** Background color shifts between scenes
-- **Square format:** 1080x1080 for Instagram/social feeds
-
-### Animation Patterns for Social Promos
-
-- **Word slam:** Single words appear with impact (scale 1.2→1 + slight shake)
-- **Background flash:** Instant color changes between words/phrases
-- **Text scaling:** Words grow large then shrink to make room for next
-- **Minimal motion:** Let bold typography do the work
-- **Fast cuts:** 0.5-1s per word/phrase maximum
-
-### Example Scene Plan
-
-```
-Script: "We are ready."
-
-Scene sequence (4 seconds total):
-- Frame 1: Black bg, "WE" slams in white (0.8s)
-- Frame 2: White bg, "A" appears black, centered (0.8s)
-- Frame 3: Red bg, "R" types out, becomes "READY" (1.6s)
-- Frame 4: Hold final frame (0.8s)
-```
-
-### Duration Guidelines
-
-| Platform | Ideal Length | Max Length |
-|----------|--------------|------------|
-| Instagram Reels | 15-30s | 90s |
-| TikTok | 15-60s | 3min |
-| Twitter/X | 15-45s | 2min 20s |
-| LinkedIn | 30s-1min | 10min |
-| YouTube Shorts | 15-60s | 60s |
-
----
-
-## Video Type: App/Product Showcase
-
-**Goal:** Demonstrate a product's interface with cinematic flair, combining text and UI.
-
-### Script Structure
-
-```
-HOOK (3-5s)
-Problem statement or intriguing question.
-
-INTRODUCE PRODUCT (5-10s)
-Show the product name/logo, establish brand.
-
-FEATURE TOUR (20-40s)
-Walk through 3-5 key features with UI demonstrations.
-
-BENEFIT SUMMARY (5-10s)
-Recap what makes it special.
-
-CTA (5s)
-URL, app store badge, or next step.
-```
-
-### Visual Style
-
-- **Dark gradient backgrounds:** Black to purple/blue for tech products
-- **Soft gradient backgrounds:** Pastels (pink, lavender, mint) for friendly apps
-- **Floating UI mockups:** App screens at slight angles with shadows
-- **Kinetic text alongside UI:** Text appears next to or above interface
-- **Cursor interactions:** Show clicks, scrolls, typing within the UI
-
-### Animation Patterns for App Showcases
-
-- **URL bar typing:** Browser address bar with typewriter effect
-- **UI slide-in:** App mockups slide in from bottom or side with spring
-- **Perspective tilt:** UI has subtle 3D rotation (5-10 degrees)
-- **Glow effects:** Subtle glow/bloom around UI elements
-- **Cursor choreography:** Smooth bezier movement with click ripples
-- **List reveals:** Items in lists appear with stagger (0.1s delay each)
-- **Token/icon grids:** App icons or crypto tokens arranged in grid
-
-### Example Scene Plan
-
-```
-Script: "Earn the best yields on your crypto."
-
-Scene 1 (3s):
-- Visual: Soft purple gradient background
-- Animation: Text "Earn the best" fades in, "yields" appears in accent color
-- Timing: Words sync with voiceover
-
-Scene 2 (4s):
-- Visual: Browser URL bar appears (rounded rectangle)
-- Animation: "jumper.exchange/" types out character by character
-- Animation: Cursor blinks at end
-
-Scene 3 (5s):
-- Visual: App UI mockup slides up from bottom
-- Animation: Token list (USDC, ETH, LINK) reveals with stagger
-- Animation: Cursor moves to highlight token row
-```
-```
----
-```
-
-## Video Type: Landing Page Reveal
-
-**Goal:** Showcase a website design with dramatic designer-tool aesthetics.
-
-### Script Structure
-
-```
-INTRO (3-5s)
-Establish the problem or context.
-
-DESIGN REVEAL (10-20s)
-Dramatic entrance of the landing page.
-
-FEATURE CALLOUTS (15-30s)
-Highlight specific sections of the page.
-
-CTA (5-10s)
-"Book a demo", "Get started", with URL.
-```
-
-### Visual Style
-
-- **Design tool aesthetic:** Grid lines, guides, rulers visible
-- **Neutral backgrounds:** Light gray (#f5f5f5) or dark charcoal (#1a1a1a)
-- **Full webpage mockups:** Complete landing page in browser frame
-- **Light beams/lens flares:** Dramatic reveal lighting
-- **Bento grid layouts:** UI components arranged in grid formation
-
-### Animation Patterns for Landing Page Reveals
-
-- **Grid appearance:** Dotted guide lines fade in first
-- **Element construction:** Blue rectangles represent elements before they "become" real UI
-- **Light sweep:** Diagonal light beam crosses the design
-- **Zoom and pan:** Camera movement across the page
-- **Component highlights:** Sections glow or lift when discussed
-- **Browser frame:** Chrome/Safari browser chrome for context
-
-### Example Scene Plan
-
-```
-Script: "Achieve team harmony with TeamFusion."
-
-Scene 1 (2s):
-- Visual: Dark background, grid lines appear (dashed, gray)
-- Animation: Blue rectangle placeholder at center
-- Animation: Cursor enters frame
-
-Scene 2 (3s):
-- Visual: Light beam sweeps diagonally
-- Animation: Blue rectangle transforms/morphs into webpage mockup
-- Animation: Glow effect around the design
-
-Scene 3 (5s):
-- Visual: Full landing page visible with bento-style feature cards
-- Animation: Cards lift slightly with shadow on hover simulation
-- Animation: Text callout points to CTA button
-```
-```
----
-```
-
-## Video Type: AI/Tech Product Explainer
-
-**Goal:** Explain complex AI or tech products with text and interface demonstrations.
-
-### Script Structure
-
-```
-MEET THE PRODUCT (5-10s)
-"Meet [Product] — the [category] that [key benefit]."
-
-PROBLEM (10-15s)
-What frustration does this solve?
-
-HOW IT WORKS (20-40s)
-Show the interface, demonstrate the magic.
-
-INTEGRATIONS (10-15s)
-What does it connect with?
-
-CTA (5-10s)
-Try it, sign up, learn more.
-```
-
-### Visual Style
-
-- **Dark mode UI:** Dark backgrounds with vibrant accent colors
-- **Neon accents:** Purple, cyan, magenta glows
-- **Voice/AI indicators:** Waveforms, recording buttons, chat bubbles
-- **App icon grids:** Show integrations with recognizable logos
-- **Side-by-side layout:** Text on one side, UI on the other
-
-### Animation Patterns for AI Explainers
-
-- **Voice waveform:** Animated dots or bars showing "listening"
-- **Recording indicator:** Pulsing red dot with "Stop" button
-- **Chat message typing:** Messages appear with typing indicator first
-- **Model selector:** Dropdown showing AI model options
-- **Integration icons:** App logos slide in from edges with stagger
-- **Glow pulses:** Elements glow when being discussed
-
-### Example Scene Plan
-
-```
-Script: "Meet the AI assistant that lets you talk to all your apps."
-
-Scene 1 (3s):
-- Visual: Dark purple gradient background
-- Animation: "Meet" fades in gray, holds
-
-Scene 2 (5s):
-- Visual: App mockup slides in from right
-- Visual: Voice recording UI with waveform animation
-- Animation: Red recording dot pulses
-- Animation: Text "that lets you talk to all your apps" appears left
-
-Scene 3 (4s):
-- Visual: Dropdown opens showing model options (GPT-4, Claude, etc.)
-- Animation: List items stagger in (0.1s delay)
-- Animation: Cursor hovers, selection highlights
-```
-```
----
-```
-
-## Visual Styles Reference
-
-Choose a visual style based on the product type and tone:
-
-### Dark Dramatic (Tech, AI, Fintech, Crypto)
-- **Background:** Black to purple/blue gradient, or solid dark (#0a0a0a)
-- **Text:** White or light gray, with colored accents
-- **Accents:** Neon purple (#8b5cf6), cyan (#06b6d4), magenta (#ec4899)
-- **Effects:** Glows, light beams, subtle particles
-
-### Soft Gradient (Consumer Apps, Lifestyle)
-- **Background:** Pastel gradients (lavender→pink, mint→blue)
-- **Text:** Dark purple or navy for contrast
-- **Accents:** Complementary pastels
-- **Effects:** Soft shadows, rounded corners, friendly motion
-
-### Clean Minimal (SaaS, Productivity, B2B)
-- **Background:** White (#ffffff) or light gray (#f8fafc)
-- **Text:** Dark gray (#1f2937) or black
-- **Accents:** Brand color for buttons/highlights
-- **Effects:** Subtle shadows, clean transitions
-
-### Design Tool (Landing Pages, Design Showcases)
-- **Background:** Neutral gray with visible grid
-- **Elements:** Construction indicators (blue rectangles, guides)
-- **Effects:** Light sweeps, element reveals
-- **Frame:** Browser chrome for context
-
----
-
-## Animation Vocabulary
-
-Use these terms when describing animations:
-
-### Basic Animations
-
-| Term | Effect | Best For |
-|------|--------|----------|
-| **Fade** | Opacity 0→1 or 1→0 | Subtle entrances, transitions |
-| **Slide** | Move from off-screen | UI elements, list items |
-| **Scale** | Grow or shrink | Emphasis, entrances |
-| **Spring** | Bouncy with overshoot | Playful, energetic feel |
-| **Ease-out** | Starts fast, slows at end | Natural movement |
-| **Ease-in-out** | Slow start and end | Smooth, polished |
-| **Typewriter** | Characters appear one by one | Text reveals, URLs, code |
-| **Stagger** | Sequential delay between items | Lists, multiple elements |
-| **Morph** | Shape transforms into another | Transformations, transitions |
-| **Pulse** | Scale up/down rhythmically | Drawing attention |
-| **Shake** | Quick horizontal vibration | Impact, emphasis |
-| **Wipe** | Reveal with moving edge | Scene transitions |
-
-### Advanced Animations (from examples)
-
-| Term | Effect | Best For |
-|------|--------|----------|
-| **Word slam** | Word appears with scale overshoot + shake | Bold statements, social videos |
-| **Background flash** | Instant background color change | Scene transitions, energy |
-| **Light sweep** | Diagonal light beam across frame | Dramatic reveals |
-| **Glow/bloom** | Soft light halo around element | Focus, premium feel |
-| **Perspective tilt** | 3D rotation (5-10°) on UI | App mockups, depth |
-| **Cursor trail** | Smooth bezier path for pointer | UI demonstrations |
-| **Click ripple** | Circular pulse on click | Button interactions |
-| **Countdown** | Numbers ticking down | Urgency, timers |
-| **Grid reveal** | Guide lines appear before content | Design tool aesthetic |
-| **Logo assemble** | Logo pieces come together | Brand reveals |
-
-### Timing Guidelines
-
-- **Ultra-fast:** 0.1-0.2s — Word slams, color flashes
-- **Fast:** 0.2-0.3s — Snappy, energetic
-- **Medium:** 0.4-0.6s — Balanced, professional
-- **Slow:** 0.8-1.2s — Dramatic, elegant
-- **Stagger delay:** 0.1-0.2s between items
-- **Hold time:** 0.5-1s — Let important text breathe
-
----
-
-## Scene Planning Template
-
-For each scene, document:
-
-```
-SCENE [number]: [title]
-Script: "[exact voiceover text]"
-Duration: [X seconds]
-Visuals:
-  - [element]: [description]
-  - [element]: [description]
-Animations:
-  - [timing]: [element] [animation type] ([duration], [easing])
-  - [timing]: [element] [animation type] ([duration], [easing])
-Transition to next: [type]
-```
-```
----
-```
-
-## Required Setup - Resemble.ai
-
-Before generating voiceovers, verify the user has credentials configured.
-
-### Check for existing configuration
-
-Check if `.env` file exists with:
-- `RESEMBLE_API_KEY` - The Resemble.ai API token
-- `RESEMBLE_VOICE_UUID` - Voice ID (optional, defaults to `7213a9ea`)
-
-### Prompt for missing credentials
-
-**If RESEMBLE_API_KEY is missing:**
-Ask: "I need your Resemble.ai API key to generate voiceovers. You can get one from https://app.resemble.ai/account/api — please paste your API key:"
-
-**If RESEMBLE_VOICE_UUID is missing:**
-Use the default voice UUID `7213a9ea`. Only ask if they want a different voice.
-
-### Save credentials
-
-1. Create or update `.env` with the provided values
-2. Ensure `.env` is in `.gitignore`
-3. Confirm setup before proceeding
-
-### Credential Security
-
-- NEVER commit API keys to version control
-- NEVER display the full API key back to the user
-- ALWAYS ensure `.env` is in `.gitignore`
-- Store credentials only in `.env`, never hardcoded
-
----
-
-## Captions Behavior
-
-**Captions are DISABLED by default.** Only generate word-level timestamps and caption components when explicitly requested.
-
-### Default (no captions):
-- Generate audio file only
-- Save basic metadata (duration, fps, durationInFrames)
-- Do NOT process timestamps into words
-
-### When user requests captions:
-- User must explicitly ask for "captions", "subtitles", or "word highlighting"
-- Process `audio_timestamps` into word-level data
-- Include caption components in composition
-
----
-
-## Rule Files
-
-Read these for detailed implementation:
-
-- [rules/resemble-setup.md](rules/resemble-setup.md) - API credentials and configuration
-- [rules/resemble-sync-tts.md](rules/resemble-sync-tts.md) - Synchronous TTS generation
-- [rules/resemble-streaming-tts.md](rules/resemble-streaming-tts.md) - Streaming for longer scripts
-- [rules/resemble-voices.md](rules/resemble-voices.md) - Voice selection and management
-- [rules/resemble-remotion-integration.md](rules/resemble-remotion-integration.md) - Audio integration with Remotion
-- [rules/resemble-captions.md](rules/resemble-captions.md) - Synchronized captions
-- [rules/visual-animations.md](rules/visual-animations.md) - Animation patterns and Remotion primitives
-
----
-
-## Quick Reference
-
-### For Educational Tutorial:
-1. Research the topic thoroughly
-2. Adapt language to audience level
-3. Use reveal animations synced to narration
-4. Include visual metaphors and diagrams
-
-### For SaaS Demo:
-1. Understand the feature workflow
-2. Create UI mockups or capture screenshots
-3. Use cursor animations and highlights
-4. Show the result/outcome clearly
-
-### For Product Launch:
-1. Focus on the problem → solution narrative
-2. Use bold typography and brand colors
-3. Keep it punchy — short sentences, fast cuts
-4. End with clear call to action
-
-### For Tutorial / Walkthrough:
-1. Light, clean UI aesthetic
-2. One action per scene — don't rush
-3. Cursor guides the viewer's attention
-4. Show step progress (breadcrumbs, numbers)
-5. Pause on results before moving on
-6. End with success state celebration
-
-### For Social Media Promo:
-1. Lead with one powerful word/phrase
-2. Use word-by-word reveals with impact
-3. Background color transitions add energy
-4. Keep total duration under 30s for best engagement
-5. Square (1080x1080) format for feeds
-
-### For App/Product Showcase:
-1. Choose gradient style (dark dramatic vs soft pastel)
-2. Show UI mockups with slight perspective/tilt
-3. Combine kinetic text with interface demos
-4. Use URL bar typing for web products
-5. Cursor choreography for click demonstrations
-
-### For Landing Page Reveal:
-1. Start with design tool aesthetic (grids, guides)
-2. Use light sweep for dramatic reveal
-3. Show full webpage in browser frame
-4. Highlight specific sections with callouts
-5. End with clear CTA and URL
-
-### For AI/Tech Explainer:
-1. Dark mode aesthetic with neon accents
-2. Show voice/chat UI interactions
-3. Demonstrate integrations with app icon grid
-4. Side-by-side layout: text + interface
-5. Use waveforms and typing indicators for AI feel
-
-## Source
-
-Rewritten for AICUT from [`resemble-ai/remotion-resemble-skill`](https://github.com/resemble-ai/remotion-resemble-skill)
-(MIT), remotion-resemble-ai/SKILL.md. The method is that skill's own; the way it runs is AICUT's.