Communitygithub.com

kguevaram94/remotion-playground

Best Practices für die Remotion Shorts Factory in diesem Repo. Verwenden bei der Bearbeitung von ShortVideo, Pipeline-Phasen, Animationen, FFmpeg-Nachbearbeitung oder dem Hinzufügen von Animationsbibliotheken.

Was ist remotion-playground?

Diese Skill-Beschreibung definiert die Best Practices und den offiziellen Workflow für das Remotion Shorts Factory Repo. Es legt das standardisierte Format „logic-lateral“ fest, einschließlich eines festgelegten Beat-Ablaufs (Hook, Regeln, Countdown, Erklärung, Enthüllung, Outro mit CTA zum Kommentieren) und spezifischen visuellen Elementen wie „logic-room“ und „switch-sequence“. Die Skill gibt klare goldene Regeln vor: Animationen müssen auf `useCurrentFrame()`, `interpolate` oder `spring` basieren, JSON-Daten deklarativ gehalten werden, externe Bibliotheken wie GSAP sind nur mit Frame-Sync-Integration erlaubt, und FFmpeg/Satori werden strikt in der Nachbearbeitung eingesetzt. Sie unterstützt die Plattformen Remotion und FFmpeg und richtet sich an Entwickler, die Shorts konsistent und performant produzieren möchten, ohne die Kernbestandteile wie `HelloRemotion` oder `ScriptVideo` zu beeinträchtigen. Die detaillierte Tabelle zeigt genau, welche Dateien für Änderungen an visuellen Szenen, Templates, Pipeline, Thumbnails und FFmpeg zuständig sind.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kguevaram94/remotion-playground/tree/HEAD/.cursor/skills/remotion-shorts
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 Shorts — Skill des Repos

Offizielles Format: logic-lateral

Referenz: output/s4-19-interruptores/ · Vorlage: data/templates/script-logic-lateral.json.

Beat: hook → rules → countdown → explanation → reveal → outro (CTA kommentieren).

Visuelles: logic-room, switch-sequence, bulb-state-reveal (+ countdown, text).

cp data/templates/script-logic-lateral.json data/topics/mi-reto.json
npm run generar-short -- --input data/topics/mi-reto.json

Automatischer Builder (Titel mit Schalter/Glühbirne): src/shorts/templates/three-switches.ts.

Goldene Regeln

  1. Jede Animation basiert auf useCurrentFrame() / interpolate / spring.
  2. Deklarative Daten in JSON; Komponenten in src/shorts/remotion/components/.
  3. Keine GSAP-, Anime.js- oder Motion-Canvas-Integration ohne offizielle Frame-Sync-Integration und Begründung.
  4. FFmpeg/Satori erfolgen in der Nachbearbeitung, nicht innerhalb der Komposition.
  5. HelloRemotion und ScriptVideo nicht beschädigen.
  6. Outro von logic-lateral fordert immer zum Kommentieren auf.

Wo anpacken

ÄnderungDatei
Neue visuelle Szenecomponents/ + Verzweigung in ShortVideo.tsx + Schema
Vorlage / Erkennungsrc/shorts/templates/ + select.ts
Pipelinesrc/shorts/pipeline/
Thumbnailsrc/shorts/media/thumbnail.ts
FFmpegsrc/shorts/media/ffmpeg.ts
Render-Optionenrender-video.ts (gl: angle, Bundle-Cache)

Externe Referenz

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