Create deterministic video code with ak:remotion

Use ak:remotion when you are creating or reviewing programmatic video in React. The Skill provides packaged rules for compositions, frame-driven animation, sequencing, media, captions, charts, 3D, transitions, metadata, fonts, measurement, and rendering-safe effects.

Choose ak:remotion for timeline-rendered React

Use it when

• You need a data-driven video, animation, still, social clip, chart sequence, captioned video, Lottie scene, or React-based template.
• You are adding audio, video, images, GIFs, local or Google fonts, transitions, dynamic duration, metadata extraction, or frame extraction.
• You need Three.js content that renders deterministically on a Remotion timeline.
• You are reviewing existing Remotion code for flicker, timing, media loading, overflow, or render-only differences.

Choose another workflow when

• You need an interactive browser 3D experience rather than rendered video. Use ak:threejs.
• You need ordinary application UI or static brand assets rather than a timeline.
• You only need video editing in a desktop application; this Skill writes and renders code.

Prepare the project and render contract

• Confirm the installed Remotion and React versions, package manager, composition entry point, output codec and container, dimensions, fps, duration, and render environment.
• Provide licensed local assets under public/ or approved remote URLs with CORS access. Record source, dimensions, duration, codec, and expected file size.
• Define the content, timing, brand tokens, typography, safe zones, captions, accessibility expectations, and acceptance frames or timestamps.
• Budget CPU, memory, network, temporary storage, and final output size. Rendering, media decoding, 3D, effects, and transcription can be expensive.
• Install only the packages required by the selected rule, such as @remotion/media, @remotion/captions, @remotion/transitions, @remotion/layout-utils, @remotion/fonts, @remotion/google-fonts, @remotion/lottie, @remotion/gif, @remotion/three, or Mediabunny.

Run the Skill

/ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"

/ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"

$ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"

The Skill has no top-level mode flags. It selects rule files according to the requested feature. Important runtime rules include:

Follow the observable stages

1. Confirm the render contract. Lock composition ID, props, fps, dimensions, duration logic, output type, assets, and authority boundary.
2. Inspect installed capabilities. Match rule examples to current package versions, codecs, browser or server support, and package manager.
3. Build deterministic scenes. Derive animation from frame and fps, use composition-local timing, and wait for fonts and media before rendering.
4. Assemble the timeline. Sequence, trim, transition, caption, and mix media while calculating the final duration from actual overlap and playback rules.
5. Preview and test key frames. Check start, transition boundaries, caption changes, media trims, last frame, overflow, font loading, and failure states.
6. Render only with approval. Record render command, codec, duration, elapsed time, peak resource issues, output path, file size, and playback verification.

Keep external media and compute approval explicit

• Remote images, video, audio, captions, fonts, Lottie, and metadata endpoints contact external hosts. Pin or localize approved assets for reproducible output.
• Cloud transcription sends audio to a provider and can incur charges. Never send confidential media without approval.
• Package-add commands contact registries and change project files. Use the repository package manager and review manifest and lockfile diffs.
• Rendering writes large outputs and temporary data. Resolve the destination and available storage before starting; do not overwrite a valuable render silently.
• Pitch shifting is documented as server-render-only, not Studio or Player behavior. Treat preview/render differences as a required test case.

Verify outputs and evidence

A complete run should include the source and asset diff, composition metadata, package changes, key-frame screenshots or assertions, timing and transition math, caption and audio synchronization, overflow and font checks, and preview plus real-render evidence when rendering was authorized. Play the output from start to finish and verify codec, dimensions, fps, duration, audio, captions, final frame, and file size. For charts and important visual content, provide caption, narration, or another accessible text equivalent when required.

The packaged rules are point-in-time guidance and can differ from the installed Remotion API; some examples also rely on external current documentation. Confirm version-sensitive props before changing code. Stable and beta contain identical ak:remotion Skill rules in the documented releases.

Continue with Runtime adapters, Projects, artifacts, and checkpoints, or the Engineer Kit overview.