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

Remotion video editing via cockpit. Full reference: state/skills/video-edit/SKILL.md.

Critical Rules

1. Never install Remotion in snappy-chat. Lives at ~/projects/snappy-remotion (via state/lib/remotion.ts scaffold). Installing inside snappy-chat bloats bundle + conflicts with Vite.
2. Preflight: check ~/projects/snappy-remotion/package.json before any op. Absent → emit VideoComposition with status: "not-installed" + scaffold command.
3. VideoComposition = metadata card, NOT a player. Shows composition list/format/duration/status. Playback via VideoPreview (HTML5 video src).
4. Render is slow (30-120s). Emit ProgressList first → call render() → emit VideoPreview. Never preview before render completes.
5. Save-artifact after render. Call save_artifact({name, shape_name: "VideoPreview", shape_args: {src: outputPath}, intent}) to persist MP4.
6. Composition names must be PascalCase. Validate /^[A-Z][a-zA-Z0-9]+$/ before addComposition(). Reject invalid with clear error.
7. Port 3000 conflict. Remotion Studio runs on 3000 (cockpit on 3147). Check lsof -nP -iTCP:3000 -sTCP:LISTEN before preview().

Commands

| check | ls ~/projects/snappy-remotion/package.json 2>/dev/null && echo ready | | scaffold | npx tsx ~/projects/snappy-os/state/lib/remotion.ts scaffold | | list | npx tsx ~/projects/snappy-os/state/lib/remotion.ts list | | render | npx tsx ~/projects/snappy-os/state/lib/remotion.ts render <CompId> --props '{"text":"Hello"}' --format square | | preview | npx tsx ~/projects/snappy-os/state/lib/remotion.ts preview | | add | npx tsx ~/projects/snappy-os/state/lib/remotion.ts add <PascalName> "description" | | intent | compose.*video, render.*mp4, list.*video.*project, start remotion studio |

Self-Test

• [ ] Can you check if snappy-remotion is installed?
• [ ] When not installed, do you emit VideoComposition with status: "not-installed"?
• [ ] After render completes, do you call save_artifact()?
• [ ] Do you validate composition names before calling addComposition()?
• [ ] Do you emit ProgressList before starting render()?
• [ ] What port does Remotion Studio use? Where can conflicts happen?
• [ ] VideoComposition shows metadata - what shows the actual MP4 playback?

Found a gap? Edit this file. <!-- footer-injection-point -->