ajewoleOlugbenga/video-skills

Werbevideo (Promo Ad Video)

Erstellt ein fertiges vertikales Werbevideo aus einer Beschreibung eines Unternehmens in einfacher Sprache. Du (Claude) agierst als Texter, Motion Designer und Editor: Du schreibst das Werbeskript, wandelst es in ein kurzes JSON um und renderst es mit der mitgelieferten Remotion-Vorlage in template/.

Ausgabe: ein MP4 (standardmäßig 1080×1920) plus Vorschaubilder, erstellt mit Code, ohne Bearbeitungssoftware.

Voraussetzungen

• Node.js 18+ und npm (die Vorlage installiert Remotion beim ersten Start)
• ffmpeg ist optional (nur zum Trimmen/Konvertieren von benutzerbereitgestelltem Audio)
• Der erste Render-Vorgang lädt automatisch einen Headless-Chrome (~100 MB) herunter. Wenn Downloads blockiert sind, setze REMOTION_BROWSER=/pfad/zu/chrome.
• Lizenzierung: Remotion ist kostenlos für Einzelpersonen, Unternehmen mit bis zu 3 Mitarbeitern und Non-Profit-Organisationen; größere gewinnorientierte Unternehmen benötigen eine Remotion Company License (remotion.dev/license). Erwähne dies einmal, wenn der Benutzer offenbar für ein größeres Unternehmen rendert. Die gebündelten Schriftarten sind SIL OFL (siehe template/public/fonts/OFL.txt).

Arbeitsablauf

Befolge diese Schritte der Reihe nach. Überspringe nicht die Vorschauprüfung in Schritt 5.

1. Briefing sammeln

Du benötigst: Firmenname, was verkauft wird, das Angebot/der Preis, für wen es ist, wie man kauft (WhatsApp-Nummer, IG-Handle, Webseite, Standort). Wünschenswert: Markenfarben, Logo, Produktfotos, echte Kundenstimmen, echte Zahlen (Kunden betreut, Jahre im Geschäft).

Frage nach den fehlenden Essentials in einer kurzen Nachricht (maximal 3 Fragen). Frage nicht nach Dingen, die du selbst gut wählen kannst (Farben, Szenenreihenfolge, Formulierungen). Wenn der Benutzer nicht verfügbar ist, triff sinnvolle Entscheidungen und sage, was du angenommen hast.

2. Skript schreiben

Lies references/ad-scriptwriting.md und wähle eine Struktur. Schreibe das Skript als kurze Szenenliste und zeige es dem Benutzer vor dem Rendern in ein paar Zeilen an, es sei denn, er hat dich gebeten, einfach loszulegen. Die wichtigsten Regeln:

• Hook in den ersten 2 Sekunden, maximal 7 Wörter. Blickfang, über den Betrachter, nicht über die Marke.
• Insgesamt 15–30 Sekunden, 5–8 Szenen.
• Erfinde niemals Testimonials, Kundenzahlen, Bewertungen oder Preise. Verwende testimonial- und stat-Szenen nur mit Fakten, die der Benutzer dir gegeben hat. Sonst lasse sie weg.
• Kopiere Preise, Telefonnummern und Handles genau so, wie sie angegeben wurden.

3. Arbeitsbereich einrichten (einmal pro Projekt)

cp -r <skill-verzeichnis>/template ./promo-ads   # überspringe, wenn ./promo-ads bereits existiert
cd promo-ads && npm install

<skill-verzeichnis> ist der Ordner, in dem diese SKILL.md-Datei lebt (das Basisverzeichnis des Skills, das beim Laden des Skills angezeigt wird). Es kann sich in einem Plugin-Cache oder in ~/.claude/skills/ befinden; bearbeite niemals Dateien dort, kopiere die Vorlage immer zuerst heraus.

Lege benutzerbereitgestellte Logos, Produktfotos und Audiodateien in promo-ads/public/assets/ ab. Quadratische oder 4:5-Produktfotos auf sauberem Hintergrund sehen am besten aus.

