Communitygithub.com

vos launch-kit — une prise → PH/store/social

Skill vosjs : livrer les médias avec le release. Une prise → démo, store, galerie PH, social, OG — specs dans kit.json.

Qu'est-ce que store/social ?

Launch Video étape 3 : une prise → YouTube/store/PH/SNS/OG. kit.json vérifié.

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

Demander à votre IA préférée

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

Documentation

Launch kit — livrez les médias avec la version

Vous produisez les MÉDIAS d'une VERSION, pas une vidéo : une seule prise de la fonctionnalité livrée devient tous les actifs dont la version a besoin, composés, dimensionnés et vérifiés par destination, conservés sous forme de documents modifiables pour que la PROCHAINE version soit un nouveau rendu, pas un nouveau tournage. Tout est donnée ; l'aperçu est le rendu ; l'export est gratuit à toutes les résolutions jusqu'à 4K, sans filigrane ; le moteur est sous licence MIT.

Le kit est RENDU en une seule commande, vos deliver, à partir de documents qui portent le style : chaque carte est une image d'un document AFFICHE (une prise simple dont la carte se trouve là où l'affiche le souhaite, avec les mots et la marque sous forme de clips), chaque coupe joue le mouvement que vos plan a proposé dans son document (une entrée, une carte de fin, des sous-titres, un fond sonore), les moments fixes proviennent de l'histoire, et deux vérificateurs disent ce qui ne va pas en mots. deliver ne compose rien. Votre jugement va dans trois fichiers (BRAND.md, LAUNCH.md, actions.json), un choix (quelle affiche sur l'étagère les cartes suivent) et une décision (quels moments sont l'histoire), jamais dans un recadrage manuel.

Configuration

npm i -D @vosjs/cli    # la CLI vos (pipeline de prise inclus)

ffmpeg dans le PATH couvre ce que la CLI n'émet pas (le GIF animé PH) et permet à vos validate --picture de lire la première et la dernière image d'une vidéo. Les rendus MP4 nécessitent Chrome système (--format mp4).

1. Établir la version

Cinq faits avant tout enregistrement :

  • Ce qui a été livré — la fonctionnalité, la chaîne de version, l'URL où elle s'exécute.

  • Quelles destinations — la table des spécifications par canal est livrée en tant que données : node_modules/@vosjs/cli/schema/channel-specs.json (CWS, Product Hunt, X, LinkedIn, GitHub, OG, YouTube ; tailles, nombres, limites d'octets et de durée, la politique de mots et le rectangle de sécurité par destination, et chaque GENRE d'image : screenshot est la vraie page, card est une image d'un document d'affiche ; references/channel-specs.md contient les mêmes données sous forme de tableau). Bouclez dessus, ne tapez jamais les dimensions à la main. Demandez quels canaux cette version livre ; par défaut, l'ensemble de la dernière version. Le JSON contient une date verified ; si elle date de plus d'un trimestre, vérifiez les documents des canaux avant de livrer.

  • La marque — résolvez-la AVANT de créer tout actif, et ne vous rabattez jamais sur la palette d'une mise en page. Le fichier BRAND.md du dossier du projet est le kit de marque (le frontmatter porte les rôles de couleur bgA bgB bgC ink accent, les rôles de police fontDisplay fontBody, logoUrl (une marque nue, jamais une icône en mosaïque), wordmark, et look, la présentation que le propre terrain du site demande : plate pour un site papier, dark pour un site sombre, sinon gradient). S'il est absent, vos brand <url> le constate à partir du /design.md du site, de /llms.txt et de la page elle-même, et écrit chaque rôle avec sa provenance ; lisez-le, corrigez ce qu'une page ne peut pas dire, et déposez-le avec vos recipe push BRAND.md --folder <slug>. Placez-le À CÔTÉ de la prise (ou dans le dossier parent de la prise) : plan et deliver le lisent là sans aucun indicateur.

  • Les mots — LAUNCH.md à côté de la prise porte les rôles de la version dans son frontmatter, lu sans indicateur :

    headline: "Deux à six mots\nsur jusqu'à trois lignes"   # les affiches et la carte de fin
    kicker: "PRODUIT  V2.1"       # absent = le wordmark plus --release
    music: upbeat                 # un slug de catalogue ou une ambiance ; none = silencieux
    entrance: tilt-in             # tilt-in | pull-out | rise | none
    endCard: on                   # le modèle officiel de carte de fin ; none l'éteint ; un titre, un vos id ou un doc.json en nomme un autre
    with: "Split cover, landscape@end"   # optionnel : tout modèle placé à une ancre (@end | @start | @step:<id> | @<secondes>)
    captions: on                  # none éteint les sous-titres rythmiques
    poster: poster/landscape      # optionnel : le document dont chaque carte est rendue
    poster-tile: poster/tile      # optionnel : une classe nommée seule
    

    Un titre est la SEULE ligne que la version dit ; écrivez-le sur ses lignes avec \n. vos plan lit les rôles de mouvement lorsqu'il propose le mouvement de la coupe et plan --style tape les mots dans une affiche ; deliver lit uniquement les rôles poster, et s'il n'y en a pas, il cherche poster/<class>/doc.json à côté de la prise.

  • La mise en page — une affiche que les cartes suivront, sur une étagère. Le projet officiel Poster families sur vos.so contient un exemplaire par classe d'aspect (landscape, square, portrait, tile) à côté de son POSTER.md, qui indique quand chaque classe est la bonne ; le propre projet d'un créateur a la même forme. vos folder pull poster-families les liste avec leurs vos ids. Il n'y a pas de nom de mise en page ni de drapeau --layout : l'exemplaire EST la mise en page, copiée par données.

Les destinations déterminent le VIEWPORT, avant tout enregistrement : la résolution de la prise de vue = viewport, et une prise de 1280×720 ne peut pas honnêtement remplir une spécification vidéo 1920×1080. Enregistrez en 1920×1080 pour un kit 1080p, 2560×1440 lorsqu'une destination est plus grande.

Si le travail atterrit dans un projet vos.so (dossier), tirez-le d'abord et lisez chaque recette .md qu'il contient — LAUNCH.md lie cette boucle comme CUT.md lie une coupe, et un POSTER.md lie les affiches. Les recettes remplacent les valeurs par défaut de cette compétence.

2. Source : une prise de la vraie chose

Le kit est FABRIQUÉ À PARTIR du produit, jamais à partir d'une maquette (la politique du store est d'accord : les images d'annonce trompeuses sont une violation passible de retrait).

Mettez en scène le contenu comme un plateau avant d'enregistrer. La moitié de ce qui distingue une image de lancement premium d'une capture d'écran est ce qui est À L'ÉCRAN. Le fichier actions.json doit laisser le produit dans l'état qu'une fière capture d'écran montrerait — des étiquettes tapées, des données réalistes, la fonctionnalité en pleine histoire — avant qu'une affiche ou une image de store ne soit découpée. deliver laisse tomber un moment vide (un papier peint, une toile vierge) et le dit, mais il ne peut pas mettre en scène le plateau pour vous.

Écrivez l'histoire dans actions.json. Donnez aux étapes un id (les moments et la boucle de nouveau rendu les adressent par celui-ci) et un caption là où un temps fort le mérite (de deux à huit mots ; plan le propose comme un tiers inférieur à ce moment de l'étape sur les coupes qui prennent des mots). Après un clic qui navigue, mettez un wait pour le chargement : l'image fixe est lue à la FIN de cette attente, donc l'image montre la page, jamais le spinner.

  • Nouvel enregistrement : la boucle de la compétence product-video (explorez → actions.json → vos record --strict → ajustez doc.json). Conservez actions.json dans le dépôt — c'est le script de la prochaine version.
  • La fonctionnalité livrée est derrière une connexion : réglez la session avant le script, par l'échelle de la compétence product-video (en entier sur https://vos.so/llms-full.txt, "Sessions") : créez-en une à partir de l'auth de test que le dépôt possède déjà, sinon scriptez le formulaire hors caméra, sinon l'humain se connecte une fois (vos session open <url> --name <app>, puis --session <app>), sinon ils enregistrent avec l'extension et vous coupez. Enregistrez avec --storage-state <file>. Une version réenregistre chaque version, donc préférez l'échelon qui n'a besoin d'aucun humain : c'est celui qui fonctionne encore à la prochaine version. Ne tapez ni n'acceptez jamais un mot de passe de production ; gardez le fichier d'état hors de la prise et hors de git ; enregistrez à partir d'un compte de démo, car une annonce de store montrant les données d'un vrai client est une erreur passible de retrait.
  • Prise existante : coupez-la avec la compétence vos-cut. Une prise hébergée revient à la maison avec vos fetch <vosId|watch-url> --out dir --media.
  • Nouvelle version d'un produit déjà filmé : réenregistrez avec vos record dans la MÊME prise (la séquence est remplacée, la coupe survit sous doc.prev.json), puis vos plan take --reuse re-synchronise la coupe sur le nouvel enregistrement et nomme ce qui n'a pas pu suivre. Ne recommencez jamais à zéro ; chaque correction est une modification de doc.json.

