Skill Variant: launch videos from real captured footage

[zm2231]

/flex: brag, but the product footage is real

Quick context: I built this while cutting a demo for my own app. I love hyperframes and the whole idea of brag; I just wanted a slightly longer, film-the-real-thing version of it.

Name's a placeholder. Rename it to whatever fits the plugin.

/brag reads your code and rebuilds the UI in CSS. That's the right call for a project you can't run. When you can run it, the rebuild drifts: the real app ships a Stop button, the mock has two; the real status line reads "Running locally," the mock reads "Daemon online." Nobody set out to lie. The mock was built from an older read of the source, and the product moved. Developers spot that in a second, and a demo video points straight at them.

/flex films the running app instead. Real screenshots, real captures, real state changes, real latency. It keeps brag's hyperframes render path exactly as-is; the only thing that changes is the source of the product frames, a real capture instead of a CSS rebuild. Everything else it borrows from brag wholesale (assets/tone/planning/composition) through sibling ../brag/ paths, so there's no duplicated 16MB. What it adds is the part brag doesn't need:

• A capture step. Drives the live app with surf/Chrome, grabs footage at retina density (a soft upscaled screenshot is the fastest way to look fake), and gets private data off the screen by construction, so nothing has to be blurred after.
• Seven honesty gates, run before you ship: real-footage, drift, happy-path, secrets, muted, CTA, fidelity. Each maps to a real way a launch video goes wrong, most of them caught while building this one.
• --allow-recreation, off by default. If a beat genuinely can't be filmed, you can still recreate it, but you declare it in the plan and it lands in the honesty report. The gates hard-block an undeclared recreation from rendering. No silent fallback.

Here's one it made

flex.mp4

That clip is the raw output of a real run on my own dashboard: a full storyboard, real captured frames, and a seven-gate honesty report that discloses every sanitized frame. Not a mock.

The secrets gate is the one that earns its keep

Real footage means real data on screen, and that's the trade brag doesn't have to make. The secrets gate is the guardrail: tokens, private file paths, customer names, internal hostnames, and the nastiest one, a QR code that encodes an access token (a credential your eye doesn't read as one, that anyone who pauses the frame owns). The default move is to construct a clean, real state before the shutter (seed harmless content, alias identifiers with the product's own rename feature, substitute sensitive text at the source and disclose it), so nothing gets blurred after. It scans every captured and rendered frame, and it hard-blocks the render if anything private survives.

Worth being straight about: these checks run on agent judgment. There's no code OCRing frames for tokens or diffing against a secrets pattern. The gate is a careful zoom-in pass the skill instructs the agent to run, and it's only as good as the agent running it. I'd rather ship that honestly than dress it up as enforcement it doesn't do.

What's in the diff

Three files under skills/flex/ (SKILL.md, references/capture.md, references/gates.md). Nothing else in the repo is touched. No edits to plugin.json or marketplace.json, since the plugin auto-discovers anything under skills/. The skill reaches brag through ../brag/, which resolves because installing the plugin installs both.

Two calls for you

• The name. /flex is tentative.
• Whether this belongs inside brag as a second skill or as its own plugin. I co-bundled it because it leans on brag's assets and tone, and splitting them would mean copying all of it.

[shunithaviv]

Hi, thanks for this, I love the idea

My main suggestion is to land this as a --capture flag on /brag rather than a separate skill. As its own skill it duplicates a lot of brag and adds a second command that's honestly a bit confusing to have alongside it.

One bit of context on why brag rebuilds the UI in CSS: it isn't only for projects you can't run. Rebuilding in Hyperframes lets us actually animate the components and create visualizations that static screenshots can't. That's a lever I want to keep as the default. But I fully agree the accurate portrayal case matters for developers, which is exactly what --capture should serve.

On the gates, I think there's a nice split here. Some are general and could work in every brag run and some are capture specific, so we can consider pulling the general ones into brag and scope the capture ones behind the flag, so a default run doesn't burn context on checks that don't apply.

Also, why surf? Brag doesn't depend on it today. I got to try out Playwright which integrates well with agents, and Claude can now open Chrome and capture screenshots on its own. I'd be happy if we consider an option that is easier to install and run for any agent and any user.

If you're up for reshaping it into a --capture flag plus the gates, happy to help wire it in.