Communitygithub.com

vos launch-kit — una toma → PH/tienda/social

Skill vosjs: envía media con el release. Una toma del producto real se convierte en demo, listing de tienda, galería PH, cortes sociales y OG card — cada canal validado en kit.json.

¿Qué es tienda/social?

Launch Video paso 3 (enviar): una toma lista → demo YouTube + thumb, cortes X/LinkedIn, shots Chrome Web Store, galería Product Hunt, loop README, OG — kit.json verificado.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Launch kit — envía los medios con el lanzamiento

Estás produciendo los MEDIOS de un LANZAMIENTO, no un video: una sola toma de la función enviada se convierte en todos los activos que el lanzamiento necesita, compuestos, dimensionados y verificados por destino, mantenidos como documentos editables para que el PRÓXIMO lanzamiento sea una re-renderización, no una nueva grabación. Todo son datos; la previsualización es la renderización; la exportación es gratuita en cualquier resolución hasta 4K, sin marca de agua; el motor es MIT.

El kit se RENDERIZA con un solo verbo, vos deliver, a partir de documentos que reflejan el estilo: cada tarjeta es un fotograma de un documento PÓSTER (una toma simple cuya tarjeta se sitúa donde el póster la quiere, con las palabras y la marca como clips), cada corte reproduce el movimiento que vos plan propuso en su documento (una entrada, una tarjeta final, subtítulos, una pista musical), los momentos estáticos provienen de la historia, y dos verificadores dicen qué está mal en palabras. deliver no compone nada. Tu criterio se registra en tres archivos (BRAND.md, LAUNCH.md, actions.json), una selección (qué póster del estante siguen las tarjetas) y una decisión (qué momentos son la historia), nunca en recortes manuales.

Configuración

npm i -D @vosjs/cli    # la CLI de vos (la canalización de toma incluida)

ffmpeg en PATH cubre lo que la CLI no emite (el GIF hover de Product Hunt) y permite que vos validate --picture lea el primer y último fotograma de un video. Las renderizaciones MP4 necesitan Chrome del sistema (--format mp4).

1. Establecer el lanzamiento

Cinco hechos antes de cualquier grabación:

  • Qué se envió — la función, la cadena de versión, la URL donde se ejecuta.

  • Qué destinos — la tabla de especificaciones por canal se envía como datos: node_modules/@vosjs/cli/schema/channel-specs.json (CWS, Product Hunt, X, LinkedIn, GitHub, OG, YouTube; tamaños, cantidades, límites de bytes y duración, la política de palabras y el rectángulo seguro por destino, y el GÉNERO de cada imagen: screenshot es la página real, card es un fotograma de un documento de póster; references/channel-specs.md son los mismos datos en una tabla). Recórrelo, nunca escribas dimensiones a mano. Pregunta a qué canales se envía este lanzamiento; por defecto, el conjunto del último lanzamiento. El JSON lleva una fecha verified; si tiene más de un trimestre de antigüedad, verifica los documentos del canal puntualmente antes de enviar.

  • La marca — resuélvela ANTES de crear cualquier activo, y nunca uses por defecto la paleta de un diseño. El archivo BRAND.md de la carpeta del proyecto es el kit de marca (el frontmatter contiene los roles de color bgA bgB bgC ink accent, los roles de tipografía fontDisplay fontBody, logoUrl (una marca simple, nunca un icono con mosaico), wordmark y look, la presentación que el propio terreno del sitio solicita: plate para un sitio de papel, dark para uno oscuro, o si no gradient). Si no existe, vos brand <url> lo captura del sitio /design.md, /llms.txt y de la página misma, y escribe cada rol con su procedencia; léelo, corrige lo que una página no puede decir, y archívalo con vos recipe push BRAND.md --folder <slug>. Colócalo JUNTO a la toma (o en la carpeta principal de la toma): plan y deliver lo leen allí sin bandera.

  • Las palabras — LAUNCH.md junto a la toma lleva los roles del lanzamiento en su frontmatter, leído sin bandera:

    headline: "Dos a seis palabras\nen hasta tres líneas"   # los pósters y la tarjeta final
    kicker: "PRODUCTO  V2.1"       # ausente = la marca más --release
    music: upbeat                 # un slug de catálogo o estado de ánimo; none = silencio
    entrance: tilt-in             # tilt-in | pull-out | rise | none
    endCard: on                   # la plantilla oficial de tarjeta final; none la desactiva; un título, vos id o doc.json nombra otra
    with: "Split cover, landscape@end"   # opcional: cualquier plantilla colocada en un ancla (@end | @start | @step:<id> | @<segundos>)
    captions: on                  # none desactiva los subtítulos de ritmo
    poster: poster/landscape      # opcional: el documento del que se renderiza cada tarjeta
    poster-tile: poster/tile      # opcional: una clase nombrada por sí misma
    

    Un titular es la ÚNICA línea que dice el lanzamiento; escríbelo en sus líneas con \n. vos plan lee los roles de movimiento cuando propone el movimiento del corte y plan --style escribe las palabras en un póster; deliver lee solo los roles de poster, y si no hay ninguno, busca poster/<clase>/doc.json junto a la toma.

  • El diseño — un póster que las tarjetas seguirán, en un estante. El proyecto oficial Poster families en vos.so contiene un ejemplar por clase de aspecto (landscape, square, portrait, tile) junto a su POSTER.md, que dice cuándo cada clase es la indicada; el propio proyecto de un creador tiene la misma forma. vos folder pull poster-families los lista con sus vos ids. No hay nombre de diseño ni bandera --layout: el ejemplar ES el diseño, copiado por datos.

