@biggora/claude-plugins 1.1.1 → 1.2.2

package/src/skills/vite-best-practices/references/rolldown-migration.md

@@ -0,0 +1,242 @@
+---
+name: vite-rolldown
+description: Vite 8 Rolldown bundler and Oxc transformer migration from Vite 7
+---
+
+# Rolldown Migration (Vite 8)
+
+Vite 8 (stable March 2026) replaces esbuild+Rollup with Rolldown, a unified Rust-based bundler. Performance gains of 10-30x for production builds are typical.
+
+## What Changed
+
+| Before (Vite 7) | After (Vite 8) | Compat Layer |
+|-----------------|----------------|--------------|
+| esbuild (dev transform) | Oxc Transformer | `esbuild` auto-converts to `oxc` |
+| esbuild (dep pre-bundling) | Rolldown | `esbuildOptions` auto-converts |
+| esbuild (JS minification) | Oxc Minifier | `minify: 'esbuild'` = fallback |
+| esbuild (CSS minification) | Lightning CSS | `cssMinify: 'esbuild'` = fallback |
+| Rollup (production build) | Rolldown | `rollupOptions` auto-converts |
+| `rollupOptions` | `rolldownOptions` | deprecated, auto-converts |
+| `esbuild` option | `oxc` option | deprecated, auto-converts |
+
+**Important:** A compatibility layer auto-converts old config names, so many projects upgrade with zero config changes. However, both `esbuild` and `rollupOptions` are deprecated and will be removed in a future version. Always use the new names in new code.
+
+## Config Migration
+
+### rollupOptions → rolldownOptions
+
+Direct rename. Internal structure (`external`, `output.globals`) stays the same:
+
+```ts
+// Before (Vite 7)
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      external: ['vue'],
+      output: { globals: { vue: 'Vue' } },
+    },
+  },
+})
+
+// After (Vite 8)
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      external: ['vue'],
+      output: { globals: { vue: 'Vue' } },
+    },
+  },
+})
+```
+
+Also applies to `worker.rollupOptions` → `worker.rolldownOptions`.
+
+### esbuild → oxc (JavaScript Transforms)
+
+Complete mapping of esbuild JSX options to Oxc:
+
+| esbuild | oxc equivalent |
+|---------|---------------|
+| `jsx: 'transform'` | `jsx: { runtime: 'classic' }` |
+| `jsx: 'automatic'` | `jsx: { runtime: 'automatic' }` |
+| `jsx: 'preserve'` | `jsx: 'preserve'` |
+| `jsxFactory: 'h'` | `jsx.pragma: 'h'` |
+| `jsxFragment: 'Fragment'` | `jsx.pragmaFrag: 'Fragment'` |
+| `jsxImportSource: 'react'` | `jsx.importSource: 'react'` |
+| `jsxDev` | `jsx.development` |
+| `jsxSideEffects` | `jsx.pure` |
+| `jsxInject` | `jsxInject` (same) |
+| `include`/`exclude` | `include`/`exclude` (same) |
+| `define` | `define` (same) |
+
+**Not supported in Oxc:** `esbuild.supported` option.
+
+**Not supported:** Native decorator lowering — use Babel or SWC plugins.
+
+**Example — Preact classic JSX:**
+
+```ts
+// Before (Vite 7)
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+  },
+})
+
+// After (Vite 8)
+export default defineConfig({
+  oxc: {
+    jsx: {
+      runtime: 'classic',
+      pragma: 'h',
+      pragmaFrag: 'Fragment',
+    },
+  },
+})
+```
+
+**Example — React automatic:**
+
+```ts
+export default defineConfig({
+  oxc: {
+    jsx: {
+      runtime: 'automatic',
+      importSource: 'react',
+    },
+  },
+})
+```
+
+### optimizeDeps.esbuildOptions → optimizeDeps.rolldownOptions
+
+Auto-converted options:
+
+| esbuildOptions | rolldownOptions equivalent |
+|---------------|--------------------------|
+| `minify` | `output.minify` |
+| `treeShaking` | `treeshake` |
+| `define` | `transform.define` |
+| `loader` | `moduleTypes` |
+| `preserveSymlinks` | `!resolve.symlinks` |
+| `resolveExtensions` | `resolve.extensions` |
+| `mainFields` | `resolve.mainFields` |
+| `conditions` | `resolve.conditionNames` |
+| `keepNames` | `output.keepNames` |
+| `platform` | `platform` |
+| `plugins` | `plugins` (partial support) |
+
+### Minification
+
+```ts
+// Vite 8 default: Oxc minifier
+build: { minify: true }  // uses Oxc
+
+// Fallback to esbuild (requires installing esbuild)
+build: { minify: 'esbuild' }
+
+// CSS: Lightning CSS is default
+build: { cssMinify: true }           // uses Lightning CSS
+build: { cssMinify: 'esbuild' }     // fallback (requires esbuild)
+```
+
+**Not supported by Oxc minifier:** `mangleProps`, `reserveProps`, `mangleQuoted`, `mangleCache`.
+
+### esbuild.banner/footer
+
+No direct equivalent. Use a custom plugin with the `transform` hook instead.
+
+## Breaking Changes
+
+### manualChunks
+
+- Object form **removed**
+- Function form **deprecated** → use `codeSplitting` option instead
+
+### CommonJS Interop
+
+The `default` import from CJS modules follows new rules. If the importer is `.mjs`/`.mts`, or the closest `package.json` has `"type": "module"`, or `module.exports.__esModule` is not true, then `default` = `module.exports` (not `module.exports.default`).
+
+Temporary workaround: `legacy.inconsistentCjsInterop: true`.
+
+### Format Sniffing Removed
+
+Vite no longer sniffs file content to choose between `browser` and `module` fields. `resolve.mainFields` order is always respected.
+
+### build() Error Handling
+
+`build()` now throws `BundleError` (not raw error) with `.errors?: RolldownError[]` array.
+
+### Removed Config Options
+
+| Removed | Replacement |
+|---------|-------------|
+| `build.commonjsOptions` | No-op (Rolldown handles CJS natively) |
+| `build.dynamicImportVarsOptions.warnOnError` | No-op |
+| `resolve.alias[].customResolver` | Use custom plugin with `resolveId` hook |
+| `rollupOptions.output.manualChunks` (object form) | Use function form or `codeSplitting` |
+| `rollupOptions.watch.chokidar` | `rolldownOptions.watch.watcher` |
+
+### Unsupported Output Formats
+
+`'system'` and `'amd'` output formats are not supported by Rolldown.
+
+### Node.js Requirements
+
+Node.js 20.19+ or 22.12+ required (same as Vite 7).
+
+## Plugin Compatibility
+
+Most Vite/Rollup plugins work unchanged because Rolldown supports the Rollup plugin API. If a plugin only works during build:
+
+```ts
+{
+  ...rollupPlugin(),
+  enforce: 'post',
+  apply: 'build',
+}
+```
+
+**Note:** `moduleParsed` hook is NOT called during dev. Plugins relying on it need adjustment.
+
+Detect Rolldown at runtime: `this.meta.rolldownVersion`.
+
+## Gradual Migration
+
+For large projects, migrate via `rolldown-vite` first:
+
+```bash
+# Step 1: Test with rolldown-vite (still Vite 7)
+pnpm add -D rolldown-vite
+
+# Replace vite import in config
+import { defineConfig } from 'rolldown-vite'
+
+# Step 2: Once stable, upgrade to Vite 8
+pnpm add -D vite@8
+
+# Revert the import
+import { defineConfig } from 'vite'
+```
+
+## Overriding Vite in Frameworks
+
+When framework depends on older Vite:
+
+```json
+{
+  "pnpm": {
+    "overrides": {
+      "vite": "8.0.0"
+    }
+  }
+}
+```
+
+<!--
+Source references:
+- https://vite.dev/blog/announcing-vite8
+- https://vite.dev/guide/migration
+- https://vite.dev/config/shared-options#oxc
+-->

