Making our product video with an agent skill

Written by the thing it advertises.

The connector was built on 2 August 2026 in three commits, each with a Claude co-author line: the local setup, the bundled skill and license wiring, then the Settings card. The marketing videos came later. Between 25 and 26 September, four commits added the brand kit, the templates, voiceover and music, again written in Luminair sessions on Claude.

This post was drafted the same way: one session reading the repository and its history, with every outside claim checked against the page it links to.

Video became code.

Most AI video tools generate pixels. Remotion is different. You write a React component, read the current frame number, and compute what the screen should look like at that moment. Remotion draws each frame and stitches them into a file. That makes a video something a coding agent can already write.

What the agent lacks is Remotion's rules. Its answer was a set of instruction files. In the words of Remotion's docs: “Remotion maintains a list of Agent Skills that define best practices for working in Remotion projects.” You add them with one command, npx skills add remotion-dev/skills, and they live in the remotion-dev/skills repository on GitHub.

It spread quickly. StartupHub.ai wrote it up in January as “Make videos with Claude Code”, noting that “In early January 2026, Remotion launched Agent Skills” and that “the same prompt yields the same output”. That second point is the interesting one. A composition is code, so the same code gives the same video.

Remotion also had a hosted MCP server that answered questions about its documentation. It is now marked deprecated. The MCP page is short: “The Remotion MCP is deprecated. Install Remotion Agent Skills and use /remotion-docs instead. The hosted MCP will shut down no earlier than August 31, 2026.”

A folder, a key, a skill.

Most Luminair connectors sign you in to a service. Remotion has nothing to sign in to, so the first commit says plainly that it is “Not an MCP/OAuth clone”, because the hosted MCP is on its way out. A Remotion connection is set up once, on your Mac, and “connected” means one thing: the local project exists and has Remotion installed in it.

Pressing Install Remotion writes a small project into the app's data folder and installs five packages: remotion, @remotion/cli, @remotion/renderer, react and react-dom.

One detail took a fix to get right. An app opened from Finder gets a bare environment, so npm is usually not on its path and a direct spawn fails. The setup runs the install through a login shell instead, which loads your profile and finds the Node you installed with Homebrew or nvm. The Settings hint says it up front: Node and npm must already be on the computer.

const key = remotionLicense() || 'free-license';
const body = "import {Config} from '@remotion/cli/config';\n"
  + "Config.setVideoImageFormat('jpeg');\n"
  + "Config.setPublicLicenseKey(" + JSON.stringify(key) + ");\n";

The license key is optional. The Settings hint explains that it is only needed for automated rendering under Remotion 5.0's license and that renders still complete without it. With no key saved, the config gets the value 'free-license'; save a key and the same line is rewritten with yours.

Where that key lives changed once. On 2 August it went into a “portable” list of secrets that followed you to your other Macs. On 1 September that whole list was removed from the app, along with every other plaintext credential sync, and a build check now fails if it comes back. Today the key is encrypted with the operating system's secure storage on the Mac where you saved it.

The rules that make a render correct.

The third piece is a skill of our own, bundled with the app next to the others, so //remotion works in any session. It follows the same idea as Remotion's skills: tell the agent the few rules it would otherwise break. The ones it calls non-negotiable:

It also covers what to do when things are missing. If the project is not set up, the agent must not install it by hand; it sends you to Settings, where the button does the install and writes the license config. And it must never edit the license line, because the app owns it.

A skill only helps if the model knows the folder exists. In late August a shared list of local connector folders went in, after a session working in a user's own project could not load Playwright from the app's private folder and reported it “not installed”. Every lane, Claude and the command-line engines alike, now gets the same three things for each installed connector: the folder on NODE_PATH, its command-line tools on PATH, and a line in the session preamble. For Remotion that line reads: “video rendering; run `npx remotion render` from this folder”.

Fifty-two videos, one kit.

Luminair's short social videos are Remotion compositions too. They live in their own project in our repository, marketing-video/, not in the connector's folder, but it is the same library and the same way of working: describe the change, let the agent edit the composition, render, look, repeat.

The heart of it is a brand kit, src/brand/luminair.jsx. Its header calls it “the approved paper & ink system”, and it holds the colours you are reading now, the fonts, one wordmark, one opening card and one closing card. Every video shares that frame. Only the middle, the app moment, changes. The system was lifted from the Account switch template, and the layout every video now uses is the BranchOut one (the feature where one queue fans out into parallel sub-sessions), approved after watching it on a phone.

What changes per video is data. A file called kit-videos.json holds one entry per video: which template, the voiceover file, its measured length, where the spoken hook ends and where the call to action starts. There are 52 entries across 19 templates. Every hook opens with the same question form, like “Ever wish one AI could tackle your whole backlog at once?”

Rendering is a script, render-kit.mjs, that bundles the project once and renders every entry into a folder named for people rather than ids. Two small rules in it came straight from looking at the output:

• Frames are captured as PNG, not the default JPEG, because JPEG put a visible halo around thin text such as model names.
• Anything moved into a Posted folder is never rendered again.

A second script renders review sheets: one row per video, with the cover, several moments from the app section and the final frame side by side. That is how a person checks 52 videos without watching all of them.

Most of the kit's comments record a judgement made by watching a render on a phone. The layout moved down as one block after TikTok's search bar covered the wordmark in the real player. Music beds were levelled to one loudness because they were made at different volumes. The BranchOut script was voiced by three candidate voices, then the chosen voice was tried at several loudness levels. The code carries each decision so the next render does not undo it.

From setting to MP4.

1. 1Open Settings › Connectors (a Pro feature) and pick the Remotion card under Marketing. It is tagged LOCAL.
2. 2Press Install Remotion. It takes a minute or two and needs Node and npm on your Mac. Paste a license key only if you have one.
3. 3In any session, ask in plain words, for example “make me a 15-second animated intro”, or type //remotion. The model writes the composition, renders it and gives you the file path.

Checked, and not claimed.

Sources

• Remotion docsAgent Skills
• Remotion docsRemotion's Model Context Protocol (deprecated)
• GitHubremotion-dev/skills
• StartupHub.ai · 22 January 2026Make videos with Claude Code: Remotion AI video makes production code from plain prompts

For how skills and tools reach every model in a session, read Skills, MCP and the tool list.