4. JSON-Briefing erstellen

Erstelle promo-ads/briefs/<unternehmens-slug>.json. Vollständige Feldreferenz: references/brief-schema.md. Beginne mit template/briefs/example.json.

Wichtige Punkte:

• Farben müssen 6-stellige Hex-Codes sein. Wähle einen background, ein kräftiges primary (Buttons, Hervorhebungsmarkierung), einen accent (Labels, Preis-Burst, Badges) und text mit starkem Kontrast zum Hintergrund.
• Hebe 1–2 Schlüsselwörter pro Zeile mit *Sternchen* hervor, z. B. "Heute zu *müde* zum *Kochen*?".
• Szenentypen: hook, problem, product, benefits, stat, price, testimonial, cta. Jeder Typ akzeptiert ein optionales seconds.
• Verfügbare Icons: check, star, truck, clock, shield, phone, chat, globe, tag, spark, heart, location, cash, bolt, gift, x.

5. Vorschaubilder rendern und prüfen

scripts/render.sh briefs/<slug>.json stills

Dies validiert das Briefing und schreibt dann ein PNG pro Szene nach out/<slug>-frames/. Öffne jedes Standbild und überprüfe:

• Kein Text abgeschnitten oder umständlich umgebrochen (ein einzelnes Wort in einer eigenen Zeile → Text kürzen)
• Text gut lesbar vor dem Hintergrund
• Nichts Wichtiges in den oberen 15 % oder unteren 22 % (Plattform-Buttons überdecken diese Bereiche; die Vorlage hält den Inhalt bereits in der Sicherheitszone, daher ist dies hauptsächlich bei langen Texten relevant)
• Rechtschreibung, Preise und Kontaktdaten genau richtig

Korrigiere das Briefing und führe die Stills erneut aus, bis alles sauber ist. Dies ist günstig (≈1 Minute); ein vollständiger Render ist es nicht.

6. Video rendern

scripts/render.sh briefs/<slug>.json

Schreibt out/<slug>.mp4 (≈2–4 Minuten für 30 s). Bestätige, dass die Dauer 15–30 s beträgt.

7. Liefern

Gib dem Benutzer das MP4 und eine Zeile dazu, was darin enthalten ist. Biete einen nützlichen nächsten Schritt an, wie z. B.:

• 2–3 alternative Hooks als A/B-Varianten (Briefing kopieren, nur die Hook-Szene ändern)
• Ein anderes Format: "format": "1:1" oder "4:5" für Feed-Beiträge, "16:9" für YouTube/Webseite
• Eine Voiceover-Version (siehe references/voiceover.md)

Audio

• Soundeffekte (Whoosh, Pop, Ding, Impact) werden automatisch bei Szenenwechseln und Listenelementen abgespielt. Ausschalten mit "audio": {"sfx": false}.
• Ein lizenzfreier Start-Beat wird standardmäßig abgespielt. Verwende den eigenen Track des Benutzers mit "audio": {"music": "assets/song.mp3"} oder false für keinen. Lade niemals urheberrechtlich geschützte Songs herunter oder verwende sie; der Benutzer muss jeden Track, den er bereitstellt, besitzen oder lizenziert haben.
• Voiceover: siehe references/voiceover.md.

Anpassen des Aussehens

Für Änderungen, die über das Briefing hinausgehen (neuer Szenentyp, andere Animation), bearbeite Dateien in promo-ads/src/:

• scenes/Scenes.tsx: eine Komponente pro Szenentyp
• components/Words.tsx: kinetischer Text und die Hervorhebungsmarkierung
• components/Frame.tsx: Hintergrund, Marken-Chip, Sicherheitszonen, Szenenübergang
• Ad.tsx: Standard-Szenenzeitsteuerung und Audio

Halte dich an die Remotion-Regeln: Alle Animationen müssen mit useCurrentFrame() gesteuert werden (keine CSS-Übergänge, kein setTimeout), und Assets müssen mit staticFile() geladen werden.

Wenn etwas fehlschlägt, siehe references/troubleshooting.md.