video-edit

Cockpit-native video editing via Remotion. Routes user video-compose/render intents into a VideoComposition generative-UI shape that previews the composition structure, shows install status, and exposes render/save controls.

This skill scaffolds gracefully: if ~/projects/snappy-remotion is not present, the shape renders a pre-flight card explaining what to install. Once installed, it exposes real composition listing, rendering, and preview.

Install path

Remotion must be scaffolded once before renders work:

npx tsx ~/projects/snappy-os/state/lib/remotion.ts scaffold
# installs: ~/projects/snappy-remotion with 5 starter compositions

Dependencies (already declared in state/lib/remotion.ts):

{
  "remotion": "^4",
  "@remotion/cli": "^4",
  "@remotion/player": "^4",
  "react": "^18",
  "react-dom": "^18"
}

These live in the sibling ~/projects/snappy-remotion project, NOT in snappy-chat. The cockpit renders composition metadata; actual rendering runs via npx remotion render in that project.

Steps

1. Receive a video-compose intent (e.g. "compose a title card clip", "edit the welcome video", "render QuoteCard to mp4").
2. Check ~/projects/snappy-remotion/package.json exists - if not, emit VideoComposition with installed: false + install instructions.
3. If installed: call listCompositions() from state/lib/remotion.ts to enumerate available compositions.
4. Match intent to a composition ID (or propose a new one via addComposition()).
5. Emit VideoComposition shape with: name, description, format, duration, fps, status: "ready"|"not-installed", previewUrl (if Remotion Studio is running), compositions[].
6. If render was requested: call render(compositionId, props, opts) from state/lib/remotion.ts - returns path to output MP4.
7. If save-artifact was requested: POST rendered MP4 path to /artifacts endpoint.

VideoComposition shape contract

The server emits this via emitTriple("VideoComposition", payload) for intents matching:

• compose.*video, create.*video, edit.*video (composition intents)
• render.*mp4, render.*video, export.*video (render intents)
• list.*video.*project, my video project, video.*clip, remotion.*clip (list/browse intents)
• what video tool, video tool available (discovery intents)

Payload shape:

{
  status: "ready" | "not-installed";
  compositions: Array<{id: string; format: string; fps: number; frames: number}>;
  selected?: string;
  previewUrl?: string;
  renderOutput?: string;
  installCommand?: string;
}

Eval

Manual. Criteria:

• Shape renders without console error
• status: "not-installed" shows install instructions when snappy-remotion absent
• status: "ready" lists real compositions from Root.tsx
• Render path produces an MP4 at the stated output path

Gotchas

• Remotion project lives at ~/projects/snappy-remotion, NOT inside snappy-chat. Never npm install remotion in snappy-chat.
• Remotion Studio (preview server) runs on port 3000. The cockpit's head-screen server is on 3147. No port collision.
• render() can take 30-120s for a 150-frame clip. Emit a ProgressList shape before calling render; follow up with VideoPreview once the MP4 path is returned.
• addComposition() requires PascalCase names. Validate before calling.
• The VideoComposition shape in genui-library.tsx is a defineComponent wrapper. It is NOT a real Remotion <Player> - it shows composition metadata. The actual playback stays in VideoPreview (HTML5 video pointing at the rendered MP4).

video-edit - loader

Per-turn rules for video editing via Remotion. Full reference: state/skills/video-edit/SKILL.md.

Critical Rules

1. Never install Remotion inside snappy-chat. Remotion and its deps (@remotion/cli, @remotion/player) belong in ~/projects/snappy-remotion (scaffolded via state/lib/remotion.ts). Installing inside snappy-chat bloats the bundle and may conflict with Vite's React setup.

1. Preflight before any operation. Check existsSync("~/projects/snappy-remotion/package.json"). If absent, emit VideoComposition with status: "not-installed" and installCommand: "npx tsx ~/projects/snappy-os/state/lib/remotion.ts scaffold".

1. VideoComposition shape = metadata, not a player. The shape shows composition list, format, duration, and install status. Actual video playback uses VideoPreview pointing at the rendered MP4 file path.

1. Render is slow. Always emit a ProgressList shape first, call render(), then emit VideoPreview with the resulting MP4 path. Do not emit a VideoPreview before the render completes.

1. Save-artifact after render. After a successful render, call save_artifact({name, shape_name: "VideoPreview", shape_args: {src: outputPath}, intent}) to persist it in the cockpit artifacts store.

1. Composition names must be PascalCase. Validate with /^[A-Z][a-zA-Z0-9]+$/ before calling addComposition(). Reject invalid names with a clear error.

1. Remotion Studio conflict. Remotion's dev server runs on port 3000. If that port is busy, preview() fails silently. Detect the conflict with lsof -nP -iTCP:3000 -sTCP:LISTEN before calling preview.

Commands

Intent Routing

VideoComposition Shape Fields

{
  status: "ready" | "not-installed";
  compositions: Array<{
    id: string;          // PascalCase composition ID
    format: string;      // "square" | "vertical" | "landscape" | "youtube" | "story"
    fps: number;         // frames per second
    frames: number;      // total frames (duration = frames/fps seconds)
  }>;
  selected?: string;     // currently selected composition ID
  previewUrl?: string;   // Remotion Studio URL when running
  renderOutput?: string; // absolute path to MP4 when rendered
  installCommand?: string; // shown when status: "not-installed"
}

Self-correcting loader (PID feedback)

Before you finish, do two things:

1. Fix gaps. If this loader didn't cover your case, edit this AGENTS.md surgically.

2. Log the result.

echo "[$(date -u +%FT%TZ)] video-edit: <what was missing or fixed> [FIXED|LOGGED] action_kind=<kind>" >> ~/projects/snappy-os/state/log/loader-feedback.log

• FIXED = patched inline. LOGGED = too large for inline.
• action_kind: shape-ok | skill-ran | loader-rewritten | pattern-elevated