New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Product Film Builder (Remotion)

by Rieranthony in Rieranthony/product-film-skill

Builds a showreel-grade product film in Remotion using the product's own design tokens, components and voice, from a guided interview through a verified final render.

MITAuto-check passedMedia & Creative

Install Product Film Builder (Remotion)

skills CLI
$ npx skills add Rieranthony/product-film-skill --skill product-film -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Rieranthony/product-film-skill product-film --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Rieranthony/product-film-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/product-film/skills/product-film .claude/skills/product-film && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
product-film
GitHub stars
409
Token cost
~1.4k tokens
SKILL.md length
706 words
Files
25 (incl. scripts)
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Builds a showreel-grade product film in Remotion using the product's own design tokens, components and voice, from a guided interview through a verified final render.

  • Works in 8 steps: Quick discovery. Just enough to ask good… → Interview. Two rounds of… → Brand kit → videos/BRAND.md. Finish… → …
  • Making a landing-page loop or launch video for a SaaS product
  • SKILL.md covers Non-negotiables, Workflow, Quality floor (always,… and Traps that cost real time
  • Runs Python and TypeScript scripts from its folder; calls npx and uv

What it does

This skill produces a video that looks like it was made by the product itself: every visual choice - colors, type, components, logo, voice - is pulled from the product's own code and copy rather than any outside style, including anything in the skill's own defaults that the product's design would contradict. It interviews the user in two rounds (the brief, then the ingredients, with a third only if needed) before writing a story, after a quick discovery pass over the product's rules files, tokens, components, logo and landing page.

From there it fills a brand-kit file and a film-prompt file, checkpoints the beat sheet and three style frames with the user, and optionally syncs music using beat-detection and audio-editing scripts, skipping that step entirely for a silent film. Every animated frame is written as a pure function of time with no CSS transitions, timers, or state carried between frames, and values come from measurement - beats from the audio, positions from a DOM debug overlay, colors from decoded pixels - rather than guesses.

It only shows what the product's own approved claims support, asks before committing, pushing or publishing, and keeps every rendered version side by side rather than overwriting prior renders.

When your agent uses it

  • Making a landing-page loop or launch video for a SaaS product
  • Turning a codebase's own components into a promo or demo reel
  • Building a motion design video synced to music for an app

Example prompts

  • “Make a 30-second launch video for our app using our own components.”
  • “Build a landing-page loop that matches our brand's design tokens.”
  • “Create a demo reel for this feature, synced to the music I picked.”

Requirements

  • Remotion
  • The product's own design tokens, components and copy

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Quick discovery. Just enough to ask good questions: rules files, tokens, components, the logo (and any mascot or animated mark), the…
  2. Interview. Two rounds of AskUserQuestion: the brief, then the ingredients. A third round only if needed. See reference/interview.md.
  3. Brand kit → videos/BRAND.md. Finish discovery on what they chose and fill templates/BRAND.md.
  4. Story → videos/-prompt.md. Read reference/story.md and reference/ingredients.md, then fill templates/film-prompt.md. Checkpoint with the…
  5. Music. Skip if the film is silent. See reference/music.md: scripts/beats.py, the per-bar stem map, scripts/audio-edit.py, SFX on measured…
  6. Engine and scenes. Read reference/engine.md.
  7. Review loop. See reference/review.md.
  8. Final render, verify, deliver. See reference/render.md: scripts/render.ts, then scripts/verify.py, then send the files.

What it can do on your machine

Read from SKILL.md and the folder at commit fe11efc. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 5 files in scripts/ (Python and TypeScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • npx
    • uv

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and uv, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Product Film Builder (Remotion) loads about 1.4k tokens when it runs. Until then it costs about 118 tokens; SKILL.md has 706 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~118
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Rieranthony/product-film-skill at commit fe11efc, republished under its MIT licence (© Rieranthony). 706 words, ~1,410 tokens.

Download SKILL.mdSave it as .claude/skills/product-film/SKILL.md (or your agent's skills folder). This skill also uses 24 other files; get the full folder from GitHub.
name
product-film
description
Make a showreel-grade product film (landing-page loop, launch video, promo, demo reel, social cut) in code with Remotion, built on the product's own design system, components and voice. Use when someone asks for a product video, landing video, promo, launch film, explainer or "motion design video" for their app, SaaS or codebase. It asks what to include, then covers design discovery, story, music sync, transitions, review loops and a verified final render.

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

  1. Quick discovery. Just enough to ask good questions: rules files, tokens, components, the logo (and any mascot or animated mark), the landing page, the main features. See reference/discovery.md.
  2. Interview. Two rounds of AskUserQuestion: the brief, then the ingredients. A third round only if needed. See reference/interview.md.
  3. Brand kit → videos/BRAND.md. Finish discovery on what they chose and fill templates/BRAND.md.
  4. Story → videos/<film>-prompt.md. Read reference/story.md and reference/ingredients.md, then fill templates/film-prompt.md. Checkpoint with the user: beat sheet and 3 style frames.
  5. Music. Skip if the film is silent. See reference/music.md: scripts/beats.py, the per-bar stem map, scripts/audio-edit.py, SFX on measured peaks.
  6. Engine and scenes. Read reference/engine.md.
    • Copy templates/kit/ into videos/src/kit/.
    • One folder per film: cues.ts (the beat sheet as data), layout.ts, acts/, the composition.
  7. Review loop. See reference/review.md.
    • Stills at every handoff (scripts/stills.ts, --debug to measure).
    • Contact and handoff sheets, then a half-res draft.
    • Fix, repeat, and show the user frames as you go.
  8. Final render, verify, deliver. See reference/render.md: scripts/render.ts, then scripts/verify.py, then send the files.
Show full SKILL.md (339 more words)Show less

Quality floor (always, whatever the ingredients)

  • Only the product's own surfaces, colors, borders and shades. Never invent card backgrounds, outlines or tints it does not use.
  • Readable at the delivery size. Fewer words beat smaller words. Cut labels that restate the picture.
  • Text is never covered by a cursor, a chip or a texture. It never crosses other text in a move. A line never re-centers while it builds: keep every word's slot.
  • Loading states keep their width. Use the product's own loading pattern.
  • Something happens on every beat. A bar where nothing moves reads as slow.
  • Scene boundaries land on bars. A loop's last frame equals its first. A landing loop must read muted.
  • No effects the product's language does not use: glows, particles, click rings, bouncy easing, shaders.

Traps that cost real time

  • Remotion stills do not forward console logs. Print measurements into the frame (templates/kit/debug.tsx).
  • npx remotion still re-bundles on every call. Use scripts/stills.ts: bundle once, render many frames.
  • Remotion's bundled ffmpeg has no tmix, select or tile. Use a full ffmpeg (uv run --with imageio-ffmpeg).
  • Color range: the Remotion master is limited range, BT.601, untagged. Blending it as full range lifts #0a0a0a to #171717, a gray box on a dark page. Decode frame 0 of every deliverable and check the numbers.
  • interpolateColors cannot parse color-mix(). Any color that animates is a hex token.
  • Async image components (Radix or base-ui avatars) can render empty in a frame. Twin them with Remotion <Img>.
  • Springs that retarget: sum one closed-form step per key, with keys sorted by time.
  • CSS dashed borders crawl while a box resizes. Draw dashes as SVG strokes at a fixed pitch.
  • WebGL or shader effects on their own clock paint a different picture each run. Prefer textures painted per frame.
  • In a monorepo:
    • pin every remotion and @remotion/* to one exact version
    • never let the video workspace re-resolve the app's Tailwind
    • alias the app's path imports in the webpack override
  • Stop only the processes you started; other sessions may be waiting on the machine.

© Rieranthony, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 24 other files (scripts) in plugins/product-film/skills/product-film of Rieranthony/product-film-skill.

  • SKILL.md
  • reference/discovery.md
  • reference/engine.md
  • reference/ingredients.md
  • reference/interview.md
  • reference/music.md
  • reference/render.md
  • reference/review.md
  • reference/story.md
  • scripts/audio-edit.py
  • scripts/beats.py
  • scripts/render.ts
  • scripts/stills.ts
  • scripts/verify.py
  • templates/BRAND.md
  • templates/film-prompt.md
  • templates/kit/camera.ts
  • … and 8 more

Open the folder on GitHubat commit fe11efc

Compare with similar skills

Product Film Builder (Remotion) next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Product Film Builder (Remotion) compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Product Film Builder (Remotion) this skillRieranthony/product-film-skill409—~1.4kAutomated safety check: PassMIT
Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills8.5k6 repos~3.2kAutomated safety check: NotesApache-2.0
Create Remotion GeistMarve10s/Better-Fullstack756—~1.4kAutomated safety check: PassMIT
Video ShotcraftVincentwei1021/video-shotcraft11k—~2.6kAutomated safety check: PassApache-2.0
HyperFrames Video Entry Pointheygen-com/hyperframes60k3 repos~5.2kAutomated safety check: PassApache-2.0
VidTSX 2D Video Generatorhassancs91/claude-faceless-shorts-creator271—~2.8kAutomated safety check: PassMIT

Similar skills

  • Stitch to Remotion Walkthrough Videos

    google-labs-code/stitch-skills

    Official

    Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.

    8.5k GitHub starsUsed in 6 repos~3.2k tokens
    Media & CreativeAuto-check: notes

  • Create Remotion Geist

    Marve10s/Better-Fullstack

    Create Remotion videos using the Geist design system aesthetic.

    756 GitHub stars~1.4k tokensUpdated today
    Media & CreativeAuto-check passed

  • Video Shotcraft

    Vincentwei1021/video-shotcraft

    Makes cinematic product videos with Remotion from shot recipe cards, a ready template, real page screenshots, camera moves and sound design, or builds a single animated shot.

    11k GitHub stars~2.6k tokensUpdated 6 days ago
    Media & CreativeAuto-check passed

  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    60k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed

  • VidTSX 2D Video Generator

    hassancs91/claude-faceless-shorts-creator

    Generates 2D Remotion-based TSX video files for VidTSX from a shot or scene description, with style presets and rules that keep renders from crashing.

    271 GitHub stars~2.8k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed

  • Motion Video in Remotion

    ooiyeefei/ccc

    Builds marketing and explainer videos in Remotion from rendered scenes, with one real product capture as proof, and cuts them for each platform's formats.

    495 GitHub stars~2.9k tokensUpdated 2 mo ago
    Media & CreativeAuto-check passed

Works with

Categories

Questions about Product Film Builder (Remotion)

What does Product Film Builder (Remotion) do?

Builds a showreel-grade product film in Remotion using the product's own design tokens, components and voice, from a guided interview through a verified final render. This skill produces a video that looks like it was made by the product itself: every visual choice - colors, type, components, logo, voice - is pulled from the product's own code and copy rather than any outside style, including anything in the skill's own defaults that the product's design would contradict. It interviews the user in two rounds (the brief, then the ingredients, with a third only if needed) before writing a story, after a quick discovery pass over the product's rules files, tokens, components, logo and landing page.

When should I use Product Film Builder (Remotion)?

Product Film Builder (Remotion) fits situations like: making a landing-page loop or launch video for a SaaS product; turning a codebase's own components into a promo or demo reel; building a motion design video synced to music for an app.

How do I install Product Film Builder (Remotion) in Claude Code?

Run `npx skills add Rieranthony/product-film-skill --skill product-film -a claude-code`. Or copy the skill folder (plugins/product-film/skills/product-film in Rieranthony/product-film-skill) into .claude/skills/product-film in your project. Claude Code loads it when a task matches its description.

How do I install Product Film Builder (Remotion) in Codex?

Run `npx skills add Rieranthony/product-film-skill --skill product-film -a codex`. Or copy the skill folder (plugins/product-film/skills/product-film in Rieranthony/product-film-skill) into .agents/skills/product-film in your project. Codex loads it when a task matches its description.

Can I use Product Film Builder (Remotion) in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Rieranthony/product-film-skill --skill product-film -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/product-film, .gemini/skills/product-film, .github/skills/product-film and .opencode/skills/product-film in your project.

What does Product Film Builder (Remotion) need to run?

Going by SKILL.md and its folder, Product Film Builder (Remotion) needs Python and TypeScript for the scripts in its folder and the command-line tools its instructions call (npx and uv). Our summary lists: Remotion; The product's own design tokens, components and copy.

Does Product Film Builder (Remotion) access the network?

SKILL.md contains no URLs. Its commands use npx and uv, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Product Film Builder (Remotion) safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Product Film Builder (Remotion) use?

Product Film Builder (Remotion) is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Product Film Builder (Remotion) use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Product Film Builder (Remotion)?

Skills that share tags, products or a category with Product Film Builder (Remotion): Stitch to Remotion Walkthrough Videos (google-labs-code/stitch-skills, 8.5k stars), Create Remotion Geist (Marve10s/Better-Fullstack, 756 stars), Video Shotcraft (Vincentwei1021/video-shotcraft, 11k stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 60k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Product Film Builder (Remotion)?

Rieranthony (a GitHub user) maintains it in Rieranthony/product-film-skill, which has 409 GitHub stars. The repository was last updated on September 26, 2026.

Source: Rieranthony/product-film-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.