product-film

Installation
SKILL.md

Product film

A film that looks like the product made it: its colors, type, components, logo and voice, cut to music. Built in Remotion inside (or beside) the product's codebase, so it reuses real components and stays editable.

Non-negotiables

  • Their design wins. Every rule comes from the product: its tokens, components, rules files, landing page and copy. Never carry another product's taste in, including anything in this skill that their design contradicts.
  • Ask, don't assume. What the film shows and how it is made are the user's call. Interview them before writing the story (reference/interview.md). Offer options drawn from what you found in their code, never generic ones.
  • Every frame is a pure function of time. No CSS transitions or keyframes, no timers, no Date.now(), no state carried between frames. A component that runs its own clock gets a frame-driven twin.
  • Measure, never guess. Beats come from the audio, positions from the DOM (debug overlay), colors from decoded pixels of the final files.
  • Honest claims. Show only what the product really does. Find its claims rules and approved lines before writing a word.
  • Ask first before committing, pushing or publishing. Keep every rendered version (out/<film>/v1, v2, ...).

Workflow

Installs
92
GitHub Stars
421
First Seen
Sep 26, 2026