Communitygithub.com

vos launch-kit — One Take → PH/Store/Social

vosjs skill: ship media with the release. One take of the real product becomes the demo video, store listing (screenshots/tiles/marquee), Product Hunt gallery, social cuts, and OG card — each checked against per-channel specs in a kit.json manifest.

What is Store/Social?

Launch Video Step 3 (ship): one finished take → YouTube demo + thumbnail, X/LinkedIn cuts, Chrome Web Store shots, Product Hunt gallery, README loop, OG cards — verified kit.json.

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

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Launch kit — ship the media with the release

You are producing a RELEASE's media, not a video: one take of the shipped feature becomes every asset the release needs, composed, sized and verified per destination, kept as editable documents so the NEXT release is a re-render, not a re-shoot. Everything is data; the preview is the render; export is free at every resolution up to 4K, no watermark; the engine is MIT.

The kit is RENDERED in one verb, vos deliver, from documents that carry the taste: every card is a frame of a POSTER document (a plain take whose card sits where the poster wants it, with the words and the mark as clips), every cut plays the motion vos plan proposed into its document (an entrance, an end card, captions, a bed), the still moments come from the story, and two verifiers say what is wrong in words. deliver composes nothing. Your judgment goes into three files (BRAND.md, LAUNCH.md, actions.json), one pick (which poster on the shelf the cards follow) and one decision (which moments are the story), never into hand-cropping.

Setup

npm i -D @vosjs/cli    # the vos CLI (take pipeline included)

ffmpeg on PATH covers what the CLI does not emit (the PH hover-GIF) and lets vos validate --picture read a video's first and last frame. MP4 renders need system Chrome (--format mp4).

1. Establish the release