Un segment graphique animé rendu ailleurs est une ENTRÉE : il tombe comme un clip de superposition média ou un arrière-plan dans le document, jamais l'inverse.

3. Les affiches et le mouvement, en tant que documents

La coupe se déplace par données. Un vos plan frais propose le mouvement de la coupe dans doc.json à partir des rôles de LAUNCH.md : l'entrée de la carte, la CARTE DE FIN (le modèle End card officiel sur vos.so, placé à la fin : la carte recule sur un gel d'une seconde de sa dernière image, puis la marque, le titre arrivant mot par mot, la ligne de version et l'URL se posent sur le fond ; ses clips sont estampillés from: endcard), tout modèle with: nommé à son ancre, une légende par étape, un fond sonore et un son de clic sur chaque pression lorsque la prise n'a pas de micro ; chaque proposition porte un id stable (bed, click-<n>, caption-<step>). Sur une coupe existante, --motion re-propose ; un rafraîchissement ne le fait jamais, donc une carte de fin supprimée reste supprimée. Un modèle est une prise simple sur une étagère dont les clips portent des ids stables ; une référence est un titre sur l'étagère officielle ("End card", "Split cover, square"), un vos id, ou un document sur disque. Ouvrez la prise dans le studio et ce que vous voyez est ce que le kit rend.

