video

Routes video creation requests to HyperFrames renders, demo GIFs, and media workflows.

1|Updated May 4, 2026
One-click install
npx skills add https://github.com/wesbragagt/nixos-config --skill video-wesbragagt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: video
Source: https://github.com/wesbragagt/nixos-config/tree/main/home/skills/video
Command: npx skills add https://github.com/wesbragagt/nixos-config --skill video-wesbragagt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright-core, hyperframes, and includes references (resource) components.

What problem does it solve? Choosing the right video workflow is hard when requests range from README demo GIFs to narrated explainers and motion graphics. This Skill acts as a single entry point that routes each video request to the correct workflow and validates the output before delivery. ## Core Features & Use Cases - Intent-based routing: Reads references/routing.md to match the user's deliverable to the right workflow, such as HyperFrames compositions, screen-recording GIFs, or media treatments. - HyperFrames project management: Resumes existing projects from BRIEF.md, hyperframes.json, or STORYBOARD.md, keeps the CLI current, and enforces preview-before-render approval. - Demo GIF production: Records app walkthroughs with playwright-core and converts them with ffmpeg into README-ready GIFs under 10 MB. - Use Case: A developer asks for a 15-second GIF demonstrating their app's onboarding flow. The Skill routes to the GIF reference, records the flow with Playwright, converts it with ffmpeg, verifies key frames, and embeds the result in the README. ## Quick Start Ask the assistant to create a video deliverable such as a captioned product showcase or a README demo GIF, providing the subject, source material, and desired length.

Frequently Asked Questions about video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a demo GIF for my README?

The GIF workflow runs your app in the background, records a scripted walkthrough using playwright-core with the system Chromium, then converts the recording with ffmpeg using palette generation. The result is a 10-25 second GIF kept under 10 MB and embedded near the top of the README.

How do I render a video from HTML with HyperFrames?

HyperFrames renders video from HTML compositions using timed elements with class="clip" and a paused, seek-safe timeline on window.__timelines. Run npx hyperframes check to validate, preview the result, and render only after approval.

Does Playwright recording work on NixOS?

Yes, but you must use playwright-core with the system Chromium executable rather than downloaded Playwright browsers, which do not work on NixOS. The workflow sets this up in a throwaway workspace outside the app repository.

What happens when editing an existing HyperFrames project?

The Skill resumes from existing project files like BRIEF.md, hyperframes.json, or STORYBOARD.md and applies only the requested edit. Before render-affecting commands it runs npx hyperframes@latest upgrade --project . --check to keep the CLI pin current.

When should I not render a video automatically?

Rendering should only happen after preview and explicit approval, unless the user asked for autonomous rendering. The final checklist also requires verifying duration, format, captions, audio, readability, and absence of private data before delivery.