Communitygithub.com

vosjs/skills

URLから製品デモ動画を生成し、再現可能なVOS動画プログラムを作成するためのエージェントスキルです。

skills とは？

vosjs/skills は、AIエージェント（Claude Code、Cursor、Codexなど）向けに設計されたスキルで、URLから製品デモ動画を生成し、再現可能なVOS（Video Operating System）動画プログラムを作成する機能を提供します。このスキルは、開発者が手動でデモ動画を録画・編集する手間を省き、指定されたURLのWebページを自動的にキャプチャして、一貫性のあるデモ動画を生成します。VOSプログラムはスクリプトとして保存・共有できるため、同じ動画を何度でも再現可能です。主にプラットフォームとしてはVOS（Video Operating System）を利用し、スクリプト言語で動画の各ステップ（クリック、スクロール、入力など）を定義します。このスキルは、ソフトウェアのドキュメント作成、製品紹介、チュートリアル動画の自動生成に特に有用で、エンジニアが動画制作にかける時間を大幅に削減できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add vosjs/skills
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

skills は何をしますか？

URLから製品デモ動画を生成し、再現可能なVOS動画プログラムを作成するためのエージェントスキルです。

概要

このスキルは、AIエージェントが指定されたURLのWebページを自動操作し、製品のデモ動画を生成することを可能にします。VOS（Video Operating System）のプログラム形式で動画を定義することで、同一のデモを何度でも再現可能にします。

対応プラットフォーム

  • Claude Code
  • Cursor
  • Codex
  • その他のAI Agent対応ツール

使用方法

# 基本的な使い方の例
vos create --url https://example.com --output demo.vos

主な機能

  • URLからの動画生成: 指定されたURLのページを自動的にキャプチャし、デモ動画を生成
  • 再現可能なプログラム: VOS形式で動画をスクリプト化し、いつでも同じデモを再実行可能
  • ステップバイステップの操作: クリック、スクロール、テキスト入力などの操作を定義

設定

変数名説明デフォルト値
VOS_API_KEYVOS APIの認証キー-
VOS_OUTPUT_DIR動画出力ディレクトリ./output

注意事項

動画生成には対象Webページの読み込み時間がかかる場合があります。 大量のページをキャプチャする際は、レート制限に注意してください。

サポート

詳細については VOSドキュメント を参照してください。

Individual skills in this repo

This repo contains 8 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-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.

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community