package/src/skills/screen-recording/references/approach2-xvfb.md

@@ -1,232 +0,0 @@
-# Approach 2: Virtual Display Recording (Xvfb + FFmpeg x11grab)
-
-Capture a real running application on a virtual screen.
-
-## How It Works
-
-```
-Xvfb :99  ←── virtual display (invisible, in RAM)
-    ↑
-Your app runs here (DISPLAY=:99)
-    ↓
-FFmpeg x11grab ←── records the virtual display → MP4
-```
-
-## Full Working Template
-
-```python
-#!/usr/bin/env python3
-"""
-Virtual Display Screen Recorder
-Launches a real app on a virtual display and records it.
-"""
-
-import subprocess, os, time, signal, shutil
-
-WIDTH, HEIGHT = 1280, 720
-DISPLAY_NUM = ":99"
-FPS = 24
-DURATION = 30  # seconds to record
-OUTPUT = "/home/claude/recording.mp4"
-
-
-def start_virtual_display():
-    """Start Xvfb virtual display"""
-    proc = subprocess.Popen([
-        "Xvfb", DISPLAY_NUM,
-        "-screen", "0", f"{WIDTH}x{HEIGHT}x24",
-        "-ac", "-nolisten", "tcp"
-    ], stderr=subprocess.DEVNULL)
-    time.sleep(1.0)  # wait for display to initialize
-    print(f"✅ Virtual display {DISPLAY_NUM} started (PID {proc.pid})")
-    return proc
-
-
-def start_recording(output_path, duration=None):
-    """Start FFmpeg recording of virtual display"""
-    cmd = [
-        "ffmpeg",
-        "-f", "x11grab",
-        "-video_size", f"{WIDTH}x{HEIGHT}",
-        "-framerate", str(FPS),
-        "-i", DISPLAY_NUM,
-        "-c:v", "libx264",
-        "-preset", "ultrafast",
-        "-pix_fmt", "yuv420p",
-    ]
-    if duration:
-        cmd.extend(["-t", str(duration)])
-    cmd.extend([output_path, "-y", "-loglevel", "quiet"])
-    
-    proc = subprocess.Popen(cmd)
-    time.sleep(0.5)
-    print(f"✅ Recording started → {output_path}")
-    return proc
-
-
-def run_app_on_display(app_command, env_extra=None):
-    """Run an application on the virtual display"""
-    env = os.environ.copy()
-    env["DISPLAY"] = DISPLAY_NUM
-    if env_extra:
-        env.update(env_extra)
-    proc = subprocess.Popen(app_command, env=env, stderr=subprocess.DEVNULL)
-    return proc
-
-
-def record_session(app_fn, duration=30, output=OUTPUT):
-    """
-    Full recording session:
-    1. Start virtual display
-    2. Start recording
-    3. Run app_fn(display) — your automation code
-    4. Stop recording, stop display
-    """
-    xvfb = start_virtual_display()
-    recorder = start_recording(output, duration)
-    
-    try:
-        app_fn(DISPLAY_NUM)
-        # Wait remaining time or until done
-        time.sleep(duration)
-    finally:
-        recorder.send_signal(signal.SIGINT)
-        recorder.wait()
-        xvfb.terminate()
-        xvfb.wait()
-        print(f"✅ Recording saved: {os.path.getsize(output):,} bytes")
-    
-    return output
-
-
-# ── EXAMPLE: Record a Python Tkinter app ─────────────────────────────────────
-
-def my_tkinter_app_script():
-    return '''
-import tkinter as tk
-import time
-
-root = tk.Tk()
-root.title("My App Demo")
-root.geometry("1280x720")
-root.configure(bg="#0c0c20")
-
-label = tk.Label(root, text="Loading...", font=("Arial", 48), 
-                 bg="#0c0c20", fg="white")
-label.pack(pady=200)
-
-def update():
-    texts = ["Detecting issues...", "Processing...", "✅ Complete!", "100% Accurate"]
-    for i, t in enumerate(texts):
-        root.after(i * 2000, lambda t=t: label.configure(text=t))
-    root.after(8000, root.destroy)
-
-root.after(500, update)
-root.mainloop()
-'''
-
-def run_demo(display):
-    # Write app to temp file
-    with open('/tmp/demo_app.py', 'w') as f:
-        f.write(my_tkinter_app_script())
-    
-    env = os.environ.copy()
-    env["DISPLAY"] = display
-    subprocess.Popen(["python3", "/tmp/demo_app.py"], env=env)
-    time.sleep(10)  # let app run
-
-
-# ── EXAMPLE: Record a Chromium browser session ───────────────────────────────
-
-def record_browser(url, duration=20, output=OUTPUT):
-    """Record a browser navigating to a URL"""
-    xvfb = start_virtual_display()
-    recorder = start_recording(output, duration)
-    
-    env = os.environ.copy()
-    env["DISPLAY"] = DISPLAY_NUM
-    
-    # Launch Chromium in window mode (not headless — we WANT it visible)
-    subprocess.Popen([
-        "chromium", "--no-sandbox",
-        f"--window-size={WIDTH},{HEIGHT}",
-        "--window-position=0,0",
-        "--start-maximized",
-        url
-    ], env=env, stderr=subprocess.DEVNULL)
-    
-    time.sleep(duration)
-    recorder.send_signal(signal.SIGINT)
-    recorder.wait()
-    xvfb.terminate()
-    print(f"✅ Browser recording saved: {output}")
-    return output
-
-
-# ── POST-PROCESSING ───────────────────────────────────────────────────────────
-
-def add_narration(video_path, narration_text, output_path):
-    """Add TTS narration to a recorded video"""
-    import pyttsx3
-    
-    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'
-    ])
-    
-    subprocess.run([
-        'ffmpeg', '-i', video_path, '-i', '/tmp/narration.mp3',
-        '-c:v', 'copy', '-c:a', 'aac',
-        '-shortest', output_path, '-y', '-loglevel', 'quiet'
-    ])
-    return output_path
-
-
-def add_overlay_text(video_path, text, position="bottom", output_path=None):
-    """Add text overlay to recorded video using FFmpeg"""
-    if not output_path:
-        output_path = video_path.replace('.mp4', '_overlay.mp4')
-    
-    if position == "bottom":
-        vf = f"drawtext=text='{text}':fontcolor=white:fontsize=24:x=(w-text_w)/2:y=h-th-20:box=1:boxcolor=black@0.5"
-    else:
-        vf = f"drawtext=text='{text}':fontcolor=white:fontsize=24:x=20:y=20"
-    
-    subprocess.run([
-        'ffmpeg', '-i', video_path, '-vf', vf,
-        output_path, '-y', '-loglevel', 'quiet'
-    ])
-    return output_path
-
-
-if __name__ == "__main__":
-    result = record_session(run_demo, duration=12, output=OUTPUT)
-    # Add narration
-    final = add_narration(result, "This is our automated UI demo.", 
-                          "/home/claude/final_recording.mp4")
-    shutil.copy(final, "/mnt/user-data/outputs/recording.mp4")
-    print(f"🎉 Done: /mnt/user-data/outputs/recording.mp4")
-```
-
-## When to Use This Approach
-
-✅ When you need to show a REAL running application
-✅ When demonstrating web UI (real browser rendering)
-✅ When the app has complex visual state hard to reproduce with Pillow
-
-❌ Don't use for simple text/graphic demos (too slow — use Approach 1)
-❌ Avoid if network access to the app is needed (may be blocked)
-
-## Important Notes
-
-- Xvfb uses RAM for the framebuffer — 1280x720x24 ≈ 3.5MB per frame
-- Always kill both `ffmpeg` and `Xvfb` in a `finally` block to avoid orphan processes
-- Use `DISPLAY=:99` not `:0` to avoid conflicts with any host display
-- FFmpeg's `-preset ultrafast` is recommended for real-time capture
-- For longer recordings (>60s), consider `-crf 28` to reduce file size