vos plan take --motion --release v2.1

Une affiche est un DOCUMENT, une prise simple : la carte placée par frame.inset (un côté négatif la déborde du bord), inclinée par la pose de repos de la piste d'inclinaison, les mots et la marque comme clips de superposition avec des ids stables (stage-title, stage-kicker, stage-brand, stage-mark), et un hold final sur le dernier segment dont le DÉBUT est l'image fixe. Créez-en une par classe d'aspect dont la version a besoin (landscape, square, portrait, tile), chacune à partir de la propre séquence de la prise :

cp -r take poster/landscape            # ou vos duplicate <take vosId>, puis fetch --media
vos plan poster/landscape --style <poster vosId|doc.json> --headline "…" --kicker "…"
vos frames poster/landscape --frame <rest>; vos validate poster/landscape
vos push poster/landscape --folder <project-slug> --label "poster, landscape"

plan --style <poster> copie la MISE EN PAGE (le placement et la présentation de la carte, les clips de scène avec les mots de la version injectés depuis LAUNCH.md ou les indicateurs, le reste incliné, le hold) sur la prise et conserve le propre aspect, chrome et coupe de la prise ; la marque de BRAND.md logoUrl est récupérée dans brand/ pour stage-mark, et ce qui n'a pas pu suivre est dit. Réduisez les segments au moment (un apex de zoom, la réponse stabilisée après un clic) pour que le reste soit la fonctionnalité, jamais l'ouverture à froid ; le produit peut CONTINUER À JOUER à l'intérieur de la carte jusqu'au hold. Regardez ensuite l'image de repos : une affiche est jugée à l'œil avant d'être poussée. Un humain l'ouvre dans le studio et fait glisser la carte, retape les mots en place, déplace le hold ; vos pull --media ramène cela, et la prochaine version le remet en mots avec le même plan --style à partir de son propre document poussé.

4. Livrer

vos deliver take --to cws,producthunt,x,linkedin,og,github,youtube --release v2.1

Un seul passage, et la commande décide ce que vous décidiez à la main :

  • Les moments. Les temps fixes proviennent de l'HISTOIRE : la fin de chaque étape plus un temps de stabilisation (la fin de l'attente qui suit un clic), puis les apex de zoom, puis un étalement. Chaque candidat est lu une fois comme la vraie page ; les blancs sont supprimés, deux occurrences d'une même image se réduisent à une, chaque suppression est dite dans skipped[]. --times step:<id>[+offset] en nomme un.
  • Les captures d'écran sont la vraie page, à fond perdu : l'image du store et la galerie suppriment le zoom, l'inclinaison et le chrome de la coupe par défaut (--composed les conserve, et le passage d'image refuse

Individual skills in this repo

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

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-footage

Hand a Remotion, HyperFrames, or any video composition a clean captured clip of the real product — recorded and auto-zoomed with the vos CLI, delivered as full-bleed footage with no chrome, and always backed by an editable take on the maker's shelf, which the handoff says. Use when a composition needs real product footage, app or site b-roll, "capture our app for the video", or a screen-recorded segment to drop into another tool's timeline.

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