Communitygithub.com

Sagart-cactus/codex-skills

Créez des vidéos de démonstration programmatiques et soignées à partir de projets logiciels à l'aide d'un modèle Remotion intégré, d'une génération de storyboard et d'une narration TTS. Idéal lorsque Codex doit transformer une application, une bibliothèque, un CLI ou une API en vidéo de démonstration sans enregistrement d'écran, ou pour itérer sur les scènes, la narration ou le rendu.

Qu'est-ce que codex-skills ?

Cette compétence permet à Codex de produire des vidéos de démonstration produit à partir de projets logiciels en utilisant un modèle Remotion intégré. Elle automatise les étapes clés : analyse du projet source, création d'un storyboard structuré, génération de narration vocale via TTS (macOS say, OpenAI TTS ou ElevenLabs), et rendu vidéo final. L'utilisateur conserve un contrôle créatif sur les fonctionnalités mises en avant, la durée, le ton et les captures d'écran à inclure. La compétence est compatible avec les projets Remotion existants et propose un flux de travail flexible, incluant la prévisualisation avec `npx remotion studio` et le rendu final. Son atout principal est de transformer un projet (app, lib, CLI, API) en démo vidéo sans enregistrement d'écran, avec des scènes animées et une narration adaptée, tout en respectant des règles de storyboard prédéfinies.

Compatible avec✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Sagart-cactus/codex-skills/tree/HEAD/skills/product-demo-video

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Vidéo de Démonstration Produit

Il s'agit du portage de la compétence Codex du plugin Claude. Il n'y a pas de commande slash, donc Codex doit piloter le flux de travail explicitement et utiliser le modèle Remotion fourni sous assets/remotion-template/.

Configuration du Modèle

  • Si l'espace de travail cible ne contient pas déjà un projet Remotion, copier assets/remotion-template/ dans un répertoire de travail tel que demo-video/.
  • Exécuter npm install dans ce répertoire de travail.
  • Le modèle inclut des composants de scène, des points d'entrée, un script de narration et un src/storyboard.ts de démarrage.

Flux de Travail

  1. Parcourir le README du projet cible, la documentation, les manifestes, l'arborescence source et les éventuelles captures d'écran existantes.
  2. Demander quelles fonctionnalités mettre en avant, la durée préférée, le ton, la couleur de marque et si des captures d'écran spécifiques doivent être utilisées.
  3. Rédiger un storyboard en utilisant references/scene-catalog.md.
  4. Montrer le storyboard pour approbation, sauf si l'utilisateur demande explicitement de sauter cette étape de validation.
  5. Écrire ou mettre à jour src/storyboard.ts.
  6. Générer les fichiers MP3 de narration dans public/narration/ en appelant scripts/generate-narration.sh une fois par scène depuis un petit script d'assistance.
  7. Si ffprobe est disponible, mesurer chaque MP3 et définir durationInSeconds à la durée audio plus environ 0,8 seconde.
  8. Prévisualiser avec npx remotion studio et effectuer le rendu avec npx remotion render DemoVideo output/demo.mp4.

Règles du Storyboard

  • Toujours commencer par une scène intro et terminer par une scène outro.
  • La plupart des scènes doivent durer environ 8 à 12 secondes.
  • Inclure au moins une scène clairement animée, comme workflow, comparison, ou un feature dynamique.
  • Utiliser du code réel et des détails concrets du produit cible.
  • Rédiger la narration dans un langage parlé, à environ 120 à 150 mots par minute.

Remarques

  • Le script TTS fourni prend en charge macOS say, OpenAI TTS et ElevenLabs.
  • Si l'utilisateur possède déjà un projet Remotion, ne copier que les composants nécessaires, src/storyboard.ts ou le script de narration au lieu du modèle complet.

Skills associés