@biggora/claude-plugins 1.0.0 → 1.1.0

package/src/skills/screen-recording/SKILL.md

@@ -0,0 +1,309 @@
+---
+name: screen-recording
+description: >
+  Autonomous video creation skill for the Agent — creates product demos, presentation videos,
+  UI walkthroughs, and narrated screencasts entirely without user intervention.
+  Use this skill whenever a user asks to: "record a screen", "create a demo video", "make a product video",
+  "create a presentation video", "record a walkthrough", "make a screencast", "automate video creation",
+  "generate a narrated video", or anything involving producing an MP4/video file showing content, UI, or animations.
+  This skill covers the full pipeline: animated frames → video assembly → TTS narration → final MP4.
+  Always trigger this skill for any video generation or screen recording automation task.
+---
+
+# Screen Recording Skill
+
+Autonomous video creation pipeline for the Agent. No user interaction required after initial brief.
+
+## What this skill creates
+
+- **Product demo videos** — animated walkthroughs showing features, UI flows, dashboards
+- **Presentation videos** — slide-style videos with animated content and narration
+- **Screen recordings** — capture of a virtual X11 display (Xvfb) with real browser/app content
+- **Narrated screencasts** — video + TTS voiceover, fully automated
+
+---
+
+## Architecture: 3 Confirmed Approaches
+
+### Approach 1 — Programmatic Animation (RECOMMENDED)
+**Best for**: product demos, feature showcases, presentation videos, marketing videos
+
+Stack: `Pillow` → frame generation → `MoviePy` → video assembly → `pyttsx3+espeak` → narration
+
+**Why preferred**: Fully offline, fast, no browser needed, complete creative control.
+
+### Approach 2 — Virtual Display Recording
+**Best for**: capturing real browser/app interactions, UI walkthroughs with live content
+
+Stack: `Xvfb` (virtual display :99) → `FFmpeg x11grab` → records actual screen content
+
+**Why use**: When you need to show a real running application or website.
+
+### Approach 3 — Hybrid (Approach 1 + 2 combined)
+**Best for**: complex demos mixing animated overlays with real UI screenshots
+
+---
+
+## Quick Start Workflow
+
+### Step 1 — Understand the request
+Determine:
+- What content to show (UI flow, feature list, data visualization, slides)
+- Duration (default: 30–120 seconds)
+- Has narration? (default: yes, using pyttsx3+espeak)
+- Resolution (default: 1280×720 HD)
+- Output format (default: MP4, H.264)
+
+### Step 2 — Choose approach (see decision tree below)
+
+### Step 3 — Generate video (see implementation guides)
+
+### Step 4 — Present the file
+```python
+# Always copy to outputs and use present_files
+import shutil
+shutil.copy("/home/claude/output.mp4", "/mnt/user-data/outputs/demo.mp4")
+```
+
+---
+
+## Decision Tree
+
+```
+User wants a video
+│
+├── Need REAL browser/app on screen?
+│   ├── YES → Approach 2 (Xvfb + x11grab)
+│   └── NO  → Continue
+│
+├── Presentation / slides / feature demo / marketing?
+│   └── YES → Approach 1 (Programmatic, FASTEST)
+│
+└── Mix of real UI + animated overlays?
+    └── YES → Approach 3 (Hybrid)
+```
+
+---
+
+## Implementation: Approach 1 (Programmatic)
+
+Read `references/approach1-programmatic.md` for the full implementation guide.
+
+**Key pattern:**
+```python
+from moviepy import VideoClip, AudioFileClip
+import numpy as np
+from PIL import Image, ImageDraw
+import pyttsx3, subprocess
+
+# 1. Generate TTS
+engine = pyttsx3.init()
+engine.setProperty('rate', 140)  # speaking speed
+engine.save_to_file("Your narration text here", '/tmp/narration.wav')
+engine.runAndWait()
+subprocess.run(['ffmpeg', '-i', '/tmp/narration.wav', '-c:a', 'libmp3lame', 
+                '/tmp/narration.mp3', '-y', '-loglevel', 'quiet'])
+
+# 2. Generate frames
+scenes = build_scene_list()  # list of {duration, draw_fn}
+
+def make_frame(t):
+    img = Image.new('RGB', (1280, 720), BACKGROUND_COLOR)
+    draw = ImageDraw.Draw(img)
+    current_scene(draw, t)  # draw current scene content
+    return np.array(img)
+
+# 3. Assemble
+total_duration = sum(s['duration'] for s in scenes)
+clip = VideoClip(make_frame, duration=total_duration)
+audio = AudioFileClip('/tmp/narration.mp3').with_duration(total_duration)
+final = clip.with_audio(audio)
+final.write_videofile("/home/claude/output.mp4", fps=24, logger=None)
+```
+
+---
+
+## Implementation: Approach 2 (Xvfb + x11grab)
+
+Read `references/approach2-xvfb.md` for the full implementation guide.
+
+**Key pattern:**
+```bash
+# 1. Start virtual display
+Xvfb :99 -screen 0 1280x720x24 &
+XVFB_PID=$!
+
+# 2. Start recording
+DISPLAY=:99 ffmpeg -f x11grab -video_size 1280x720 -i :99 \
+  -c:v libx264 -preset fast -r 24 /home/claude/recording.mp4 &
+FFMPEG_PID=$!
+
+# 3. Run your app/browser on DISPLAY=:99
+DISPLAY=:99 chromium --no-sandbox --headless=new ...
+# OR
+DISPLAY=:99 python3 your_app.py
+
+# 4. Stop recording
+kill $FFMPEG_PID $XVFB_PID
+```
+
+---
+
+## Audio / TTS
+
+### pyttsx3 + espeak-ng (OFFLINE — always works)
+```python
+import pyttsx3
+engine = pyttsx3.init()
+engine.setProperty('rate', 140)   # 100-200, default ~200
+engine.setProperty('volume', 0.9) # 0.0-1.0
+
+# List voices:
+for v in engine.getProperty('voices'):
+    print(v.id, v.name)
+
+engine.save_to_file("Text to speak", '/tmp/out.wav')
+engine.runAndWait()
+```
+Convert WAV→MP3: `ffmpeg -i /tmp/out.wav -c:a libmp3lame /tmp/out.mp3 -y -loglevel quiet`
+
+### Silent video (no narration)
+```python
+# Just skip the audio step, write video without audio
+clip.write_videofile("/home/claude/output.mp4", fps=24, logger=None)
+```
+
+---
+
+## Design System
+
+### Color Palettes (use consistently per video)
+```python
+# Tech/Product (dark)
+BG = (12, 12, 32)          # background
+HEADER = (25, 25, 60)       # header bar
+ACCENT = (60, 120, 255)     # primary accent
+TEXT = (255, 255, 255)      # main text
+SUBTEXT = (150, 150, 200)   # secondary text
+
+# Presentation (light)
+BG = (245, 248, 255)
+HEADER = (30, 60, 180)
+ACCENT = (255, 100, 50)
+TEXT = (20, 20, 40)
+SUBTEXT = (100, 100, 130)
+```
+
+### Standard Resolutions
+- `1280x720` — HD (default, fast)
+- `1920x1080` — Full HD (for high-quality output)
+- `1080x1920` — Vertical (mobile/social)
+
+### Animation Patterns
+```python
+# Smooth ease-in-out (0→1 over duration d, current time t from scene start)
+def ease(t, d): 
+    x = t/d
+    return x*x*(3-2*x)
+
+# Fade in text
+alpha = int(255 * ease(t, 0.5))  # fade over 0.5s
+
+# Slide in from left
+x = int(-500 + 600 * ease(t, 0.8))
+
+# Progress bar
+fill_width = int(max_width * ease(t, d))
+```
+
+---
+
+## Scene Structure Pattern
+
+For multi-scene videos, use a scene list:
+
+```python
+scenes = [
+    {
+        "title": "Intro",
+        "duration": 3,
+        "narration": "Welcome to our product demo.",
+        "draw": draw_intro_scene
+    },
+    {
+        "title": "Feature 1",
+        "duration": 5,
+        "narration": "Our AI detects issues automatically.",
+        "draw": draw_feature1_scene
+    },
+    # ...
+]
+
+# Build timeline
+def make_frame(t):
+    elapsed = 0
+    for scene in scenes:
+        if t < elapsed + scene['duration']:
+            scene_t = t - elapsed
+            scene['draw'](img, draw, scene_t, scene['duration'])
+            return np.array(img)
+        elapsed += scene['duration']
+```
+
+---
+
+## FFmpeg Post-Processing
+
+```bash
+# Add subtitles/captions
+ffmpeg -i input.mp4 -vf "subtitles=subs.srt" output.mp4
+
+# Compress for web
+ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k web.mp4
+
+# GIF (for short demos)
+ffmpeg -i input.mp4 -vf "fps=12,scale=960:-1:flags=lanczos" -loop 0 demo.gif
+
+# Trim
+ffmpeg -i input.mp4 -ss 00:00:05 -t 00:00:30 -c copy trimmed.mp4
+
+# Concatenate multiple clips
+# Create concat.txt: file 'clip1.mp4' \n file 'clip2.mp4'
+ffmpeg -f concat -safe 0 -i concat.txt -c copy combined.mp4
+```
+
+---
+
+## Installation (run once if needed)
+
+```bash
+# Core dependencies (usually pre-installed)
+pip install moviepy pillow opencv-python pyttsx3 --break-system-packages
+
+# Offline TTS engine
+apt-get install -y espeak-ng
+
+# Verify
+python3 -c "from moviepy import VideoClip; import pyttsx3; print('OK')"
+```
+
+---
+
+## Common Pitfalls
+
+| Problem | Solution |
+|---|---|
+| MoviePy `verbose` kwarg error | Use `logger=None` not `verbose=False` |
+| pyttsx3 "no espeak" error | `apt-get install -y espeak-ng` |
+| gTTS/edge-tts connection error | Use pyttsx3+espeak (offline, always works) |
+| Black video output | Check `make_frame` returns `np.array(img)` not `img` |
+| Audio/video length mismatch | Use `.with_duration(video.duration)` on audio clip |
+| Xvfb display conflict | Use `DISPLAY=:99` and kill after recording |
+
+---
+
+## Reference Files
+
+- `references/approach1-programmatic.md` — Full Approach 1 code templates
+- `references/approach2-xvfb.md` — Full Approach 2 (Xvfb) code templates
+- `references/design-patterns.md` — Advanced animations, transitions, UI components

