ce-demo-reel

Capture visual demo evidence as GIFs or screenshots for pull request descriptions.

Updated Mar 17, 2026
One-click install
npx skills add https://github.com/Norfolk-Group/marcela-norfolk-ai --skill ce-demo-reel-norfolk-group
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ce-demo-reel
Source: https://github.com/Norfolk-Group/marcela-norfolk-ai/tree/main/skills/compound-engineering/skills/ce-demo-reel
Command: npx skills add https://github.com/Norfolk-Group/marcela-norfolk-ai --skill ce-demo-reel-norfolk-group

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Pull requests for UI changes, CLI features, and bug fixes often ship without visual proof, forcing reviewers to check out branches and run code themselves just to see what changed. ## Core Features & Use Cases - Tiered Evidence Capture: Automatically detects project type (web app, CLI tool, desktop app, library) and recommends the right capture method: browser reel, VHS terminal recording, silicon screenshot reel, or static screenshots. - Upload and Approval Workflow: Uploads artifacts to a temporary preview link, asks the user where the evidence should live, then promotes to permanent catbox hosting or saves locally. - Secret-Safe Recording: Enforces strict rules so credentials never appear in recordings, with pre-upload scanning and recapture instead of blurring. - Use Case: After shipping a new settings page, run this Skill to screenshot the page states, stitch them into an animated GIF, and get a public URL ready to embed in the PR description. ## Quick Start Ask the agent to capture a demo reel of the new settings page for the current pull request.

Frequently Asked Questions about ce-demo-reel

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

FAQPage Schema
How do I add a demo GIF to a GitHub pull request?

Run the demo reel capture flow, which records the feature in action, stitches frames into an animated GIF via ffmpeg, and uploads it to a public URL. The returned URL can be embedded directly in the PR description as an image.

What tools are needed to record terminal demos as GIFs?

Terminal recordings use VHS from Charmbracelet to execute a tape file and produce a GIF. Screenshot reels use silicon to render styled frames and ffmpeg with ffprobe to stitch them into an animated GIF.

How do I keep API keys out of screen recordings?

Set real credentials inside a VHS Hide block or before recording starts so they never appear on screen. The workflow scans artifacts for tokens like sk- or Bearer before upload and requires recapture instead of blurring if anything leaks.

Does the capture pipeline work for web apps and CLI tools?

Yes, the detect command classifies the project from package.json, Gemfile, go.mod, Cargo.toml, or pyproject.toml. Web apps use agent-browser screenshots stitched into GIFs, while CLI tools use VHS recordings or silicon-rendered frames.

What happens if the GIF exceeds GitHub's size limit?

The stitch command targets 5 MB and enforces a 10 MB ceiling matching GitHub's inline render limit. If the output exceeds the limit, it automatically drops middle frames and re-stitches to reduce size.

When should I skip capturing visual evidence for a PR?

Skip evidence when the diff is docs-only, markdown-only, config-only, CI-only, test-only, or a pure internal refactor with no observable output change. The workflow also offers a 'No evidence needed' option during tier selection.