Los destinos deciden el VIEWPORT, antes de que se grabe cualquier cosa: la resolución del metraje = viewport, y una toma de 1280×720 no puede llenar honestamente una especificación de video de 1920×1080. Graba a 1920×1080 para un kit de 1080p, 2560×1440 cuando un destino es más grande.

Si el trabajo termina en un proyecto vos.so (carpeta), tíralo primero y lee cada receta .md que contenga — LAUNCH.md vincula este bucle de la manera en que CUT.md vincula un corte, y un POSTER.md vincula los pósters. Las recetas anulan los valores predeterminados de esta skill.

2. Fuente: una toma real

El kit se hace DESDE el producto, nunca desde un mockup (la política de la tienda está de acuerdo: las imágenes de listado engañosas son una violación que lleva a la eliminación).

Prepara el contenido como un escenario antes de grabar. La mitad de lo que separa una imagen de lanzamiento premium de una captura de pantalla es lo que ESTÁ en la pantalla. El archivo actions.json debe dejar el producto en el estado que mostraría una captura de pantalla orgullosa — etiquetas escritas, datos con aspecto real, la función en medio de la historia — antes de que se corte cualquier póster o imagen de tienda. deliver elimina un momento en blanco (un fondo de pantalla, un lienzo vacío) y lo dice, pero no puede preparar el escenario por ti.

