nyosegawa/skills

Remotion Promo Video Factory

Utilisez cette compétence pour produire des vidéos d'introduction d'applications de haute qualité et reproductibles avec Remotion. Cette compétence est intentionnellement indépendante de toute application et fonctionne pour les produits à forte composante UI et les produits non-UI.

Règles principales

1. Utilisez les règles officielles de la compétence Remotion comme autorité principale.
2. Animez tout mouvement via useCurrentFrame() avec interpolate() et spring().
3. Concevez le temps en secondes, puis convertissez avec sec().
4. Choisissez d'abord un blueprint de type d'application ; ne vous limitez pas par défaut aux démos UI uniquement.
5. Préférez les primitives visuelles réutilisables aux séquences filmées ponctuelles.
6. Appliquez les règles de dimensionnement typographique avant le polissage des animations.
7. Validez chaque modification majeure avec des captures d'images, puis exécutez la vérification de type et le rendu.
8. N'affirmez pas la qualité sans preuves image par image.
9. Ne validez jamais, ne poussez jamais et ne marquez jamais les tâches comme terminées sans une approbation explicite de l'utilisateur.

Interopérabilité officielle de la compétence

Lisez toujours references/official-skill-integration.md en premier.

Groupes de règles officielles requis par étape :

1. Étape de composition : compositions, parameters, calculate-metadata
2. Étape d'animation : animations, timing, sequencing, transitions
3. Étape des ressources : assets, images, fonts
4. Étape optionnelle : audio, videos, subtitles, text-animations

Références

• Sélection du type d'application et modèles de scènes : references/app-type-blueprints.md
• Mapping des règles officielles Remotion : references/official-skill-integration.md
• Modèles de chronologie et de mouvement : references/timeline-and-motion.md
• Budgets temporels et boucle de débogage : references/timing-and-debug-loop.md
• Règles de typographie et de lisibilité : references/typography-and-readability.md
• Blocs de construction visuels réutilisables : references/visual-primitives.md
• Liste de contrôle QA : references/qa-checklist.md
• Guide de dépannage : references/troubleshooting.md

Workflow

Étape 1 : Collecte des entrées

Collectez à partir du contexte du projet local (README, documentation, page d'accueil, UI existante, exemples CLI/API) :

1. Public cible
2. Promesse essentielle en une phrase
3. Ressources de preuve disponibles (UI, code, logs, métriques, témoignages)
4. Ressources médias disponibles (logo, captures d'écran, clips, audio)

Étape 2 : Sélection du blueprint de type d'application

Lisez references/app-type-blueprints.md et sélectionnez-en un :

1. Application centrée UI
2. Application API/SDK
3. Application outil de développement / infrastructure
4. Application IA/automatisation

Créez une liste de plans basée sur le blueprint sélectionné.

Étape 3 : Narration et durée

1. Définissez l'arc narratif : Accroche -> Problème -> Mécanisme -> Preuve -> Appel à l'action
2. Choisissez la durée cible : 15s, 30s, 45s ou 60s
3. Assignez les durées des scènes avant l'implémentation

Étape 4 : Configuration de la composition

1. Définissez la Composition dans src/Root.tsx
2. Ajoutez schema et defaultProps
3. Calculez la durée dans calculateMetadata
4. Connectez les scènes dans src/Video.tsx en utilisant TransitionSeries

Étape 5 : Construction des scènes

1. Construisez d'abord les composants réutilisables dans src/components
2. Assemblez les scènes dans src/scenes en utilisant ces composants
3. Utilisez le positionnement absolu avec des constantes pour la disposition et le timing
4. Gardez les fichiers de scène concentrés sur l'orchestration, pas sur les détails UI de bas niveau

Étape 6 : Passage typographie

Lisez references/typography-and-readability.md et définissez d'abord toutes les tailles de texte principales.

1. Appliquez les plages de tailles recommandées pour 1920x1080
2. Respectez les minimums stricts sauf justification explicite
3. Confirmez la lisibilité mobile/iOS avant le polissage des animations

Étape 7 : Passage animation

1. Utilisez les fondus trapézoïdaux pour la lisibilité
2. Utilisez des ressorts pour les entrées et les mouvements de type curseur
3. Ajoutez exitOpacity par scène pour éviter les artefacts de chevauchement pendant les transitions
4. Utilisez des superpositions/légendes pour rendre explicites les changements de phase

Étape 8 : Passage de vérification de la synchronisation

Lisez references/timing-and-debug-loop.md et validez les budgets temporels :

1. Vérifiez le temps d'affichage du texte et les fenêtres de lecture
2. Vérifiez les durées de traitement et de maintien des résultats
3. Vérifiez le chevauchement des transitions et le timing de passage
4. Corrigez les constantes de chronologie avant le travail de polissage

Étape 9 : Boucle QA (preuves requises)

1. Capturez les images clés après chaque changement substantiel
2. Examinez la clarté visuelle, la synchronisation, le chevauchement et l'équilibre de la composition
3. Enregistrez les preuves de réussite/échec dans un journal de débogage
4. Itérez jusqu'à ce que tous les points de contrôle critiques passent

Utilisez scripts/capture-frames.sh si utile.

Si les outils de lecture d'image échouent ou ne renvoient aucun contenu utile, recapturez et réessayez. Ne continuez pas avec des vérifications non vérifiables.

Étape 10 : Validation finale

1. npx tsc --noEmit
2. npm run -s build
3. npm run -s build:gif si disponible
4. Rendez le mp4 final et vérifiez le temps d'exécution et la taille de sortie
5. Revérifiez les horodatages clés par rapport au comportement prévu de la scène

Utilisez scripts/verify-build.sh si utile.

Étape 11 : Transfert et approbation

1. Rapportez un résumé QA basé sur les preuves (ce qui a réussi/échoué et pourquoi)
2. Listez les compromis connus ou les risques résiduels
3. Demandez une approbation explicite avant de valider/pousser/terminer la tâche

Format de sortie

Lorsque vous rapportez le travail, incluez :

1. Type d'application et blueprint sélectionnés
2. Structure des scènes et durée finale
3. Principaux composants implémentés
4. Décisions d'animation clés
5. Vérifications des budgets temporels et résultats
6. Commandes de validation et résultats
7. Risques restants ou actions de suivi

Garde-fous

1. Utilisez Img + staticFile() pour les images locales.
2. Chargez les polices à la portée du module, pas à l'intérieur des effets.
3. Gardez la disposition Sequence et les paramètres de pré-montage compatibles.
4. Utilisez les minimums stricts de typographie de references/typography-and-readability.md.
5. Concentrez les effets complexes dans une seule zone focale.
6. N'optimisez pas pour trop d'objectifs dans un seul plan ; gardez un seul message principal.
7. Ne décrivez jamais la sortie comme "parfaite" sans preuve explicite.
8. Ne sautez pas les preuves QA, même lorsque les commandes de rendu réussissent.