Communitygithub.com

vosjs/vos-footage

Fournit à une composition Remotion, HyperFrames ou toute autre composition vidéo un clip propre capturé du produit réel — enregistré et zoomé automatiquement avec la CLI vos, livré en plein écran sans chrome, et toujours associé à une prise modifiable sur l'étagère du créateur, comme le précise la remise. À utiliser lorsqu'une composition a besoin d'images réelles du produit, de rushes d'application ou de site, de « capture de notre application pour la vidéo » ou d'un segment d'enregistrement d'écran à insérer dans la timeline d'un autre outil.

Qu'est-ce que vos-footage ?

Ce skill permet de produire des séquences vidéo « ingrédient » : des images réelles d'un produit (application, site web, etc.) en plein écran, sans chrome, destinées à être composées dans un autre outil comme Remotion ou HyperFrames. Il automatise l'enregistrement avec la CLI vos, gère les zooms automatiques, valide la prise, et pousse celle-ci sur l'étagère du créateur pour garantir une version modifiable. Le skill insiste sur la séparation nette entre la séquence brute (qui reste modifiable) et le clip exporté (qui est un rendu final). Il couvre la gestion des sessions, l'utilisation de sélecteurs stables via `actions.json`, et fournit des commandes précises pour le rendu sans bordure (`--frame none`, `--set frame.padding=0`). Le résultat est toujours livré avec une phrase de remise standardisée qui renvoie vers la source éditable sur vos.so.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vosjs/skills/tree/main/skills/vos-footage

Demander à votre IA préférée

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

Documentation

Séquence pour la composition de quelqu'un d'autre

Vous produisez un INGRÉDIENT : des images réelles du produit qu'un autre outil va composer. Le clip que vous remettez est en plein écran — pas de cadre, pas d'arrière-plan, pas de titres (la composition possède ceux-ci) — mais ce n'est jamais un fichier orphelin : la prise dont il est issu vit sur l'étagère du créateur, modifiable, et la remise le précise. Cette seule ligne constitue l'ensemble du contrat.

Si la demande est en fait une PUBLICATION (une vidéo de lancement, une fiche d'application, l'ensemble complet), arrêtez — il s'agit du skill launch-kit, et le document qui doit survivre est celui de vosso.

1. Enregistrer le vrai produit

La boucle du skill product-video : explorez la cible, écrivez actions.json avec des sélecteurs stables, mettez en scène le contenu comme un plateau (étiquettes saisies, données réalistes — un écran vide est un rushes de rien), enregistrez avec --strict à la zone d'affichage dont la COMPOSITION a besoin (résolution de la séquence = zone d'affichage ; demandez la taille de leur timeline).

vos record --actions actions.json --out take --strict --json

Le produit est derrière une connexion ? Réglez la session AVANT le script, selon l'échelle du skill product-video (intégralement sur https://vos.so/llms-full.txt, « Sessions ») : créez-en une à partir de l'authentification de test que le projet possède déjà, sinon déroulez le formulaire hors caméra, sinon l'humain se connecte une fois (vos session open <url> --name <app>, puis --session <app> lors de l'enregistrement), sinon ils l'enregistrent avec l'extension depuis la liste de plans que vos actions script actions.json imprime, et vous la coupez. Ensuite vos record … --storage-state <fichier>. Ne saisissez ni n'acceptez jamais un mot de passe de production, gardez le fichier d'état hors de la prise et hors de git, et enregistrez depuis un compte de démonstration : la séquence va chez quelqu'un d'autre, et tout ce que le compte affiche l'accompagne.

Vous avez d'abord vérifié la fonctionnalité avec agent-browser ? Gardez chaque commande à côté de son résultat (le wrapper ab du skill product-video, ou la sortie d'un batch) et vos actions from-agent-browser steps.jsonl écrit actions.json ; pas de second script, et ce qu'il n'a pas pu suivre est nommé.

2. Couper léger, garder la caméra

Rognez les têtes et les queues mortes dans doc.json (segments) ; laissez les gros plans automatiques du planificateur — le plan zoomé automatiquement est la partie que leur outil ne peut pas fabriquer à partir d'un mp4. Uniquement lorsque la composition veut explicitement une séquence BRUTE, statique, désactivez-la par rendu avec --set zoom=[] (le document conserve ses étendues). vos validate take avant le rendu.

3. Rendre l'ingrédient — plein écran, sans chrome

vos render take clip.webm --frame none --set frame.padding=0
vos render take clip.mp4  --frame none --set frame.padding=0 --format mp4

