Agentic Product Demo skill
A skill and Remotion pipeline: the agent studies your product and builds a demo video in React code, with no screen recording
- 480 ★ on the repository
- Last commit
Extended access
Why this level
- npm install pulls dependencies, and the first render downloads about 100 MB of headless Chromium
- The agent reads your repository, running app and site to rebuild the screens, and runs the render and ffmpeg on your machine
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/agentic-product-demoDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- npm install pulls dependencies, and the first render downloads about 100 MB of headless Chromium
- The agent reads your repository, running app and site to rebuild the screens, and runs the render and ffmpeg on your machine
This is third-party code. Review the repository files before installing.
What it does
The product-demo skill works in Claude Code, Cursor and other agents that read skill files, and lives in a Remotion project. The agent studies your repository, running app or site, drafts a shot list and waits for your correction. After confirmation it writes a composition in src/compositions/, looks at stills on every beat and renders the video. The kit ships a motion vocabulary in src/motion.ts, a title card, a fake app window with a pointer, a preview script that shoots stills on every beat and tiles a contact sheet, and a render script. Rendering produces a 1536x960 mp4 with a poster and runs a gate: check-frames.mjs looks for corrupted frames and luminance jumps, including the loop seam. Sound is added by a separate pass, scripts/add-sfx.sh, which writes a new file and leaves the silent one untouched. The npm run adopt command takes colour tokens and easing curves from your product CSS so the video looks and moves like the app. The skill applies nine motion rules itself: counters count up, text types, elements enter with a two-frame stagger rather than as a group, weight and layout change in steps, one hero beat per phase, and the pointer stops on the button it presses.
Who it is for. For founders and developers who need a clip for a landing page, docs, an app store listing or social media and are ready to drive it through an agent.
Good fit when
- You need a 14 to 40 second clip for a landing page, docs, onboarding or an app store listing
- A screen recording reads like a slideshow of teleports and you want counters that count and text that types
- The clip colours and easing curves should come from your product CSS through npm run adopt
- The clip loops, and you want frames checked for flicker and the loop seam before publishing
- You need a scored version for a launch: the sound pass writes a separate mp4 and leaves the silent one alone
Not a fit when
- You need a recording of the real screen with real data: the app screen is rebuilt in React code
- Your company has more than three people and is not ready to pay for a Remotion licence
- You need a clip with graphics on a grid or a symmetric background: the frame gate is built for product UI and will raise false alarms there
- You want a clip without a single question: the agent first shows a shot list and waits for your correction
Example request
Read my repository and the app on localhost:3000, propose a shot list for a demo clip about exporting a report and wait for my correction before renderingLimitations
The kit is marked MIT, but Remotion itself is under its own terms: free for individuals, non-profits and companies up to three employees, with a paid Company License for larger ones. The terms apply from npm install. Node.js 20 or newer is required, and the first render downloads about 100 MB of Chromium. On macOS older than 15 the bundled Chromium does not start: point CHROME_PATH at an installed Chrome and quit Chrome before rendering. The ffmpeg binaries come from ffmpeg-static with their own terms. The frame gate passes a wrong picture: a panel over the header, an empty phase, a pointer on the wrong button. So before rendering, look at the stills the preview script takes.
How to disable. The skill lives in .claude/skills/product-demo/ of the cloned repository: delete the folder or the whole clone. Delete the Cursor copy in .cursor/skills/ the same way. Finished clips stay in the out/ folder.
FAQ
How do I install the product-demo skill in Claude Code?
Open the clone of the repository with dependencies installed in Claude Code: the skill sits in .claude/skills/product-demo/. The AGENTS.md file at the root is read by Claude Code, Codex, Cursor, Aider, Copilot, Gemini CLI and Windsurf, so the agent gets commands and rules right away.
How do I use the skill in Cursor?
Copy the .claude/skills/product-demo/ folder into .cursor/skills/. The skill file is the same in both places.
What does the agent ask before it starts a clip?
Three things in one block: a clip of the whole product or of one feature, where it will live (a muted loop on a page or a standalone clip) and whether you already know the flow steps. The agent's own guess is preselected, so one click is the usual answer. Length is derived from the flow and never asked.
What does the check-frames.mjs script check?
It looks for two defects: corrupted frames where the page texture is wrapped or mirrored, and luminance jumps, including the seam from the last frame back to the first. For a clip that does not loop, set STANDALONE=1. The script does not judge whether the picture itself is right.
Can I take the motion vocabulary without Remotion?
Yes. The src/motion.ts file imports nothing: the Bezier solver, the clamped span and the damped oscillator are written out in it. It works unchanged under Framer Motion, in a canvas loop and in React Native.
Discussion
No questions or reviews yet.
Related
SkillsOfficial Remotion skills for making videos in React: compositions, animation, captions, maps and rendering
A skill that makes your agent film a short product video: concept, edit, sound and render on Remotion or HyperFrames
A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters
A skill for Cursor, Claude Code and Codex: from a product name or URL it builds a 4K promo with music, voice-over and checks
Product Launch Motion
product-launch-motion
A skill building product launch videos in code: script, voice-over, camera, color and loudness, HTML, CSS and GSAP. ffmpeg needed
A skill for Claude Code and Codex that builds cinematic product videos with Remotion from shot recipe cards, a ready template and audio assets
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Agentic Product Demo (this entry) | no | 480 | |
| Remotion Agent Skills | no | 5,855 | official Remotion skills on compositions, animation and captions in general, without a ready product-demo pipeline |
| AI Promo Video Maker | no | 407 | builds a 4K promo with music and voiceover from a product name or link |
README in short
The page walks from a ready 16-second example to a step-by-step guide: copy a composition, register it, watch it in the studio, shoot stills, render. Nine motion rules, a description of the dialogue with the agent, limits of the frame gate, a section on how much of the project is Remotion, troubleshooting and licences follow.
README badge
Original SKILL.md
--- name: product-demo description: >- Shoot, animate, title and optionally score product demo videos with Remotion — for a landing page, docs, onboarding, an app store listing or a social post. Use when editing anything under src/compositions/, when the user asks for a new demo clip, an intro or an animated title, asks for sound or a version for social, says a clip feels dead or looks like a screen recording, or reports tiling, flashing or flickering in a rendered video. --- # Product demo videos One pipeline, three layers: the **story** (what the clip shows), the **motion** (how the interface behaves inside the frame), and the **title** (the two seconds that open it). Reference implementation: `src/compositions/Demo.tsx` + `src/motion.ts` + `src/title-card.tsx` + `scripts/render.sh`. New clips copy that pipeline. Do not invent a second one. --- ## 1. Settle the brief. Read what you can, ask what you can't. **Do not start a composition until the four things below are settled.** But *settled* is not the same as *asked* — and asking for what you could have found yourself is the fastest way to make a person regret starting. ### Read before you ask If you can reach the product — its repo, its running app, its live site — **read it and propose the whole plan.** Take the running order from the marketing site and the screens from the app; neither answers the other's question, and question 2 below has the measurement showing why. Then put the plan up and ask for one confirmation. ### Say that describing the flow beats letting you guess **Tell them this in your first message, in one line.** Reading the product gives you a *plausible* flow. It cannot give you the right one, because the code does not record which path converts, which step people get stuck on, which feature shipped last week and needs the attention, or which screen the founder is quietly embarrassed by. Only they know that, and most people do not volunteer it because they assume the agent has it covered.