Communitygithub.com

ronnnnerr/norstack

Programmatische React-Videos. Für Remotion-Overlays, Bewegungsgrafiken oder eine als MP4 gerenderte React-Komposition. Nur generierte Bewegung, Filmmaterial bleibt im Video und im Hochformat.

Was ist norstack?

Diese Fähigkeit ermöglicht es KI-Agenten, programmatisch React-basierte Videokompositionen mit **Remotion** zu erstellen und zu rendern. Sie ist ideal für die Erstellung von Overlays, Bewegungsgrafiken (Motion Graphics) oder vollständigen Animationen, die als MP4 exportiert werden. Dabei wird nur die generierte Bewegung (z. B. Text, Formen, Animationen) verarbeitet, während das zugrunde liegende Filmmaterial unverändert bleibt. Die Fähigkeit definiert eine strenge Projektstruktur: Animationen müssen in einem bestimmten Ordner (`<videos_dir>/edit/animations/slot_<id>/`) eingerichtet werden, und das fertige Video wird als `render.mp4` exportiert. Wichtige Regeln umfassen die Verwendung von `durationInFrames` als einzige Zeitquelle, den Einsatz von `interpolate`/`spring` anstelle von CSS-Layout-Animationen, die Aufteilung in `Sequence` und `AbsoluteFill` sowie das Vorladen von Schriftarten und Audio. Transparente Overlays erfordern ProRes 4444 oder WebM mit Alpha. Das Rendering erfolgt ohne Rückfragen im Agenten-Kontext – es wird die offensichtliche Lösung gewählt und direkt gerendert.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

remotion

Filmmaterial → video / portrait. Dies ist für generierte Bewegung in React.

Verzeichnis

Niemals im Repository-Stammverzeichnis. Immer:

<videos_dir>/edit/animations/slot_<id>/

Dort einrichten. Nach render.mp4 rendern. Das EDL-Overlay auf diese Datei verweisen.

Gesetze

  • durationInFrames ist die Wahrheit. Raten Sie keine Sekunden in CSS.
  • interpolate / spring. Kein linear. Kein Layout-Animation (top/left/width).
  • Sequence + AbsoluteFill. Eine Idee pro Komposition.
  • Schriftarten und Audio vorladen. Eine fehlende Schriftart bedeutet ein erneutes Rendern.
  • fps entspricht dem Eltern-Element (24 Film, 30 Social), sofern nicht anders angegeben.
  • Transparentes Overlay → ProRes 4444 oder WebM mit Alpha. Vor der Auswahl bestätigen.

Nach dem Rendern

ffprobe render.mp4
# dann ansehen / die Ausgabeframes überprüfen

Harte Videoregeln gelten weiterhin: Overlay-PTS-Verschiebung, Untertitel zuletzt, 30ms Audio-Ausblendungen am Eltern-Schnitt.

Vorhaben

Palette aus profil und geschmack. Jedes Projekt hat seine eigene Palette. Kein übrig gebliebenes orange Launch-Video-Kit.

Stellen Sie keine Fragen innerhalb eines Slot-Agenten. Wählen Sie das Offensichtliche und rendern Sie.

Verwandte Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community