VisroliyaHimanshu/jsxreel

Que fait jsxreel ?

Aperçu

Une vidéo ici est constituée de scènes React animées dans Remotion, doublées par ElevenLabs, chaque temps étant calé sur un mot parlé. L'interface utilisateur de l'application et du fournisseur est toujours reconstruite, jamais affichée sous forme de captures d'écran, d'enregistrements d'écran ou de diaporama du storyboard. Une image fournie qui est elle-même le contenu (une signature, un logo, une photo de produit) peut apparaître en tant qu'image. Chaque produit conserve son propre projet vidéo et son propre aspect ; cette compétence contient le processus et les outils dans scripts/ dans le répertoire de base de cette compétence (affiché lorsque la compétence se charge).

Projets

Lisez d'abord ~/.claude/jsxreel/projects.md s'il existe (la liste privée de l'utilisateur, conservée en dehors de la compétence afin que les mises à jour ne l'affectent jamais : dossier, notes à lire, commande vocale, conventions). Lisez ensuite les propres notes de ce projet. Un projet non listé : demandez à l'utilisateur où il se trouve, puis ajoutez une ligne là-bas.

Nouveau projet : un projet Remotion dans le dépôt du produit, avec scripts/tts.mjs et scripts/stills.mjs copiés depuis cette compétence (stills.mjs va dans qa/). Jamais les visuels d'un autre produit.

Flux de travail

1. Type : guide d'application, annonce de storyboard ou sketch promotionnel. Lisez sa section dans kinds.md.
2. Demandez avec AskUserQuestion (Recommandé en premier, au maximum 4) : format, durée cible, fin, et seulement ce que le matériel et les notes du projet ne peuvent pas répondre.
3. Vérifiez le matériel avant d'écrire : copie du storyboard (affirmations techniques erronées, tirets, texte trop long pour être dit); chaque instruction à l'écran (chemins de menu, étiquettes) par rapport à la documentation actuelle du fournisseur ou au code de l'application ; données personnelles dans les ressources fournies. Utilisez ce que l'utilisateur a fourni, signalez-le, demandez. Ne le remplacez jamais en silence. Les secrets (un code QR en direct, un jeton, un mot de passe) n'apparaissent jamais à l'écran ; dessinez un leurre.
4. Script scripts/<video>.json : une ligne par scène, marks pour chaque temps (exact, phrase sensible à la casse, unique dans sa ligne), say pour les formes parlées (nombres, URL). Budget d'environ 2,6 mots/s plus 0,5 s par scène. Affichez le script entier sous forme de tableau ; dépensez des crédits uniquement après approbation.
5. Voix : une prise par voix, coupée par alignement (node scripts/tts.mjs <video> pour un narrateur). Transcrivez les clips (ElevenLabs speech to text, POST /v1/speech-to-text, modèle scribe_v1, ou l'outil du projet) pour confirmer que chacun contient ses propres mots ; cela coûte quelques centimes par prise. Ensuite, resserrez : python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix> (l'original est conservé dans .voice-orig/, voir --help). Les sketches conservent leurs pauses comiques à la place. Dans une session cloud, la clé ElevenLabs provient d'un secret réseau (ELEVENLABS_API_KEY=proxy, voir la section README sur le navigateur) ; ne demandez jamais à l'utilisateur de coller une clé dans le chat.
6. Construction : data.ts, timeline.ts, scènes, CSS dans son propre fichier avec un nouveau préfixe de classe. Longueur de scène = max(MIN, LEAD + clip + TAIL), LEAD environ 0,15, TAIL environ 0,2 ; MIN couvre le dernier événement de la scène + 0,6 s ; une démo de clic obtient un LEAD plus long pour que l'interface soit visible avant le premier clic. Enregistrez dans Root.tsx, ajoutez les scripts voice:/render:, et notez la vidéo dans les notes du projet (README ou plan).
7. QA (ci-dessous), puis rapport : chemin absolu du mp4, durée par rapport à la cible, hypothèses à confirmer (exemples de données, étiquettes d'interface reconstruites, toute ligne approuvée que vous avez modifiée, ancienne et nouvelle côte à côte), quoi vérifier à l'oreille. Ne commettez que lorsque demandé.

QA

• npx tsc --noEmit ; node qa/stills.mjs <Comp> <frames…> (relancez si le premier appel après une modification plante).
• Chaque tape ou clic sur son image de pression, empilés dans une seule planche contact : le doigt ou le curseur se trouve sur la cible.
• 4 à 5 images à travers chaque transition.
• Longueur ffprobe ; volume sonore par projet (guides : moyenne environ -21 dB ; social : environ -14 LUFS, crête au maximum -0,8 dB) ; silencedetect pour les écarts de plus d'environ 1,3 s qui ne sont pas des pauses comiques délibérées.
• Modification d'un fichier partagé : rendez une image d'une vidéo plus ancienne, PSNR doit être inf.
• Supprimez les PNG de QA.

Erreurs courantes

Erreur	Correction
Cadence naturelle d'ElevenLabs	Les utilisateurs la trouvent lente. Resserrez avant le premier rendu.
Enregistrement avant de vérifier les étiquettes UI	Vérifiez d'abord la documentation du fournisseur ou le code de l'application ; une reprise coûte des crédits.
Une seule requête TTS par ligne	La voix change entre les lignes. Une prise par voix.
Temps de temps codés en dur	Marks ; une nouvelle prise retime tout.
Faire confiance à l'alignement aveuglément	eleven_v3 dialogue a dérivé d'environ 0,75 s. Transcrivez les clips.
Aspect d'un autre projet	Le kit propre à chaque produit ; un storyboard conserve son propre aspect.
style de l'appelant étalé sur un wrapper qui définit transform	La transform de l'appelant gagne et l'échelle est perdue. Mettez le style de l'appelant sur un div externe.
zsh : $LIST ne fait pas de division de mots, ==== est une erreur	Listes en ligne ; construisez des filtres ffmpeg en Python.
Port 3000 occupé	Un --port libre.
Pas de Chrome sur la machine	N'importe quel navigateur Chromium fonctionne (Chromium, Edge, Brave via --browser-executable) ; sans aucun, retirez le flag et Remotion télécharge son propre Chrome sans tête. stills.mjs en choisit un lui-même. Firefox et Safari ne peuvent pas rendre.
URL tapées à la main dans le rapport	Chemins locaux uniquement.