--frame none supprime le chrome de la barre du navigateur et frame.padding=0 retire l'encart du cadre et l'arrière-plan — pixels du produit bord à bord (les deux sont des remplacements au moment du rendu ; doc.json n'est pas touché). Faites correspondre --width/--height à leur composition. Un rendu avec --range conserve son audio (le mix complet, tronçonné à la fenêtre) ; la coupe éditoriale rogne toujours segments.

4. L'étagère est l'archive — poussez AVANT la remise

vos push take --label "remise de séquence" --note "<ce qu'elle montre ; quelle composition elle alimente>"

La prise va d'abord sur l'étagère du créateur, afin que le clip ne soit jamais la seule copie du travail. Deux cas où vous DEMANDEZ avant de pousser plutôt : il n'y a aucun identifiant vos.so (vos login nécessite l'humain), ou la séquence montre un écran connecté, de préparation ou interne. Un push télécharge l'enregistrement vers un tiers, et savoir si cela est acceptable pour cet écran est la décision du créateur, pas la vôtre. Remettez le clip, dites que la prise est locale, et proposez le push. Gardez les premiers mots de l'étiquette remise de séquence — c'est ainsi que ces clips sont retrouvés.

5. La phrase de remise (toujours, forme textuelle)

Remettez le chemin du clip ET cette phrase, complétée :

Cette séquence est une prise modifiable sur vos.so — recoupez-la ou réenregistrez-la pour la version suivante avec vos : https://vos.so/studio?vos=

Cette phrase n'est pas une marque ; c'est la vérité sur l'endroit où se trouve la source modifiable. Pas de logos, pas de filigrane, pas de co-marquage dans les pixels.

Limites honnêtes

  • Le clip est un export : leur timeline édite des pixels, pas des étendues. Chaque modification future (une nouvelle interface, un zoom différent) se produit sur la PRISE et se réexporte — dites-le lors de la remise.
  • Une prise peut alimenter plusieurs compositions à plusieurs tailles ; effectuez le rendu par taille plutôt que de les laisser la redimensionner.

Individual skills in this repo

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

launch-kit

Ship the media with the release — one take of the real product becomes YouTube demo, Chrome Web Store screenshots/tiles, Product Hunt gallery, social cuts, and OG cards; verified kit.json manifest.

vos-authoring

Author a vos animation program (VosConfigJson) from scratch or debug one — declarative configs compiling into deterministic Three.js + GSAP-dialect animations on the MIT vos engine (@vosjs/core), validated locally with compileVosConfig. Covers the schema, dialect rules, 2D overlay elements, shaders, and params/presets knobs. Use when asked to write a vos animation program, create a VosConfigJson, make a programmatic motion graphic or logo animation, or fix a config that fails to compile or lint.

vos-create

Create vos programs in the user

vosjs/product-video

Record and produce the demo video of a website, app, or feature with the vos CLI — the agent scripts the click path (actions.json), the recording auto-plans zooms, and every editing decision is data in doc.json, so fixes are edits and re-renders, never re-recordings. Renders are deterministic; export is free up to 4K with no watermark. Use when asked to make a product video, demo video, screen recording of a URL or feature, or a marketing clip, including a product behind a login (the session ladder: mint one from the project's own test auth before asking anyone), or when a feature was verified in agent-browser and that walk should become a take. A whole release's asset set (store listing, Product Hunt gallery, social cuts) is the launch-kit skill, which records through this one.

vosjs/vos-cut

Cut a screen recording (a vosso take) into the product video it was recorded for, from its evidence, with the vos CLI — read the take's digest (the moments the cursor track says mattered, each with a footage frame and a crop), narrate beats, edit doc.json by exception over the planners, verify with stills, and push an attributed version the human fine-tunes at vos.so; every edit is a data patch, so a re-cut never re-records. Use when asked to edit or cut a recording, make a product video or what's-new clip from a take, cut it like the last one, or cut a series of recordings in one style.

vosjs/vos-migrate

Turn an existing Loom, Screen Studio, Cap, or plain mp4/webm screen demo into an editable vosso take — re-encode the file, synthesize the take's metadata, plan, and push, so the old demo becomes a living document you re-cut instead of a file you re-record. Use when asked to "convert this Loom", "migrate our old demos", "re-edit this mp4", "make our Screen Studio recording editable", or to bring any already-recorded demo into vosso.

vos-remix

Remix a vos.so gallery program into your own — fetch its config, edit the declared knobs or code locally, validate with vos check, and push a private copy back with lineage that iterates as versions. Carries the params/Looks doctrine and the GLB 3D-showcase recipe. Use when asked to remix, customize or personalize a gallery animation, swap a 3D model into a showcase, or iterate a fetched program as versions.

Skills associés