ce-demo-reel

Record UI and CLI demos as GIFs or screenshots for PR descriptions.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/xbpk3t/ce-codex --skill ce-demo-reel
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ce-demo-reel
Source: https://github.com/xbpk3t/ce-codex/tree/main/skills/ce-demo-reel
Command: npx skills add https://github.com/xbpk3t/ce-codex --skill ce-demo-reel

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser, vhs, silicon, ffmpeg, ffprobe, curl, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Capture reliable, reviewable visual evidence (GIFs or screenshots) for UI changes, CLI features, and observable bug fixes so reviewers can see what changed without running the product themselves. It enforces "evidence means using the product" (not tests) and provides explicit fallbacks and user prompts when real product usage requires credentials or external services.

Core Features & Use Cases

  • Detect the most likely capture target from branch, PR, diff, and recent commits and form a clear capture hypothesis.
  • Run tool preflight checks and recommend an appropriate capture tier (browser reel, terminal recording, screenshot reel, or static screenshots) with explained reasoning.
  • Execute deterministic capture flows via agent-browser, VHS, silicon, and ffmpeg, stitch frames into GIFs, upload previews for approval, and promote approved artifacts to permanent hosting.
  • Use cases: adding a demo to a PR for a new settings page, recording CLI feature behavior for release notes, demonstrating a bug fix with before-and-after captures, and providing evidence for design reviews.

Quick Start

Run the ce-demo-reel skill to detect the change, recommend a capture tier, record the demo, and upload a permanent GIF or screenshots for PR inclusion.

Frequently Asked Questions about ce-demo-reel

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

FAQPage Schema
How do I capture a GIF demo for a PR description?

To capture a GIF demo for a PR description, you can use a skill that detects UI or CLI changes from your branch and records the behavior. It automatically discovers the capture target, recommends a recording tier, and generates a shareable GIF or screenshot for your pull request.

What is the best way to record terminal output for release notes?

Recording terminal output for release notes is best handled by VHS, which captures CLI behavior as shareable GIFs. The process involves project-type detection, tool preflight checks, and deterministic recording to create visual evidence of command-line feature changes.

Can I capture before and after screenshots for a bug fix?

Yes, you can capture before-and-after screenshots or GIFs to demonstrate bug fixes. The tool performs branch-aware target discovery and uses agent-browser, silicon, and ffmpeg to capture observable UI changes, providing clear visual evidence for reviewers.

Does agent-browser work with desktop apps for visual evidence capture?

Yes, agent-browser can capture visual evidence from desktop apps reachable via CDP. It performs tool preflight checks and records UI changes using browser reels or static screenshots, then stitches frames into GIFs for PR inclusion.

What are the limitations of using VHS and ffmpeg for PR evidence?

VHS and ffmpeg require tool preflight checks and may need explicit fallbacks if real product usage requires credentials or external services. The tool enforces that evidence means using the actual product, not running tests, which can limit automated capture in restricted environments.

Do I need ffmpeg installed to generate demo reels?

Yes, ffmpeg and ffprobe are required dependencies for stitching frames into GIFs during the two-pass rendering process. The tool runs preflight checks to ensure all necessary components like agent-browser, VHS, and silicon are available before capturing visual PR evidence.