Communitygithub.com

ascorblack/video-skills

Règles d'enregistrement de l'interface d'un programme pour vidéos, présentations et gifs — capture d'écran par image du navigateur en temps virtuel (headless Chrome, beginFrame), maquette avec données fictives, curseur, marqueurs pendant l'enregistrement, marges de silence au début et à la fin de la prise, tableau d'images, zooms et recadrage, écran du programme dans un cadre stylisé, version multilingue avec mêmes clics et synchronisation des mains en 3D avec l'enregistrement.

Qu'est-ce que video-skills ?

Ce paquet de compétences fournit des directives techniques pour enregistrer des interfaces utilisateur destinées à des vidéos didactiques, des présentations ou des GIF animés. Il couvre la capture image par image dans un navigateur headless Chrome en utilisant beginFrame pour un contrôle total du temps virtuel, évitant les artefacts des enregistrements en temps réel. Il recommande l'utilisation de maquettes avec données fictives et de marqueurs temporels pour faciliter le montage, ainsi que des marges de silence au début et à la fin de chaque prise. Le projet gère également les versions multilingues en synchronisant les séquences, et l'intégration de curseurs issus des mêmes événements que l'application. Il est utile pour les créateurs de contenu, les développeurs d'outils de démonstration et les intégrateurs vidéo, et s'applique à des outils comme Claude Code, Cursor ou Codex pour automatiser la capture et le montage d'enregistrements d'interface.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-ui-capture

Demander à votre IA préférée

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

Documentation

Enregistrement d'interface

Chaque règle est issue 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 mention du cas auquel chacun s'applique.

Règles courtes

  1. Capturez image par image ; le navigateur doit avancer en temps virtuel : une image avancée, une image capturée. L'enregistrement en temps réel brise les images. [Vidéo] [3D]
  2. Enregistrez uniquement une maquette avec des données fictives ; avant l'enregistrement, parcourez chaque écran des yeux. [Vidéo] [3D]
  3. La maquette doit être cohérente avec elle-même : deux écrans lisant un même fait disent la même chose. [Vidéo]
  4. Le curseur se dirige vers la cible, pas à côté ; dessinez-le sur la page à partir des mêmes événements que ceux qui vont à l'application. [Vidéo] [3D]
  5. Placez des marqueurs directement pendant l'enregistrement et associez les légendes et la caméra aux marqueurs, pas aux secondes. [Vidéo]
  6. Laissez des marges de silence au début et à la fin de chaque prise [Vidéo] ; dans la version multilingue, l'introduction et la conclusion ont la même longueur que dans l'original [3D].
  7. Consultez chaque prise à l'aide d'un tableau d'images de 4 à 6 images. [Vidéo]
  8. Toute attente de l'enregistreur doit avoir un délai d'attente ; arrêtez les processus en arrière-plan par PID. [Vidéo]
  9. Montrez l'enregistrement jusqu'au résultat visible de l'action ; le zoom doit porter sur un bloc entier, pas sur un bouton. [Vidéo] [3D]
  10. L'interface réelle ou dessinée dépend de la vidéo : une promotion du programme enregistre l'interface réelle [Vidéo], une vulgarisation scientifique stylisée la redessine [Vulga]. Voir framing.md.

Détails

  • recording.md — comment enregistrer : temps virtuel, maquette, marqueurs, marges, vérification de prise, enregistreur.
  • framing.md — l'enregistrement dans la vidéo : recadrage et accélération, zooms, curseur, écran dans un cadre stylisé, interface réelle ou dessinée.
  • languages-and-sync.md — version multilingue et synchronisation des mains 3D avec l'enregistrement.

Sources

  • [Vidéo] — leçons vidéo archivées : enregistrement d'interface, rythme, transitions.
  • [3D] — leçons de vidéo 3D à la première personne dans le navigateur, où les enregistrements d'écran sont intégrés dans une scène 3D.
  • [Vulga] — leçons de vidéo dans le style de la vulgarisation scientifique soviétique et du diaporama du début des années 70, avec des écrans de programmes dans le cadre.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

ascorblack/video-skills

Правила 3D-анимации для роликов в браузере (three.js → покадровый рендер) и анимации фигур с предметами — руки и тело от первого лица, рукав и манжета, контакт кисти с предметами и поверхностями, смешивание поз и углов, расталкивание персонажей, ходьба без скольжения, свечение, контактные тени, процедурные материалы, детекторы пересечений и рывков. Используй, когда строишь, анимируешь или проверяешь 3D-сцену, персонажей, руки, предметы в руках или свет в ролике.

ascorblack/video-skills

Правила звука для роликов — фоновая музыка и звуковое оформление, совпадение звука с картинкой, сведение голоса и музыки (LUFS, истинный пик, приглушение), удлинение музыки без стыков, синтез дикторской озвучки (дословность, темп), архивный «эфирный» голос с помехами, сдача звука и работа с API-ключами. Используй, когда делаешь, сводишь, проверяешь или правишь музыку, звуковые эффекты, озвучку или микс ролика.

ascorblack/video-skills

Правила рендера и оптимизации роликов из HTML/браузерных кадров — грабли покадрового рендера с перемоткой (твины, CSS-анимации, transform, aspect-ratio, SVG use, тяжёлые слои), детерминизм и повторяемость, где уходит время рендера, кодирование на NVENC с битрейтом, воркеры, отвязанный от сессии рендер, вшивание звука без перерендера картинки, проверка готового файла (ffprobe) и хранение версий. Используй, когда рендеришь, ускоряешь, кодируешь, пересобираешь или сдаёшь готовое видео.

ascorblack/video-skills

Rules for the visuals of videos about programs and popular-science videos — diagrams and connector lines, terms with applied examples, how long to hold a slide, transitions without jerking, camera push-ins, titles and figures in the frame, stylization in the manner of Soviet popular science and filmstrips (palette, fonts, grain, vignette). Use when designing, drawing or editing frames, slides, diagrams, titles, transitions or the style of a video, and when checking frames before assembly.

Skills associés