Turn the current repo into a rich promo film whose look is taken from the product
itself. The pipeline is config-driven Remotion (one timeline, many aspect ratios)
encoded to social deliverables with ffmpeg.
This skill orchestrates; two sibling skills do the specialist work and are worth
reading when you touch their areas:
Work through these steps. Prefer the bundled scripts for the deterministic parts;
use judgement for the brand extraction and the script (the copy and scene order).
-
Check prerequisites. Node 20+ and ffmpeg on PATH (ffmpeg -version). If
ffmpeg is missing, point the user at the install note in the ffmpeg skill.
-
Extract the brand. Run the extractor against the repo root:
node scripts/extract-brand.mjs <repo-root> > /tmp/clapper-brand.json
It finds CSS custom properties / Tailwind theme colours, fonts
(@font-face + Google-font links), the logo (SVG / favicon) and the app
name/tagline, and prints a brand object plus notes on what was found vs
guessed. Then read the repo yourself to fill the gaps the script flags and
to confirm the palette looks right. The extractor picks text colours that pass
WCAG contrast on the chosen background and verifies the fonts actually load
(not a fallback). Render a one-off brand preview and look at it before
scripting — cd promo && npm run stills -- --brand-only. See
references/brand-extraction.md and
references/quality-review.md.
-
Scaffold the project. Copy the template into the repo and install:
bash scripts/scaffold.sh <repo-root>
This creates <repo-root>/promo/ (the Remotion project + the tuning UI) and
runs npm install there.
-
Write promo/clapper.config.json. Merge the extracted brand in, then
compose the scenes — an ordered list of typed beats. Read the repo's
README, marketing copy, feature list and screenshots and turn them into a
tight story. Follow the story framework + copy rules in
references/scriptwriting.md — hook, tension,
product, proof, values, price, CTA — and run its critic pass before
rendering (the difference between a generic template and a promo worth
watching). Give every scene a short caption so the message lands with the
sound off. The scene archetypes and every field are in
references/scenes.md. Drop screenshots, the logo and an
optional music.m4a into promo/public/ — music is mixed in and
loudness-normalised at render.
-
Preview + fine-tune. Offer the live editor or Studio:
cd promo && npm run ui
cd promo && npm run studio
The editor reads/writes clapper.config.json, so changes there and changes the
user makes in the UI are the same data. See references/ui.md.
-
Quality review (required before rendering). First lint the config
(cd promo && npm run lint) to catch the mechanical smells — a stat with
value: 0 or a sentence label, a device beat still on the synthetic
dashboard, a spelled-out currency or over-long pricing sub, and a theme that
repeats across beats. Then render cheap stills and actually look at them — this
is the main lever for consistent, professional output. Run
cd promo && npm run stills, then inspect every frame against the rubric in
references/quality-review.md (legibility,
contrast, platform safe areas, overflow, hierarchy, brand match, captions, and
that the product beat shows a real screenshot, not the dashboard). A review
round that surfaces nothing is a signal the review did not run — re-run it
rather than treating empty as a pass. Fix clapper.config.json for anything
that fails and re-run. Only render once the stills pass.
-
Render the deliverables.
cd promo && npm run render
Outputs every configured format plus poster frames to
promo/out/deliverables/. Formats, bitrates and the music mix are covered in
references/render-profiles.md. For rendering on
CI instead of locally, see references/ci.md.
-
Iterate. Most changes are edits to clapper.config.json (copy, timing,
colours, scene order, which formats) followed by another npm run render. Only
reach into src/ for new motion or a new scene type — and read the remotion
skill first.