Escribe la historia en actions.json. Asigna un id a los pasos (los momentos y el bucle de re-renderización se dirigen a ellos mediante él) y un caption donde un ritmo lo merezca (de dos a ocho palabras; plan lo propone como un tercio inferior en ese momento del paso en los cortes que toman palabras). Después de un clic que navega, pon un wait para la carga: la imagen fija se lee al FINAL de esa espera, por lo que el fotograma muestra la página, nunca el spinner.

  • Grabación nueva: el bucle de la skill product-video (explora → actions.json → vos record --strict → ajusta doc.json). Guarda actions.json en el repositorio: es el guión para el próximo lanzamiento.
  • La función enviada está detrás de un inicio de sesión: resuelve la sesión antes del guión, mediante la escalera de la skill product-video (completa en https://vos.so/llms-full.txt, "Sessions"): crea una a partir de la autenticación de prueba que el repositorio ya tiene, si no, escribe el formulario fuera de cámara, o si no, el humano inicia sesión una vez (vos session open <url> --name <app>, luego --session <app>), o si no, graban con la extensión y tú lo cortas. Graba con --storage-state <archivo>. Un lanzamiento regraba cada versión, así que prefiere el peldaño que no necesita humano: es el que sigue funcionando en el próximo lanzamiento. Nunca escribas ni aceptes una contraseña de producción; mantén el archivo de estado fuera de la toma y fuera de git; graba desde una cuenta de demostración, porque una lista de tienda que muestra datos reales de un cliente es un error de eliminación.
  • Toma existente: córtala con la skill vos-cut. Una toma alojada vuelve a casa con vos fetch <vosId|watch-url> --out dir --media.
  • Nueva versión de un producto ya grabado: regraba con vos record en la MISMA toma (el metraje se reemplaza, el corte sobrevive como doc.prev.json), luego vos plan take --reuse re-temporiza el corte en la nueva grabación y nombra lo que no pudo seguir. Nunca empieces desde cero; cada corrección es una edición de doc.json.

Un segmento de gráficos en movimiento renderizado en otro lugar es una ENTRADA: se inserta como un clip de superposición de medios o un fondo en el documento, nunca al revés.

3. Los pósters y el movimiento, como documentos

El corte se mueve por datos. Un vos plan nuevo propone el movimiento del corte en doc.json a partir de los roles de LAUNCH.md: la entrada de la tarjeta, la TARJETA FINAL (la plantilla oficial End card en vos.so, colocada al final: la tarjeta se retrae sobre una congelación de un segundo de su último fotograma, luego la marca, el titular llegando palabra por palabra, la línea de lanzamiento y la URL se asientan en el fondo; sus clips están marcados con from: endcard), cualquier plantilla with: nombra en su ancla, un subtítulo por paso, una pista musical y un sonido de clic en cada presión cuando la toma no tiene micrófono; cada propuesta lleva un id estable (bed, click-<n>, caption-<paso>). En un corte existente, --motion vuelve a proponer; una actualización nunca lo hace, por lo que una tarjeta final eliminada permanece eliminada. Una plantilla es una toma simple en un estante cuyos clips llevan ids estables; una referencia es un título en el estante oficial ("End card", "Split cover, square"), un vos id, o un documento en disco. Abre la toma en el estudio y lo que ves es lo que el kit renderiza.

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

Un póster es un DOCUMENTO, una toma simple: la tarjeta colocada por frame.inset (un lado negativo lo sangra fuera del borde), inclinada por la pose de reposo de la pista de inclinación, las palabras y la marca como clips de superposición con ids estables (stage-title, stage-kicker, stage-brand, stage-mark), y una hold final en el último segmento cuyo INICIO es la imagen fija. Haz uno por clase de aspecto que el lanzamiento necesite (landscape, square, portrait, tile), cada uno a partir del propio metraje de la toma:

cp -r take poster/landscape            # o vos duplicate <take vosId>, luego 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 <slug-del-proyecto> --label "poster, landscape"

plan --style <poster> copia el DISEÑO (la colocación y presentación de la tarjeta, los clips de escenario con las palabras del lanzamiento parcheadas desde LAUNCH.md o las banderas, la inclinación restante, la hold) en la toma y mantiene el aspecto, el cromo y el corte de la propia toma; la marca de BRAND.md logoUrl se obtiene en brand/ para stage-mark, y lo que no pudo seguir se dice. Reduce los segmentos al momento (un ápice de zoom, la respuesta asentada después de un clic) para que el resto sea la función, nunca la apertura en frío; el producto puede SEGUIR REPRODUCIÉNDOSE dentro de la tarjeta hasta la hold. Luego mira el fotograma de reposo: un póster se juzga a ojo antes de enviarlo. Un humano lo abre en el estudio y arrastra la tarjeta, vuelve a escribir las palabras en su lugar, mueve la hold; vos pull --media lo trae de vuelta, y el próximo lanzamiento vuelve a redactarlo con el mismo plan --style a partir de su propio documento enviado.

4. Entregar

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

Un solo paso, y el verbo decide lo que solías decidir a mano:

  • Los momentos. Los tiempos de imagen fija provienen de la HISTORIA: el final de cada paso más un asentamiento (el final de la espera que sigue a un clic), luego los ápices de zoom, luego una dispersión. Cada candidato se lee una vez como la página real; los vacíos se eliminan, dos de un mismo fotograma se colapsan en uno, cada eliminación se dice en skipped[]. --times step:<id>[+offset] nombra uno.
  • Las capturas de pantalla son la página real, a sangre completa: la imagen de tienda y la galería eliminan el zoom, la inclinación y el cromo del corte de forma predeterminada (--composed los mantiene, y el pase de imagen lo rechaza

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 relacionados