Five facts before any recording:

  • What shipped — the feature, the version string, the URL where it runs.

  • Which destinations — the per-channel spec table ships as data: node_modules/@vosjs/cli/schema/channel-specs.json (CWS, Product Hunt, X, LinkedIn, GitHub, OG, YouTube; sizes, counts, byte and duration ceilings, the word policy and the safe rect per destination, and each image's GENRE: screenshot is the real page, card is a frame of a poster document; references/channel-specs.md is the same data as a table). Loop over it, never hand-type dimensions. Ask which channels this release ships to; default to last release's set. The JSON carries a verified date; if it is more than a quarter old, spot-check the channel docs before shipping.

  • The brand — resolve it BEFORE authoring any asset, and never default to a layout's own palette. The project folder's BRAND.md is the brand kit (frontmatter carries the colour roles bgA bgB bgC ink accent, the face roles fontDisplay fontBody, logoUrl (a bare mark, never a tiled icon), wordmark, and look, the presentation the site's own ground asks for: plate for a paper site, dark for a dark one, else gradient). Absent one, vos brand <url> witnesses it from the site's /design.md, /llms.txt and the page itself, and writes every role with its provenance; read it, correct what a page cannot say, and file it with vos recipe push BRAND.md --folder <slug>. Place it BESIDE the take (or in the take's parent folder): plan and deliver read it there with no flag.

  • The words — LAUNCH.md beside the take carries the release's roles in its frontmatter, read with no flag:

    headline: "Two to six words\nover up to three lines"   # the posters and the end card
    kicker: "PRODUCT  V2.1"       # absent = the wordmark plus --release
    music: upbeat                 # a catalog slug or mood; none = silent
    entrance: tilt-in             # tilt-in | pull-out | rise | none
    endCard: on                   # the official End card template; none switches it off; a title, vos id or doc.json names another
    with: "Split cover, landscape@end"   # optional: any template laid at an anchor (@end | @start | @step:<id> | @<seconds>)
    captions: on                  # none switches the beat captions off
    poster: poster/landscape      # optional: the document every card renders from
    poster-tile: poster/tile      # optional: one class named on its own
    

    A headline is the ONE line the release says; write it over its lines with \n. vos plan reads the motion roles when it proposes the cut's motion and plan --style types the words into a poster; deliver reads only the poster roles, and with none it looks for poster/<class>/doc.json beside the take.

  • The layout — a poster the cards will follow, on a shelf. The official Poster families project on vos.so holds one exemplar per aspect class (landscape, square, portrait, tile) beside its POSTER.md, which says when each class is the one; a maker's own project is the same shape. vos folder pull poster-families lists them with their vos ids. There is no layout name and no --layout flag: the exemplar IS the layout, copied by data.

The destinations decide the VIEWPORT, before anything records: footage resolution = viewport, and a 1280×720 take cannot honestly fill a 1920×1080 video spec. Record at 1920×1080 for a 1080p kit, 2560×1440 when a destination is larger.

If the work lands in a vos.so project (folder), pull it first and read every .md recipe in it — LAUNCH.md binds this loop the way CUT.md binds a cut, and a POSTER.md binds the posters. Recipes override this skill's defaults.

2. Source: one take of the real thing

The kit is made FROM the product, never from a mockup (store policy agrees: misleading listing images are a removal-grade violation).

Stage the content like a set before recording. Half of what separates a premium launch image from a screen grab is what is ON the screen. The actions.json must leave the product in the state a proud screenshot would show — labels typed, real-looking data, the feature mid-story — before any poster or store still is cut. deliver drops a blank moment (a wallpaper, an empty canvas) and says so, but it cannot stage the set for you.

Write the story into actions.json. Give steps an id (the moments and the re-render loop address them by it) and a caption where a beat deserves one (two to eight words; plan proposes it as a lower-third at that step's moment on the cuts that take words). After a click that navigates, put a wait for the load: the still is read at the END of that wait, so the frame shows the page, never the spinner.

  • Fresh recording: the product-video skill's loop (explore → actions.json → vos record --strict → tune doc.json). Keep actions.json in the repo — it is the next release's script.
  • The shipped feature is behind a login: settle the session before the script, by the product-video skill's ladder (in full at https://vos.so/llms-full.txt, "Sessions"): mint one from the test auth the repo already has, else script the form off camera, else the human signs in once (vos session open <url> --name <app>, then --session <app>), else they record with the extension and you cut it. Record with --storage-state <file>. A release re-records every version, so prefer the rung that needs no human: it is the one that still works next release. Never type or accept a production password; keep the state file out of the take and out of git; record from a demo account, because a store listing showing a real customer's data is a removal-grade mistake.
  • Existing take: cut it with the vos-cut skill. A hosted take comes home with vos fetch <vosId|watch-url> --out dir --media.
  • New version of a shot product: re-record with vos record into the SAME take (the footage is replaced, the cut survives as doc.prev.json), then vos plan take --reuse re-times the cut onto the new recording and names what could not follow. Never start from scratch; every fix is an edit to doc.json.

A motion-graphic segment rendered elsewhere is an INPUT: it drops in as a media overlay clip or a backdrop in the document, never the other way round.

3. The posters and the motion, as documents

The cut moves by data. A fresh vos plan proposes the cut's motion into doc.json from LAUNCH.md's roles: the card's entrance, the END CARD (the official End card template on vos.so, laid at the end: the card recedes over a one-second freeze of its last frame, then the mark, the headline arriving word by word, the release line and the URL settle on the ground; its clips are stamped from: endcard), any template with: names at its anchor, a caption per step, a music bed and a click sound on every press when the take has no mic; every proposal carries a stable id (bed, click-<n>, caption-<step>). On an existing cut --motion re-proposes; a refresh never does, so a deleted end card stays deleted. A template is a plain take on a shelf whose clips carry stable ids; a ref is a title on the official shelf ("End card", "Split cover, square"), a vos id, or a document on disk. Open the take in the studio and what you see is what the kit renders.

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

A poster is a DOCUMENT, a plain take: the card placed by frame.inset (a negative side bleeds it off the edge), leaned by the tilt track's rest pose, the words and the mark as overlay clips with stable ids (stage-title, stage-kicker, stage-brand, stage-mark), and a trailing hold on the last segment whose START is the still. Make one per aspect class the release needs (landscape, square, portrait, tile), each from the take's own footage:

cp -r take poster/landscape            # or vos duplicate <take vosId>, then 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> copies the LAYOUT (the card's placement and presentation, the stage clips with the release's words patched in from LAUNCH.md or the flags, the rest lean, the hold) onto the take and keeps the take's own aspect, chrome and cut; the brand's mark from BRAND.md logoUrl is fetched into brand/ for stage-mark, and what could not follow is said. Narrow the segments to the moment (a zoom apex, the settled response after a click) so the rest is the feature, never the cold open; the product may keep PLAYING inside the card until the hold. Then look at the rest frame: a poster is judged by eye before it is pushed. A human opens it in the studio and drags the card, retypes the words in place, moves the hold; vos pull --media brings that back down, and the next release re-words it with the same plan --style from its own pushed document.

4. Deliver

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

One pass, and the verb decides what you used to decide by hand:

  • The moments. Still times come from the STORY: every step's end plus a settle (the end of the wait that follows a click), then the zoom apexes, then a spread. Each candidate is read once as the real page; blanks are dropped, two of one frame collapse to one, every drop said in skipped[]. --times step:<id>[+offset] names one.
  • Screenshots are the real page, full bleed: the store still and the gallery drop the cut's zoom, tilt and chrome by default (--composed keeps them, and the picture pass refuses

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.

Related Skills