@vibeo/cli 0.1.2 → 0.3.0

package/src/commands/create.ts

@@ -3,7 +3,7 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { existsSync } from "node:fs";
 
 // ---------------------------------------------------------------------------
-// Embedded templates (so `create` works from npm without the examples/ dir)
+// Embedded templates
 // ---------------------------------------------------------------------------
 
 const TEMPLATE_BASIC = `import React from "react";
@@ -214,112 +214,31 @@ export function Root() {
 // ---------------------------------------------------------------------------
 
 const TEMPLATES: Record<string, { description: string; source: string }> = {
-  basic: {
-    description: "Minimal composition with text animation and two scenes",
-    source: TEMPLATE_BASIC,
-  },
-  "audio-reactive": {
-    description: "Audio visualization with frequency bars and amplitude-driven effects",
-    source: TEMPLATE_AUDIO_REACTIVE,
-  },
-  transitions: {
-    description: "Scene transitions (fade, slide) between multiple scenes",
-    source: TEMPLATE_TRANSITIONS,
-  },
-  subtitles: {
-    description: "Video with SRT subtitle overlay",
-    source: TEMPLATE_SUBTITLES,
-  },
+  basic: { description: "Minimal composition with text animation and two scenes", source: TEMPLATE_BASIC },
+  "audio-reactive": { description: "Audio visualization with frequency bars", source: TEMPLATE_AUDIO_REACTIVE },
+  transitions: { description: "Scene transitions (fade, slide)", source: TEMPLATE_TRANSITIONS },
+  subtitles: { description: "Video with SRT subtitle overlay", source: TEMPLATE_SUBTITLES },
 };
 
-interface CreateArgs {
-  name: string;
-  template: string;
-}
-
-function parseArgs(args: string[]): CreateArgs {
-  const result: CreateArgs = { name: "", template: "basic" };
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]!;
-    const next = args[i + 1];
-
-    if (arg === "--template" && next) {
-      result.template = next;
-      i++;
-    } else if (arg.startsWith("--template=")) {
-      result.template = arg.slice("--template=".length);
-    } else if (arg === "--help" || arg === "-h") {
-      printHelp();
-      process.exit(0);
-    } else if (!arg.startsWith("-") && !result.name) {
-      result.name = arg;
-    }
-  }
-
-  return result;
-}
-
-function printHelp(): void {
-  console.log(`
-vibeo create - Create a new Vibeo project
-
-Usage:
-  vibeo create <project-name> [options]
-
-Options:
-  --template <name>   Template to use (default: basic)
-  --help              Show this help
-
-Templates:`);
+export const TEMPLATE_NAMES = Object.keys(TEMPLATES);
 
-  for (const [name, { description }] of Object.entries(TEMPLATES)) {
-    console.log(`  ${name.padEnd(18)} ${description}`);
-  }
+export async function createProject(
+  name: string,
+  template: string,
+): Promise<{ project: string; template: string; files: string[] }> {
+  const tmpl = TEMPLATES[template];
+  if (!tmpl) throw new Error(`Unknown template: ${template}`);
 
-  console.log(`
-Examples:
-  vibeo create my-video
-  vibeo create music-viz --template audio-reactive
-  vibeo create intro --template transitions
-`);
-}
-
-export async function createCommand(args: string[]): Promise<void> {
-  const parsed = parseArgs(args);
-
-  if (!parsed.name) {
-    console.error("Error: project name is required\n");
-    printHelp();
-    process.exit(1);
-  }
-
-  const template = TEMPLATES[parsed.template];
-  if (!template) {
-    console.error(`Error: unknown template "${parsed.template}"`);
-    console.error(`Available: ${Object.keys(TEMPLATES).join(", ")}`);
-    process.exit(1);
-  }
+  const projectDir = resolve(name);
+  if (existsSync(projectDir)) throw new Error(`Directory "${name}" already exists`);
 
-  const projectDir = resolve(parsed.name);
-  if (existsSync(projectDir)) {
-    console.error(`Error: directory "${parsed.name}" already exists`);
-    process.exit(1);
-  }
-
-  console.log(`\nCreating Vibeo project: ${parsed.name}`);
-  console.log(`Template: ${parsed.template}\n`);
-
-  // Create project structure
   await mkdir(join(projectDir, "src"), { recursive: true });
   await mkdir(join(projectDir, "public"), { recursive: true });
 
-  // Write template source
-  await writeFile(join(projectDir, "src", "index.tsx"), template.source);
+  await writeFile(join(projectDir, "src", "index.tsx"), tmpl.source);
 
-  // Write package.json
   const pkg = {
-    name: parsed.name,
+    name,
     version: "0.0.1",
     private: true,
     type: "module",
@@ -347,7 +266,6 @@ export async function createCommand(args: string[]): Promise<void> {
   };
   await writeFile(join(projectDir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
 
-  // Write tsconfig.json
   const tsconfig = {
     compilerOptions: {
       target: "ES2022",
@@ -366,29 +284,8 @@ export async function createCommand(args: string[]): Promise<void> {
   };
   await writeFile(join(projectDir, "tsconfig.json"), JSON.stringify(tsconfig, null, 2) + "\n");
 
-  // Write .gitignore
-  await writeFile(
-    join(projectDir, ".gitignore"),
-    `node_modules/
-dist/
-out/
-*.tmp
-.DS_Store
-`,
-  );
+  await writeFile(join(projectDir, ".gitignore"), "node_modules/\ndist/\nout/\n*.tmp\n.DS_Store\n");
 
-  console.log(`  Created ${parsed.name}/`);
-  console.log(`  ├── src/index.tsx`);
-  console.log(`  ├── public/`);
-  console.log(`  ├── package.json`);
-  console.log(`  ├── tsconfig.json`);
-  console.log(`  └── .gitignore`);
-
-  console.log(`
-Next steps:
-  cd ${parsed.name}
-  bun install
-  bun run dev        # preview in browser
-  bun run build      # render to video
-`);
+  const files = ["src/index.tsx", "package.json", "tsconfig.json", ".gitignore", "public/"];
+  return { project: name, template, files };
 }

package/src/commands/install-skills.ts

@@ -0,0 +1,246 @@
+import { resolve, join, dirname } from "node:path";
+import { mkdir, writeFile, readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { homedir } from "node:os";
+
+// ---------------------------------------------------------------------------
+// Embedded skill content (so it works from npm without the skills/ dir)
+// ---------------------------------------------------------------------------
+
+async function loadSkills(): Promise<Record<string, string>> {
+  // Try to load from the repo's skills/ directory first
+  const candidates = [
+    join(dirname(import.meta.url.replace("file://", "")), "../../../../skills"),
+    join(process.cwd(), "skills"),
+  ];
+
+  for (const dir of candidates) {
+    const names = ["vibeo-core", "vibeo-audio", "vibeo-effects", "vibeo-extras", "vibeo-rendering"];
+    const skills: Record<string, string> = {};
+    let found = true;
+
+    for (const name of names) {
+      const path = join(dir, name, "SKILL.md");
+      if (existsSync(path)) {
+        skills[name] = await readFile(path, "utf-8");
+      } else {
+        found = false;
+        break;
+      }
+    }
+
+    if (found) return skills;
+  }
+
+  // Fallback: generate a minimal combined skill from --llms-full output
+  return {
+    vibeo: getEmbeddedSkill(),
+  };
+}
+
+function getEmbeddedSkill(): string {
+  return `# Vibeo — React Video Framework
+
+Vibeo is a React-based programmatic video framework. Write video compositions as React components, preview in the browser, and render to video with FFmpeg.
+
+## Quick Reference
+
+\`\`\`bash
+# Get full CLI docs
+bunx @vibeo/cli --llms-full
+
+# Create a project
+bunx @vibeo/cli create my-video --template basic
+
+# Preview
+bunx @vibeo/cli preview --entry src/index.tsx
+
+# Render
+bunx @vibeo/cli render --entry src/index.tsx --composition MyComp
+
+# List compositions
+bunx @vibeo/cli list --entry src/index.tsx
+\`\`\`
+
+## Packages
+
+- \`@vibeo/core\` — Composition, Sequence, Loop, useCurrentFrame, useVideoConfig, interpolate, easing
+- \`@vibeo/audio\` — Audio/Video components, 48kHz sync, volume curves, audio mixing
+- \`@vibeo/effects\` — useKeyframes, useSpring, Transition (fade/wipe/slide/dissolve), useAudioData
+- \`@vibeo/extras\` — Subtitle (SRT/VTT), AudioWaveform, AudioSpectrogram, SceneGraph, AudioMix
+- \`@vibeo/player\` — Interactive Player component with controls
+- \`@vibeo/renderer\` — Headless rendering via Playwright + FFmpeg
+- \`@vibeo/cli\` — CLI with incur (supports --llms, --mcp, --schema)
+
+## Core Pattern
+
+\`\`\`tsx
+import { Composition, Sequence, VibeoRoot, useCurrentFrame, useVideoConfig, interpolate } from "@vibeo/core";
+
+function MyScene() {
+  const frame = useCurrentFrame();
+  const { width, height, fps } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  return <div style={{ width, height, opacity }}>Hello</div>;
+}
+
+export function Root() {
+  return (
+    <VibeoRoot>
+      <Composition id="MyComp" component={MyScene} width={1920} height={1080} fps={30} durationInFrames={150} />
+    </VibeoRoot>
+  );
+}
+\`\`\`
+
+## Key Math
+
+- Frame to time: \`time = frame / fps\`
+- Samples per frame (audio): \`(48000 * 2) / fps\`
+- Media time with playback rate: uses interpolation with rate scaling
+- Sequence relative frame: \`absoluteFrame - (cumulatedFrom + relativeFrom)\`
+- Loop iteration: \`floor(currentFrame / durationInFrames)\`
+
+For full API details, run \`bunx @vibeo/cli --llms-full\` or \`bunx @vibeo/cli <command> --schema\`.
+`;
+}
+
+// ---------------------------------------------------------------------------
+// LLM tool targets
+// ---------------------------------------------------------------------------
+
+interface Target {
+  name: string;
+  description: string;
+  install: (skills: Record<string, string>, cwd: string) => Promise<string[]>;
+}
+
+const home = homedir();
+
+const TARGETS: Target[] = [
+  {
+    name: "claude",
+    description: "Claude Code (~/.claude/skills/ + project CLAUDE.md)",
+    async install(skills, cwd) {
+      const files: string[] = [];
+
+      // Global skills directory
+      const globalDir = join(home, ".claude", "skills");
+      await mkdir(globalDir, { recursive: true });
+      for (const [name, content] of Object.entries(skills)) {
+        const path = join(globalDir, `${name}.md`);
+        await writeFile(path, content);
+        files.push(path);
+      }
+
+      // Project-level .claude/skills/
+      const projectDir = join(cwd, ".claude", "skills");
+      await mkdir(projectDir, { recursive: true });
+      for (const [name, content] of Object.entries(skills)) {
+        const path = join(projectDir, `${name}.md`);
+        await writeFile(path, content);
+        files.push(path);
+      }
+
+      return files;
+    },
+  },
+  {
+    name: "codex",
+    description: "OpenAI Codex CLI (project AGENTS.md)",
+    async install(skills, cwd) {
+      const combined = Object.values(skills).join("\n\n---\n\n");
+      const path = join(cwd, "AGENTS.md");
+      const header = "# Vibeo — Agent Instructions\n\nThis file is auto-generated by `vibeo install-skills`. It helps Codex CLI understand the Vibeo framework.\n\n";
+      await writeFile(path, header + combined);
+      return [path];
+    },
+  },
+  {
+    name: "cursor",
+    description: "Cursor (.cursor/rules/*.mdc)",
+    async install(skills, cwd) {
+      const dir = join(cwd, ".cursor", "rules");
+      await mkdir(dir, { recursive: true });
+      const files: string[] = [];
+      for (const [name, content] of Object.entries(skills)) {
+        const mdcContent = `---\ndescription: ${name} skill for Vibeo video framework\nglobs: **/*.{ts,tsx}\nalwaysApply: false\n---\n\n${content}`;
+        const path = join(dir, `${name}.mdc`);
+        await writeFile(path, mdcContent);
+        files.push(path);
+      }
+      return files;
+    },
+  },
+  {
+    name: "gemini",
+    description: "Gemini CLI (GEMINI.md)",
+    async install(skills, cwd) {
+      const combined = Object.values(skills).join("\n\n---\n\n");
+      const path = join(cwd, "GEMINI.md");
+      const header = "# Vibeo — Gemini Instructions\n\nThis file is auto-generated by `vibeo install-skills`. It helps Gemini CLI understand the Vibeo framework.\n\n";
+      await writeFile(path, header + combined);
+      return [path];
+    },
+  },
+  {
+    name: "opencode",
+    description: "OpenCode (AGENTS.md)",
+    async install(skills, cwd) {
+      // OpenCode also reads AGENTS.md — same as codex, but we don't double-write
+      const path = join(cwd, "AGENTS.md");
+      if (existsSync(path)) return []; // Already written by codex target
+      const combined = Object.values(skills).join("\n\n---\n\n");
+      const header = "# Vibeo — Agent Instructions\n\nThis file is auto-generated by `vibeo install-skills`. It helps AI agents understand the Vibeo framework.\n\n";
+      await writeFile(path, header + combined);
+      return [path];
+    },
+  },
+  {
+    name: "aider",
+    description: "Aider (.aider.conf.yml conventions file reference)",
+    async install(skills, cwd) {
+      const combined = Object.values(skills).join("\n\n---\n\n");
+      const path = join(cwd, ".aider.vibeo.md");
+      await writeFile(path, combined);
+      return [path];
+    },
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export async function installSkills(
+  targets: string[],
+  cwd: string,
+): Promise<{ installed: Record<string, string[]> }> {
+  const skills = await loadSkills();
+  const installed: Record<string, string[]> = {};
+
+  const selectedTargets =
+    targets.length === 0
+      ? TARGETS // all
+      : TARGETS.filter((t) => targets.includes(t.name));
+
+  if (selectedTargets.length === 0) {
+    throw new Error(
+      `No matching targets. Available: ${TARGETS.map((t) => t.name).join(", ")}`,
+    );
+  }
+
+  for (const target of selectedTargets) {
+    const files = await target.install(skills, cwd);
+    if (files.length > 0) {
+      installed[target.name] = files;
+    }
+  }
+
+  return { installed };
+}
+
+export const AVAILABLE_TARGETS = TARGETS.map((t) => ({
+  name: t.name,
+  description: t.description,
+}));

package/src/commands/list.ts

@@ -1,49 +1,6 @@
-import { resolve } from "node:path";
 import { bundle } from "@vibeo/renderer";
 import { launchBrowser, createPage, closeBrowser } from "@vibeo/renderer";
 
-interface ListArgs {
-  entry: string;
-}
-
-function parseArgs(args: string[]): ListArgs {
-  const result: ListArgs = {
-    entry: "",
-  };
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]!;
-    const next = args[i + 1];
-
-    if (arg === "--entry" && next) {
-      result.entry = next;
-      i++;
-    } else if (arg.startsWith("--entry=")) {
-      result.entry = arg.slice("--entry=".length);
-    } else if (arg === "--help" || arg === "-h") {
-      printHelp();
-      process.exit(0);
-    }
-  }
-
-  return result;
-}
-
-function printHelp(): void {
-  console.log(`
-vibeo list - List registered compositions
-
-Usage:
-  vibeo list --entry <path>
-
-Required:
-  --entry <path>    Path to the root file with compositions
-
-Options:
-  --help            Show this help
-`);
-}
-
 interface CompositionMeta {
   id: string;
   width: number;
@@ -52,21 +9,7 @@ interface CompositionMeta {
   durationInFrames: number;
 }
 
-/**
- * Bundle the entry, launch a browser to evaluate it,
- * extract registered compositions, and print a table.
- */
-export async function listCommand(args: string[]): Promise<void> {
-  const parsed = parseArgs(args);
-
-  if (!parsed.entry) {
-    console.error("Error: --entry is required");
-    printHelp();
-    process.exit(1);
-  }
-
-  const entry = resolve(parsed.entry);
-
+export async function listCompositions(entry: string): Promise<CompositionMeta[]> {
   console.log(`Bundling ${entry}...`);
   const bundleResult = await bundle(entry);
 
@@ -75,11 +18,8 @@ export async function listCommand(args: string[]): Promise<void> {
     const page = await createPage(browser, 1920, 1080);
 
     await page.goto(bundleResult.url, { waitUntil: "networkidle" });
-
-    // Wait briefly for React to register compositions
     await page.waitForTimeout(2000);
 
-    // Extract composition data from the page
     const compositions = await page.evaluate(() => {
       const win = window as typeof window & {
         vibeo_getCompositions?: () => CompositionMeta[];
@@ -93,44 +33,8 @@ export async function listCommand(args: string[]): Promise<void> {
     await page.close();
     await closeBrowser();
 
-    if (compositions.length === 0) {
-      console.log("\nNo compositions found.");
-      console.log(
-        "Make sure your entry file exports compositions via <Composition /> components.",
-      );
-      return;
-    }
-
-    // Print table
-    console.log("\nRegistered compositions:\n");
-    console.log(
-      padRight("ID", 25) +
-        padRight("Width", 8) +
-        padRight("Height", 8) +
-        padRight("FPS", 6) +
-        padRight("Frames", 8) +
-        "Duration",
-    );
-    console.log("-".repeat(70));
-
-    for (const comp of compositions) {
-      const duration = (comp.durationInFrames / comp.fps).toFixed(1) + "s";
-      console.log(
-        padRight(comp.id, 25) +
-          padRight(String(comp.width), 8) +
-          padRight(String(comp.height), 8) +
-          padRight(String(comp.fps), 6) +
-          padRight(String(comp.durationInFrames), 8) +
-          duration,
-      );
-    }
-
-    console.log();
+    return compositions;
   } finally {
     await bundleResult.cleanup();
   }
 }
-
-function padRight(str: string, len: number): string {
-  return str.length >= len ? str : str + " ".repeat(len - str.length);
-}

package/src/commands/preview.ts

@@ -1,70 +1,6 @@
-import { resolve } from "node:path";
 import { bundle } from "@vibeo/renderer";
 
-interface PreviewArgs {
-  entry: string;
-  port: number;
-}
-
-function parseArgs(args: string[]): PreviewArgs {
-  const result: PreviewArgs = {
-    entry: "",
-    port: 3000,
-  };
-
-  for (let i = 0; i < args.length; i++) {
-    const arg = args[i]!;
-    const next = args[i + 1];
-
-    if (arg === "--entry" && next) {
-      result.entry = next;
-      i++;
-    } else if (arg.startsWith("--entry=")) {
-      result.entry = arg.slice("--entry=".length);
-    } else if (arg === "--port" && next) {
-      result.port = parseInt(next, 10);
-      i++;
-    } else if (arg.startsWith("--port=")) {
-      result.port = parseInt(arg.slice("--port=".length), 10);
-    } else if (arg === "--help" || arg === "-h") {
-      printHelp();
-      process.exit(0);
-    }
-  }
-
-  return result;
-}
-
-function printHelp(): void {
-  console.log(`
-vibeo preview - Start a dev server with live preview
-
-Usage:
-  vibeo preview --entry <path> [options]
-
-Required:
-  --entry <path>    Path to the root file with compositions
-
-Options:
-  --port <number>   Port for the dev server (default: 3000)
-  --help            Show this help
-`);
-}
-
-/**
- * Start a dev server hosting the Player with hot reload.
- */
-export async function previewCommand(args: string[]): Promise<void> {
-  const parsed = parseArgs(args);
-
-  if (!parsed.entry) {
-    console.error("Error: --entry is required");
-    printHelp();
-    process.exit(1);
-  }
-
-  const entry = resolve(parsed.entry);
-
+export async function startPreview(entry: string, _port: number): Promise<void> {
   console.log(`Starting preview server...`);
   console.log(`  Entry: ${entry}`);
 
@@ -73,7 +9,6 @@ export async function previewCommand(args: string[]): Promise<void> {
   console.log(`\n  Preview running at ${bundleResult.url}`);
   console.log(`  Press Ctrl+C to stop\n`);
 
-  // Keep the process alive until interrupted
   const shutdown = async () => {
     console.log("\nShutting down preview server...");
     await bundleResult.cleanup();