shuxueshuxue

Promo Skills — Testing skill for Claude Code

Testing community

A skill for making a real product launch video by filming the product's own running UI — Remotion + Playwright/CDP capture + human-in-the-loop review.

How to install Promo Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open shuxueshuxue/promo-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Promo Skills does

A skill for making a real product launch video by filming the product's own running UI — Remotion + Playwright/CDP capture + human-in-the-loop review. Distilled from a real 100s launch film.

Alternatives in Testing

Playwright — Automate real browser interactions for navigation, forms, and scraping 14.6k ★
Deslop Reborn — One iteration of the IronClaw Reborn de-slop loop — take ONE Reborn crate, fan out parallel review sub-agents 12.6k ★
Adversarial Spec — A Claude Code plugin that iteratively refines product specifications by debating between multiple LLMs until a 514 ★

README

promo-skills

**A Claude Code / agent skill for making a real product launch video — by filming the product's own running UI, not by rebuilding it in motion graphics.**

This is the distilled, reusable workflow behind a real 100-second product launch film, shot end-to-end (the night before a demo day) by an agent driving the actual app. Every rule in [`references/director-rulings.md`](references/director-rulings.md) was earned by a real reviewer rejection.

The idea in one line

The footage is the real product, running. Everything cinematic — push-ins, cuts, captions, voiceover, music — is added in post as deterministic render-time data, so any clip can be re-shot verbatim after a note and re-rendered in minutes.

Three tools, fused:

Pillar	Role
Playwright / CDP	drive & capture the real app at HD; a service-role harness forges realistic live state
Remotion	render engine — React is the video (frame-driven, deterministic, re-renderable); "variants" are just different props
HyperFrames' knowledge structure	the vocabulary of shooting techniques + the storyboard-then-approve-gate review loop

Quickstart

Read `SKILL.md`. It is the workflow, top to bottom. Then keep `references/director-rulings.md` open while you work.
Install the toolkit: cd toolkit && npm install (and cd toolkit/renderer && npm install for the Remotion renderer).
Run the fragment loop per feature: orchestrate state → capture HD → assemble → review → iterate. Then shoot the grand take and assemble the final cut.

 0. UNDERSTAND   product → user stories → ONE coherent narrative (no redundancy)
 1. SCREENPLAY   acts + beats + voiceover; each feature = a fragment
 2. ORCHESTRATE  screenplay.json → timed service-role writes → realistic live state
 3. CAPTURE      drive the real app, record HD (CDP shot-loop @ real 2×)
 4. ASSEMBLE     frames → CFR mp4 + rebased events