ascorblack/video-skills

Règles de rendu et d'optimisation de vidéos à partir de fichiers HTML/images de navigateur — les pièges du rendu image par image avec rembobinage (tweens, animations CSS, transform, aspect-ratio, SVG use, couches lourdes), déterminisme et reproductibilité, où se perd le temps de rendu, encodage avec NVENC et débit binaire, workers, rendu détaché de la session, fusion audio sans ré-encodage de l'image, vérification du fichier final (ffprobe) et conservation des versions. À utiliser lors du rendu, de l'optimisation, de l'encodage, de la reconstruction ou de la livraison d'une vidéo.

Qu'est-ce que video-skills ?

Ce jeu de règles et de bonnes pratiques est destiné aux développeurs et concepteurs qui génèrent des vidéos à partir de sources HTML ou de rendus de navigateur. Il couvre les aspects critiques du rendu image par image avec rembobinage, en évitant les pièges courants comme les animations CSS instables, les dépendances externes non gérées et le bruit de grain aléatoire qui brise le déterminisme. Le projet insiste sur la reproductibilité : chaque version doit pouvoir être reconstruite à l'identique, ce qui est essentiel pour le débogage et la conformité. Pour l'encodage, il recommande NVENC avec un contrôle strict du débit binaire et des vérifications via ffprobe. Enfin, il préconise de séparer l'image et le son, d'utiliser des workers pour le rendu détaché de la session, et de conserver toutes les anciennes versions pour garantir la traçabilité. Supporté sur toutes les plateformes (Linux, macOS, Windows), les instructions sont fournies via des fichiers Markdown et des commandes shell.

Compatible avec~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-render

Documentation

Rendu et optimisation

Chaque règle est tirée des leçons de vidéos précédentes ; entre crochets — la source (légende en bas). Là où les sources divergent, les deux conseils sont donnés avec une indication du cas d'usage.

Règles courtes

Le rendu capture l'image à un instant donné, il ne lit pas l'animation en continu : une propriété = une animation, les pulsations par tweens, pas avec @keyframes. [Visuel]
Placez les scripts et polices externes dans le projet, ne les chargez pas pendant le rendu. [Visuel] [Science Pop]
Calculez le bruit de grain à partir du numéro de l'image, pas d'un générateur aléatoire [Science Pop] ; conservez la séquence aléatoire du générateur et vérifiez que les anciennes versions se reconstruisent octet par octet de la même manière [Son].
Avant d'accélérer, vérifiez où va le temps. [3D]
Encodage sur NVENC avec limitation du débit binaire ; comparez la qualité du codec avec PSNR sur un même extrait. [3D]
Lancez le rendu détaché de la session ; deux versions — séquentiellement, pas simultanément sur la même carte graphique. [3D]
Après transfert sur la machine de rendu, vérifiez les sommes de contrôle des fichiers. [3D]
Gardez l'image et le son séparés : fusionnez le son par copie du flux vidéo, sans ré-encodage de l'image. [Vidéo] [Visuel] [3D]
Avant livraison — ffprobe et vérification que la page sert bien le nouveau fichier. [Vidéo]
Ne supprimez pas les anciennes versions. [Vidéo] [Son]

Détails

seek-render.md — les pièges du rendu image par image avec rembobinage, déterminisme.
performance.md — où va le temps, encodage, workers, lancement du rendu.
mux-and-delivery.md — fusion audio, vérification du fichier final, versions.

Sources

[Son] — leçons archivées sur le son et la narration de vidéos promotionnelles et de présentations.
[Vidéo] — leçons archivées sur la vidéo : enregistrements d'interface, tempo, transitions.
[Visuel] — leçons archivées sur le visuel des vidéos promotionnelles à partir d'images de schémas (images HTML → rendu image par image avec rembobinage).
[3D] — leçons d'une vidéo 3D à la première personne dans le navigateur (three.js → rendu image par image).
[Science Pop] — leçons d'une vidéo dans le style de la science populaire soviétique et du film fixe des années 70.