whyubel1eve/promo-film-skill

Use code to create product promo / promotional videos / demonstration videos. Remotion + React Visuals — The machine in the video is based on the product’s authenticity Numerical redraws (or screenshots captured by Playwright on real devices) are fully stored in the version library and can be reproduced frame by frame.

A film here is a compilable source code, not a timeline. Each frame is a pure function of the “global frame number”:

How many lines the file tree grows, which entry the agent log goes to, where the pointer is, which frame the theme interpolates in—all in state(f). Want to rearrange the rhythm, change the numbers in B, all downstream are relative quantities, move along with the movement. So the rhythm can be changed, the camera can be counted, the text can differ, and today’s rendering is the same as three months later, byte by byte.

If you are an agent: install it → read the “Install” section below; It’s already installed, you need to use it → Read SKILL.md, which is the operation manual, references/ is the details that unfold as needed, This document is only a manual.

Why not editing software?

In editing software, “shortening the third scene by two seconds” means manually dragging every key frame afterward. Screenshots paired with transitions, What viewers read is “a bunch of images,” not “someone is using this software.”

Here, it’s the other way around: change a number, all subsequent actions move accordingly, the entire window without cutting the frame, and a camera pushes, pulls, and turns over. The trade-off is you have to write code, and can only capture the interface (see below “Can’t do anything”).

Three Hard Constraints

Remember these three first; every detail in references/ is their inference.

**(1) Only one set of colors, one font, and one soft movement. ** Colors are copied one by one from the product’s own token file (_tokens.css / theme.css / tailwind config), No second sets are allowed in the film. If three slow motion curves are mixed into one film, the audience reads three hands, not the character of the product.

**(2) That machine is real. ** Column width, font size, rounded corners, and icon text weight are all matched according to the product’s actual values. After drawing with logical pixels, then scale overall —— It’s not a diagram of enlarging 13px text into a 20px version. Icon redrawing uses the same set of fonts as the product, without citing third-party icon libraries.

**(3) Do not make slow movements that the audience cannot notice. ** A 270fps zoom in with a 2.2% increase, converting to 0.005px per frame: you can’t tell it’s camera movement, only the text is shaking (Each frame is re-rasterized with new subpixel boundaries.) To keep the image ‘alive,’ use entrance animations without slow zooming.

The third is the only pitfall in this skill that ruins the entire film and is completely invisible on the timeline. references/camera.md The whole article is about how to avoid it, and before you start changing the shots, read that one first.

The soundtrack is optional and is not done by default

**First, ask the user, ‘Do you want music for this video?’ Only do they do it if they say yes. ** Most promotional videos on social platforms are silent and play automatically, Information must be fully present on screen; And a promotional video with the wrong music is more harmful than having no music. **Silent is a complete delivery, not a half-finished product. **