{"slug": "skill-to-create-product-videos", "title": "Skill to Create Product Videos", "summary": "Developer aaitor released version 1.0.1 of skill-video-studio, a local video-production workspace built around the /devrel-video Claude Code skill, which uses Playwright CLI to capture real product interactions, HyperFrames to compose title cards, chapters and CTAs, and FFmpeg to master and inspect output. The project requires Node.js 22+, FFmpeg/ffprobe, Chromium and helper-specific Python dependencies, and its offline CI checks sources and selected local utilities rather than the complete production stack; portrait and social output profiles remain on the roadmap.", "body_md": "From product workflow to polished demo.\n\n[v1.0.1 release](https://github.com/aaitor/skill-video-studio/releases/tag/v1.0.1) · `aaitor/skill-video-studio`\n\n[Quick start](#quick-start) ·\n  [Worked videos](#worked-videos) ·\n  [Usage](https://github.com/aaitor/skill-video-studio/blob/main/docs/usage.md) ·\n  [Contribute](#contributing-and-support)\n\nA local video-production workspace driven by the **`/devrel-video` Claude Code skill**. Capture real product interactions with Playwright CLI, compose title cards, chapters, and CTAs with HyperFrames, then master and inspect the result with FFmpeg. Start with a silent walkthrough; add narration, music, subtitles, or your own presenter footage when needed.\n\nA real Claude Code session using the installed project skill: clone the studio, prepare an Acme walkthrough brief, and inspect the three-beat plan on a black background. This short demo stops **before capture and rendering**; it does not claim a video was produced. The [recording guide](https://github.com/aaitor/skill-video-studio/blob/main/examples/README.md) includes the actual generated brief and reproduction command.\n\n**For planning:** Git and authenticated Claude Code. Clone the full workspace so its native skill and project layout stay together:\n\n```\ngit clone https://github.com/aaitor/skill-video-studio.git\ncd skill-video-studio\nclaude\n```\n\nAsk Claude:\n\n```\n/devrel-video Prepare a 25-second silent walkthrough brief for the bundled\nAcme app: show the workspace, filter by category, then open a project.\nReuse brands/acme. Show the plan before capture or rendering.\n```\n\nExpected result: a project brief and a concrete beat plan. For a complete video, install the [capture/render prerequisites](https://github.com/aaitor/skill-video-studio/blob/main/docs/installation.md#capture-and-rendering-prerequisites) and follow the [worked walkthrough](https://github.com/aaitor/skill-video-studio/blob/main/projects/example-walkthrough/README.md). The production stack needs Node.js 22+, FFmpeg/ffprobe, Chromium, and the helper-specific Python dependencies. Optional narration and avatars require your own additional services or GPU setup.\n\n- **Real product capture:** browser interaction scripts with explicit beats and stable selectors.\n- **Branded composition:** title, browser frame, chapters, and CTA in a HyperFrames timeline.\n- **Local mastering and QA:** master/web copies, ffprobe checks, contact sheet, and thumbnail.\n- **Optional audio:** six local music styles, narration-driven timing, and voice variants.\n- **Optional presentation:** subtitles, private bring-your-own presenter footage, and terminal/browser sequences.\n- **Source-based workflow:** reusable brands, briefs, templates, and two complete worked examples.\n\nPortrait/social output profiles remain on the roadmap. Full capture/render depends on your local toolchain; offline CI checks sources and selected local utilities, not the complete production stack. See [workflow](https://github.com/aaitor/skill-video-studio/blob/main/docs/workflow.md) and [usage](https://github.com/aaitor/skill-video-studio/blob/main/docs/usage.md).\n\n**Product walkthrough:** a local Acme fixture, real browser capture, narration/music, and EN/ES subtitles. [Source and commands](https://github.com/aaitor/skill-video-studio/blob/main/projects/example-walkthrough/README.md) · [Watch with sound](https://youtu.be/H6npd3uuqls).\n\n**Composed CLI/browser film:** a multi-environment example whose terminal scenes are authored HTML reenactments. [Source and explanation](https://github.com/aaitor/skill-video-studio/blob/main/projects/example-cli-tour/README.md) · [Watch with sound](https://youtu.be/lvpKaYUVNws).\n\nThe longer examples remain intact. Generated MP4/audio files are ignored; rebuild them from the included sources. See [usage prompts](https://github.com/aaitor/skill-video-studio/blob/main/docs/usage.md) for silent, narrated, avatar, voice-swap, and multi-environment requests.\n\nEach video uses `projects/<slug>/brief.yaml`, brand tokens under `brands/<name>/`, and generated output under its project folder. Optional private settings live outside Git, selected by `DEVREL_VIDEO_ENV`.\n\n| Setting | Purpose | \n|---|---|\n| `brief.yaml` | Product URL, audience, message, beats, brand, duration, and optional layers | \n| `ORPHEUS_URL` /`ORPHEUS_KEY` | Your optional narration endpoint and token | \n| `AVATAR_HOST` /`LS_DIR` | Your optional SSH GPU host and LatentSync checkout | \n| `BGM_STYLE` | Local background-music style; default `corporate` | \n\nSee [configuration](https://github.com/aaitor/skill-video-studio/blob/main/docs/configuration.md), the [actual brief template](https://github.com/aaitor/skill-video-studio/blob/main/.claude/skills/devrel-video/templates/brief.example.yaml), and [security/privacy guidance](https://github.com/aaitor/skill-video-studio/blob/main/docs/security-and-privacy.md). Keep private footage and credentials outside this public repository.\n\nBrief → explore → brand → capture → compose → optional layers → render/QA → thumbnail. The [skill](https://github.com/aaitor/skill-video-studio/blob/main/.claude/skills/devrel-video/SKILL.md) coordinates existing tools rather than replacing them. Detailed production steps are in the [workflow guide](https://github.com/aaitor/skill-video-studio/blob/main/docs/workflow.md) and [production notes](https://github.com/aaitor/skill-video-studio/blob/main/.claude/skills/devrel-video/references/production-notes.md).\n\n```\n.claude/skills/devrel-video/  Skill instructions, scripts, templates, production notes\nbrands/                     Brand tokens and logos\nprojects/                   Curated public examples; private projects stay ignored\nexamples/                   Real harness recording, public input, generated brief\nassets/                     Shared banner, social card, and short terminal GIF\ndocs/                       Onboarding, usage, configuration, troubleshooting\n```\n\n- [Installation and production prerequisites](https://github.com/aaitor/skill-video-studio/blob/main/docs/installation.md)\n- [Configuration](https://github.com/aaitor/skill-video-studio/blob/main/docs/configuration.md)\n- [Prompts and optional layers](https://github.com/aaitor/skill-video-studio/blob/main/docs/usage.md)\n- [Workflow](https://github.com/aaitor/skill-video-studio/blob/main/docs/workflow.md)\n- [Troubleshooting](https://github.com/aaitor/skill-video-studio/blob/main/docs/troubleshooting.md)\n- [Security, privacy, and media rights](https://github.com/aaitor/skill-video-studio/blob/main/docs/security-and-privacy.md)\n- [Banner generation and social preview](https://github.com/aaitor/skill-video-studio/blob/main/docs/branding.md)\n- Original references: [studio design guide](https://github.com/aaitor/skill-video-studio/blob/main/local-devrel-video-studio-guide.md) ·[avatar guide](https://github.com/aaitor/skill-video-studio/blob/main/local-talking-video-avatar-guide.md)\n\nUse [Issues](https://github.com/aaitor/skill-video-studio/issues) for questions, bugs, and ideas. Read [CONTRIBUTING.md](https://github.com/aaitor/skill-video-studio/blob/main/CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](https://github.com/aaitor/skill-video-studio/blob/main/CODE_OF_CONDUCT.md); report vulnerabilities privately through [SECURITY.md](https://github.com/aaitor/skill-video-studio/blob/main/SECURITY.md).\n\nInstall `requirements-dev.txt` in a virtual environment and run `python3 scripts/check.py`. See [CHANGELOG.md](https://github.com/aaitor/skill-video-studio/blob/main/CHANGELOG.md) for changes. Live recordings, service calls, GPU jobs, and full renders are manual validation steps.\n\n[MIT](https://github.com/aaitor/skill-video-studio/blob/main/LICENSE) for original studio content. Embedded banner fonts retain their [OFL notices](https://github.com/aaitor/skill-video-studio/blob/main/assets/font-notices/NOTICE.md); external tools/models/media retain their own terms. See [licensing](https://github.com/aaitor/skill-video-studio/blob/main/docs/licensing.md).\n\nBuilt by [Aitor Argomaniz](https://github.com/aaitor) · [LinkedIn](https://www.linkedin.com/in/aitorargomaniz) · [More open source](https://github.com/aaitor?tab=repositories)", "url": "https://wpnews.pro/news/skill-to-create-product-videos", "canonical_source": "https://github.com/aaitor/skill-video-studio", "published_at": "2026-11-02 18:10:39+00:00", "updated_at": "2026-11-02 18:22:02.292658+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents"], "entities": ["aaitor", "skill-video-studio", "Claude Code", "Playwright", "HyperFrames", "FFmpeg", "Node.js", "Chromium"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/skill-to-create-product-videos", "markdown": "https://wpnews.pro/news/skill-to-create-product-videos.md", "text": "https://wpnews.pro/news/skill-to-create-product-videos.txt", "jsonld": "https://wpnews.pro/news/skill-to-create-product-videos.jsonld"}}