In short:
ak-remotionis a knowledge skill for videos made with React code: it carries 29 Remotion rule topics and reads only the part your task needs. When it is done, it checks the real video instead of taking the preview as proof. Videos written in HTML/CSS go toak-hyperframes.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you make a promo video, a data-driven chart video, add captions, or fix a Remotion project that flickers when rendered. You do not need it when the video is written in HTML/CSS with data-* timing attributes.
flowchart LR
A["Video idea or Remotion code"] --> B{"Built from React components?"}
B -->|"Yes"| C["ak-remotion"]
B -->|"No, HTML/CSS"| D["ak-hyperframes"]
C --> E["Composition + scene code"]
E --> F["Checked video, plus what could not be checked"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| Frame-driven motion | Why must effects be computed from the frame number instead of CSS? | Opacity computed with interpolate(frame, [0, 2 * fps], [0, 1]) instead of transition: opacity 2s |
| Composition | What is this video's ID, size, fps and length in frames? | Composition Promo 1920x1080, 30 fps, 450 frames (15 seconds) |
| Sequence and timing | Which scene appears when, and for how long? | The title sits in a Sequence starting at second 1, lasting 2 seconds; back-to-back scenes use Series |
| Proof of done | What makes you sure the video is right? | A rendered mp4 with the right size, fps and duration, all assets loaded, audio in sync with the picture |
Timing is always written in seconds and multiplied by fps, so changing the fps does not throw the video's pacing off.
Sample prompt for a promo video:
/ak-remotion Make a 15-second promo video for <product name>, 1920x1080, 30 fps.
Scenes: the logo fades in, the product name pops in, 3 features one after another, a final scene with a call to action.
Background music public/music.mp3, fading out over the last 2 seconds.
Done when: rendered to an mp4 and checked for size, fps, duration, and music in sync with the picture.This skill has no flags.
Below is the detailed version: the run flow, 4 situations with prompts, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-remotion: make videos in React with Remotion" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-remotion". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-remotion