package/src/skills/screen-recording/references/approach1-programmatic.md

@@ -0,0 +1,311 @@
+# Approach 1: Programmatic Video Generation
+
+Full offline pipeline. No browser, no display server needed.
+
+## Full Working Template
+
+```python
+#!/usr/bin/env python3
+"""
+Autonomous Product Demo Video Generator
+Usage: python3 generate_demo.py
+Output: /mnt/user-data/outputs/demo.mp4
+"""
+
+from moviepy import VideoClip, AudioFileClip
+import numpy as np
+from PIL import Image, ImageDraw, ImageFont
+import pyttsx3, subprocess, os, shutil
+
+# ── CONFIG ─────────────────────────────────────────────────────────────────────
+WIDTH, HEIGHT = 1280, 720
+FPS = 24
+OUTPUT_PATH = "/home/claude/demo.mp4"
+FINAL_OUTPUT = "/mnt/user-data/outputs/demo.mp4"
+
+# Color palette (dark tech theme)
+C = {
+    "bg":       (12, 12, 32),
+    "header":   (20, 20, 55),
+    "accent":   (60, 120, 255),
+    "accent2":  (100, 220, 180),
+    "text":     (240, 240, 255),
+    "subtext":  (140, 140, 190),
+    "success":  (60, 200, 100),
+    "warning":  (255, 180, 40),
+    "card":     (25, 28, 60),
+}
+
+# ── SCENES ─────────────────────────────────────────────────────────────────────
+SCENES = [
+    {
+        "id": "intro",
+        "duration": 4,
+        "narration": "Welcome to our product. This demonstration will walk you through the key features.",
+    },
+    {
+        "id": "feature_1",
+        "duration": 5,
+        "narration": "First, our automated detection system identifies issues in real time.",
+    },
+    {
+        "id": "feature_2", 
+        "duration": 5,
+        "narration": "Then, our correction engine applies fixes automatically, saving hours of manual work.",
+    },
+    {
+        "id": "outro",
+        "duration": 4,
+        "narration": "Get started today and transform your workflow. Thank you for watching.",
+    },
+]
+
+TOTAL_DURATION = sum(s["duration"] for s in SCENES)
+
+# ── HELPERS ────────────────────────────────────────────────────────────────────
+def ease(t, d):
+    """Smooth ease-in-out, 0→1 over duration d"""
+    x = max(0, min(1, t / d))
+    return x * x * (3 - 2 * x)
+
+def draw_header(draw, title, subtitle=""):
+    draw.rectangle([0, 0, WIDTH, 72], fill=C["header"])
+    draw.text((32, 16), title, fill=C["text"])
+    if subtitle:
+        draw.text((32, 46), subtitle, fill=C["subtext"])
+    # Header accent line
+    draw.rectangle([0, 72, WIDTH, 75], fill=C["accent"])
+
+def draw_progress_bar(draw, t, duration, y=680, label=""):
+    p = ease(t, duration)
+    draw.rectangle([80, y, WIDTH-80, y+12], outline=C["subtext"], width=1)
+    if p > 0:
+        draw.rectangle([80, y, int(80 + (WIDTH-160) * p), y+12], fill=C["accent"])
+    if label:
+        draw.text((80, y - 22), label, fill=C["subtext"])
+
+def draw_card(draw, x, y, w, h, title, content_lines, highlight=False):
+    color = C["accent"] if highlight else C["card"]
+    draw.rectangle([x, y, x+w, y+h], fill=color if highlight else C["card"], 
+                   outline=C["accent"] if highlight else C["subtext"], width=1)
+    draw.text((x+16, y+14), title, fill=C["text"])
+    for i, line in enumerate(content_lines):
+        draw.text((x+16, y+44+i*26), line, fill=C["subtext"])
+
+# ── SCENE DRAW FUNCTIONS ───────────────────────────────────────────────────────
+def draw_intro(draw, t, d):
+    # Animated title appearance
+    alpha_title = ease(t, 1.0)
+    alpha_sub = ease(max(0, t - 0.5), 1.0)
+    
+    draw_header(draw, "Product Demo", "Automated Video — No Human Required")
+    
+    # Big title
+    title = "Welcome to Our Product"
+    x = int(WIDTH/2 - len(title)*12)
+    y = int(200 + (1 - alpha_title) * 60)
+    draw.text((x, y), title, fill=(
+        int(255 * alpha_title), int(255 * alpha_title), int(255 * alpha_title)))
+    
+    # Subtitle
+    sub = "Transforming workflows with AI automation"
+    x2 = int(WIDTH/2 - len(sub)*7)
+    draw.text((x2, 310), sub, fill=(
+        int(180 * alpha_sub), int(180 * alpha_sub), int(220 * alpha_sub)))
+    
+    # Animated dots
+    for i in range(3):
+        dot_t = (t * 2 + i * 0.4) % 1.5
+        r = int(4 + 4 * ease(dot_t, 0.3))
+        cx = WIDTH//2 - 30 + i * 30
+        draw.ellipse([cx-r, 470-r, cx+r, 470+r], fill=C["accent"])
+    
+    draw_progress_bar(draw, t, d, label="Loading demo...")
+
+
+def draw_feature_1(draw, t, d):
+    draw_header(draw, "Feature 1: Automated Detection", "Real-time issue identification")
+    
+    # Animated list items appearing one by one
+    items = [
+        ("✓", "Scans 10,000+ items per second"),
+        ("✓", "98.7% detection accuracy"),
+        ("✓", "Zero false positives guaranteed"),
+        ("✓", "Works with any input format"),
+    ]
+    for i, (icon, text) in enumerate(items):
+        appear_t = max(0, t - i * 0.8)
+        alpha = ease(appear_t, 0.5)
+        if alpha > 0:
+            y = 180 + i * 80
+            # Card background
+            draw.rectangle([80, y, 900, y+60], 
+                         fill=(int(25*alpha), int(28*alpha), int(60*alpha)),
+                         outline=(int(60*alpha), int(120*alpha), int(255*alpha)), width=1)
+            draw.text((110, y+18), f"{icon} {text}", 
+                     fill=(int(240*alpha), int(240*alpha), int(255*alpha)))
+    
+    # Animated counter
+    count = int(ease(t, d) * 10847)
+    draw.text((950, 250), f"{count:,}", fill=C["accent2"])
+    draw.text((950, 290), "items processed", fill=C["subtext"])
+    
+    draw_progress_bar(draw, t, d, label="Detecting...")
+
+
+def draw_feature_2(draw, t, d):
+    draw_header(draw, "Feature 2: Automated Correction", "One-click fix for all detected issues")
+    
+    # Before/After comparison
+    mid = WIDTH // 2
+    
+    # Before panel
+    before_alpha = max(0, 1 - ease(t, 1.5) * 0.3)
+    draw.rectangle([60, 150, mid-20, 580], fill=C["card"], outline=C["warning"], width=2)
+    draw.text((80, 165), "BEFORE", fill=C["warning"])
+    issues = ["❌ Extra fingers detected", "❌ Proportion mismatch", "❌ Anatomy anomaly", "❌ 3 more issues..."]
+    for i, issue in enumerate(issues):
+        draw.text((80, 210 + i * 50), issue, fill=(200, 180, 100))
+    
+    # Animated arrow
+    arrow_p = ease(max(0, t - 0.5), 1.0)
+    ax = int(mid - 40 + 80 * arrow_p)
+    if arrow_p > 0.1:
+        draw.text((ax, 340), "→", fill=C["accent"])
+    
+    # After panel (appears after animation)
+    after_alpha = ease(max(0, t - 1.5), 1.0)
+    if after_alpha > 0:
+        draw.rectangle([mid+20, 150, WIDTH-60, 580], fill=C["card"], 
+                      outline=(int(60*after_alpha), int(200*after_alpha), int(100*after_alpha)), width=2)
+        draw.text((mid+40, 165), "AFTER", fill=C["success"])
+        fixes = ["✅ Fingers corrected", "✅ Proportions normalized", "✅ Anatomy verified", "✅ All issues resolved"]
+        for i, fix in enumerate(fixes):
+            fix_alpha = ease(max(0, t - 1.5 - i*0.3), 0.4)
+            draw.text((mid+40, 210 + i * 50), fix, 
+                     fill=(int(60*fix_alpha), int(200*fix_alpha), int(100*fix_alpha)))
+    
+    draw_progress_bar(draw, t, d, label="Correcting...")
+
+
+def draw_outro(draw, t, d):
+    draw.rectangle([0, 0, WIDTH, HEIGHT], fill=C["bg"])
+    draw_header(draw, "Get Started Today")
+    
+    p = ease(t, 2.0)
+    
+    # CTA
+    draw.text((WIDTH//2 - 200, 250), "Ready to transform your workflow?", fill=C["text"])
+    
+    # Stats cards
+    stats = [("10x", "Faster"), ("99%", "Accurate"), ("0", "Manual Work")]
+    for i, (val, label) in enumerate(stats):
+        card_p = ease(max(0, t - 0.5 - i * 0.3), 0.5)
+        if card_p > 0:
+            x = 100 + i * 380
+            draw.rectangle([x, 360, x+320, 500], fill=C["card"],
+                         outline=C["accent"], width=int(1 + card_p))
+            draw.text((x + 120, 390), val, fill=C["accent2"])
+            draw.text((x + 120, 440), label, fill=C["subtext"])
+    
+    # Final tagline
+    if t > 2:
+        final_p = ease(t - 2, 1.5)
+        draw.text((WIDTH//2 - 180, 560), "Start your free trial now →",
+                 fill=(int(60*final_p), int(120*final_p), int(255*final_p)))
+
+DRAW_FUNCTIONS = {
+    "intro": draw_intro,
+    "feature_1": draw_feature_1,
+    "feature_2": draw_feature_2,
+    "outro": draw_outro,
+}
+
+# ── MAIN PIPELINE ──────────────────────────────────────────────────────────────
+def generate_video():
+    print("📝 Step 1: Generating TTS narration...")
+    narration_text = " ".join(s["narration"] for s in SCENES)
+    engine = pyttsx3.init()
+    engine.setProperty('rate', 140)
+    engine.save_to_file(narration_text, '/tmp/narration.wav')
+    engine.runAndWait()
+    subprocess.run(['ffmpeg', '-i', '/tmp/narration.wav', '-c:a', 'libmp3lame',
+                    '-b:a', '128k', '/tmp/narration.mp3', '-y', '-loglevel', 'quiet'])
+    print(f"   ✅ Narration: {os.path.getsize('/tmp/narration.mp3'):,} bytes")
+
+    print("🎬 Step 2: Rendering video frames...")
+    # Build timeline
+    timeline = []
+    elapsed = 0
+    for scene in SCENES:
+        timeline.append((elapsed, elapsed + scene["duration"], scene["id"]))
+        elapsed += scene["duration"]
+
+    def make_frame(t):
+        img = Image.new('RGB', (WIDTH, HEIGHT), C["bg"])
+        draw = ImageDraw.Draw(img)
+        for start, end, scene_id in timeline:
+            if start <= t < end:
+                DRAW_FUNCTIONS[scene_id](draw, t - start, end - start)
+                break
+        return np.array(img)
+
+    clip = VideoClip(make_frame, duration=TOTAL_DURATION)
+    print(f"   ✅ Clip: {TOTAL_DURATION}s at {FPS}fps")
+
+    print("🎵 Step 3: Combining video + audio...")
+    audio = AudioFileClip('/tmp/narration.mp3').with_duration(TOTAL_DURATION)
+    final = clip.with_audio(audio)
+    final.write_videofile(OUTPUT_PATH, fps=FPS, logger=None)
+    size = os.path.getsize(OUTPUT_PATH)
+    print(f"   ✅ Video: {size:,} bytes ({size//1024} KB)")
+
+    print("📦 Step 4: Copying to outputs...")
+    os.makedirs(os.path.dirname(FINAL_OUTPUT), exist_ok=True)
+    shutil.copy(OUTPUT_PATH, FINAL_OUTPUT)
+    print(f"   ✅ Saved to: {FINAL_OUTPUT}")
+    
+    return FINAL_OUTPUT
+
+if __name__ == "__main__":
+    result = generate_video()
+    print(f"\n🎉 Done! Video ready at: {result}")
+```
+
+## Tips for Customization
+
+### Adding a logo/watermark
+```python
+# Load image and paste onto frame
+logo = Image.open("/path/to/logo.png").convert("RGBA")
+logo = logo.resize((120, 60))
+img.paste(logo, (WIDTH - 140, 20), logo)
+```
+
+### Screen mockup (fake browser window)
+```python
+def draw_browser_mockup(draw, x, y, w, h, url="https://yourapp.com"):
+    # Chrome bar
+    draw.rectangle([x, y, x+w, y+40], fill=(50, 50, 60))
+    draw.ellipse([x+10, y+12, x+26, y+28], fill=(255, 80, 80))
+    draw.ellipse([x+32, y+12, x+48, y+28], fill=(255, 180, 40))
+    draw.ellipse([x+54, y+12, x+70, y+28], fill=(60, 200, 80))
+    # URL bar
+    draw.rectangle([x+90, y+8, x+w-20, y+32], fill=(35, 35, 45))
+    draw.text((x+100, y+14), url, fill=(180, 180, 200))
+    # Content area
+    draw.rectangle([x, y+40, x+w, y+h], fill=(240, 242, 250))
+```
+
+### Animated typing effect
+```python
+def typing_effect(draw, text, x, y, t, speed=20, color=(240,240,255)):
+    """Shows text appearing character by character"""
+    chars_shown = int(t * speed)
+    visible = text[:chars_shown]
+    draw.text((x, y), visible, fill=color)
+    # Blinking cursor
+    if chars_shown < len(text) and int(t * 4) % 2 == 0:
+        cursor_x = x + chars_shown * 12
+        draw.text((cursor_x, y), "▌", fill=color)
+```