jsxreel

Was macht jsxreel?

Überblick

Ein Video hier sind React-Szenen, die in Remotion animiert und von ElevenLabs vertont werden, wobei jeder Beat auf das gesprochene Wort abgestimmt ist. App- und Anbieter-Oberflächen werden immer neu aufgebaut, niemals als Screenshots, Bildschirmaufnahmen oder Storyboard-Diashows dargestellt. Ein bereitgestelltes Bild, das selbst der Inhalt ist (eine Unterschrift, ein Logo, ein Produktfoto), kann als Bild erscheinen. Jedes Produkt behält sein eigenes Videoprojekt und sein eigenes Aussehen; dieser Skill enthält den Prozess und die Werkzeuge in scripts/ im Basisverzeichnis des Skills (wird beim Laden des Skills angezeigt).

Projekte

Lies zuerst ~/.claude/jsxreel/projects.md, falls vorhanden (die private Liste des Benutzers, die außerhalb des Skills gespeichert wird, sodass Aktualisierungen sie nie berühren: Ordner, zu lesende Notizen, Sprachbefehl, Konventionen). Lies dann die eigenen Notizen dieses Projekts. Ein nicht aufgeführtes Projekt: Frage den Benutzer, wo es sich befindet, und füge dann eine Zeile hinzu.

Neues Projekt: Ein Remotion-Projekt im Repository des Produkts, mit scripts/tts.mjs und scripts/stills.mjs, die aus diesem Skill kopiert werden (stills.mjs kommt nach qa/). Niemals die visuellen Elemente eines anderen Produkts verwenden.

Arbeitsablauf

1. Art: App-Anleitung, Storyboard-Ankündigung oder Werbe-Sketch. Lies den entsprechenden Abschnitt in kinds.md.
2. Fragen mit AskUserQuestion (Empfohlen zuerst, maximal 4): Format, Ziellänge, Ende, und nur das, was das Material und die Projekthinweise nicht beantworten können.
3. Material vor dem Schreiben prüfen: Storyboard-Kopie (falsche technische Behauptungen, Bindestriche, zu langer Text zum Sprechen); jede Bildschirmanweisung (Menüpfade, Bezeichnungen) mit den aktuellen Docs des Anbieters oder dem Code der App abgleichen; personenbezogene Daten in bereitgestellten Assets. Verwende, was der Benutzer bereitgestellt hat, markiere es, frage nach. Ersetze es niemals stillschweigend. Geheimnisse (ein Live-QR-Code, ein Token, ein Passwort) erscheinen nie auf dem Bildschirm; zeichne einen Platzhalter.
4. Skript scripts/<video>.json: Eine Zeile pro Szene, marks für jeden Beat (genau, Groß-/Kleinschreibung beachten, eindeutig in seiner Zeile), say für gesprochene Formen (Zahlen, URLs). Budgetiere etwa 2,6 Wörter/s plus 0,5 s pro Szene. Zeige das gesamte Skript als Tabelle; gib Credits erst nach Genehmigung aus.
5. Sprache: Ein Take pro Stimme, geschnitten durch Alignment (node scripts/tts.mjs <video> für einen Sprecher). Transkribiere die Clips (ElevenLabs Speech-to-Text, POST /v1/speech-to-text, Modell scribe_v1, oder das eigene Tool des Projekts), um zu bestätigen, dass jeder seine eigenen Worte enthält; es kostet ein paar Cent pro Take. Dann straffen: python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix> (Original bleibt in .voice-orig/, siehe --help). Sketche behalten stattdessen ihre komischen Pausen. In einer Cloud-Sitzung kommt der ElevenLabs-Key von einem Netzwerkgeheimnis (ELEVENLABS_API_KEY=proxy, siehe den Browser-Abschnitt der README); fordere den Benutzer niemals auf, einen Key in den Chat einzufügen.
6. Build: data.ts, timeline.ts, Szenen, CSS in einer eigenen Datei mit einem neuen Klassen-Präfix. Szenenlänge = max(MIN, LEAD + clip + TAIL), LEAD etwa 0,15, TAIL etwa 0,2; MIN deckt das letzte Ereignis der Szene + 0,6 s ab; eine Klick-Demo bekommt einen längeren LEAD, damit die UI vor dem ersten Klick sichtbar ist. Registriere in Root.tsx, füge voice:/render:-Skripte hinzu und vermerke das Video in den Notizen des Projekts (README oder Plan).
7. QA (unten), dann Bericht: absoluter mp4-Pfad, Länge im Vergleich zum Ziel, zu bestätigende Annahmen (Beispieldaten, rekonstruierte UI-Bezeichnungen, jede genehmigte Zeile, die du geändert hast, alt und neu nebeneinander), was nach Gehör zu prüfen ist. Nur committen, wenn danach gefragt wird.

QA

• npx tsc --noEmit; node qa/stills.mjs <Comp> <frames…> (erneut ausführen, wenn der erste Aufruf nach einer Bearbeitung abstürzt).
• Jedes Tippen oder Klicken auf seinem Druckbild, gestapelt in einem Kontaktbogen: Der Finger oder Cursor sitzt auf dem Ziel.
• 4 bis 5 Frames über jeden Übergang hinweg.
• ffprobe-Länge; Lautstärke pro Projekt (Anleitungen: Mittelwert etwa -21 dB; Social: etwa -14 LUFS, Spitze höchstens -0,8 dB); silencedetect für Lücken über etwa 1,3 s, die keine bewussten komischen Beats sind.
• Wurde eine gemeinsam genutzte Datei geändert: Einen Frame eines älteren Videos rendern, PSNR muss inf sein.
• Lösche die QA-PNGs.

Häufige Fehler

Fehler	Korrektur
Natürliches ElevenLabs-Tempo	Benutzer finden es langsam. Vor dem ersten Rendern straffen.
Aufnahme vor Überprüfung der UI-Bezeichnungen	Zuerst Anbieter-Docs oder App-Code prüfen; ein erneuter Take kostet Credits.
Eine TTS-Anfrage pro Zeile	Die Stimme wechselt zwischen den Zeilen. Ein Take pro Stimme.
Hartcodierte Beat-Zeiten	Marks; ein neuer Take taktet alles neu.
Blindes Vertrauen in Alignment	eleven_v3 Dialog driftete um etwa 0,75 s. Transkribiere die Clips.
Aussehen eines anderen Projekts	Jedes Produkt hat sein eigenes Kit; ein Storyboard behält sein eigenes Aussehen.
Aufrufer-style auf einen Wrapper ausgebreitet, der transform setzt	Der Transform des Aufrufers gewinnt und die Skalierung geht verloren. Setze den Aufrufer-Style auf ein äußeres Div.
zsh: $LIST trennt Wörter nicht, ==== ist ein Fehler	Inline-Listen; baue ffmpeg-Filter in Python.
Port 3000 belegt	Ein freier --port.
Kein Chrome auf dem Rechner	Jeder Chromium-Browser funktioniert (Chromium, Edge, Brave via --browser-executable); falls keiner vorhanden, lasse das Flag weg und Remotion lädt seinen eigenen headless Chrome herunter. stills.mjs wählt selbst einen aus. Firefox und Safari können nicht rendern.
Handgetippte URLs im Bericht	Nur lokale Pfade.