VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:remotion

Remotion React video

Use Remotion's React video rules for compositions, sequencing, animation curves, assets, captions, effects, data-driven charts, and render metadata.

01

Choose Remotion fit

02

Define composition

03

Plan timeline

04

Wire media assets

Rule 01

React component video first; HTML-first video belongs to ak-hyperframes

Rule 02

Timeline correctness depends on sequencing, trimming, and duration metadata

Rule 03

Media handling is explicit: fonts, captions, audio, video, GIF, and Lottie each have rules

Rule 04

Measure dynamic layout before trusting render-time fit

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Choose Remotion fit Use this when the video is authored as React components; prefer ak-hyperframes for plain HTML/CSS timed by data attributes.
  2. 2 Define composition Select composition, still, folder, props, duration, dimensions, and calculateMetadata rules as needed.
02

Work

Agent / skill execution

  1. 3 Plan timeline Use sequencing, trimming, transitions, timing, springs, interpolation, and text animation rules to place every scene.
  2. 4 Wire media assets Load images, videos, audio, fonts, GIFs, Lottie, SRT captions, and transcript captions with the proper Remotion helpers.
03

Verify

Gate, review, validation

  1. 5 Measure dynamic content Measure DOM nodes or text when fitting layout, captions, charts, or responsive composition elements.
  2. 6 Add advanced visuals Apply 3D, chart, effect-chain, wave, blur, and Tailwind rules only when the composition needs them.
04

Close

Report, handoff, artifact

  1. 7 Check render inputs Use duration, dimension, can-decode, audio/video metadata, and frame extraction rules before rendering long or user-supplied media.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:remotion [video or component]

Arguments

[video or component] Required

Video or component brief

Natural-language Remotion video, still, scene, chart, caption, media, 3D, or component task. Include composition ID, dimensions, fps, duration, assets, timing, acceptance frames, and whether final rendering is approved; the Skill has no top-level mode flags.

/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"

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Animated React video Recommended 
/ak:remotion onboarding explainer with captions
Use when:
Use when a programmatic video should be authored as React components in Remotion.
Expected:
Rule-backed guidance for Remotion compositions, sequencing, timing curves, captions, assets, and render-ready scene structure.
Media metadata and trims 
/ak:remotion product demo using video clips and audio
Use when:
Use before mixing uploaded video, audio, duration metadata, decode checks, and trims.
Expected:
Applies the audio, video, Mediabunny metadata, can-decode, frame extraction, and trimming rules so playback stays synchronized.
Dynamic data render 
/ak:remotion data-driven sales chart video
Use when:
Use when charts, dynamic props, measured text, or calculated composition metadata affect the render.
Expected:
Combines chart, calculateMetadata, measuring-text, and DOM measurement rules to keep dynamic layouts sized and timed correctly.
3D or effects sequence 
/ak:remotion hero video with 3D objects and blur effects
Use when:
Use when Remotion scenes need Three.js, React Three Fiber, blur, wave, effect chains, or Tailwind styling.
Expected:
Uses the 3D, effects, Tailwind, animation, and transition rules to place advanced visuals on a coherent Remotion timeline.

Handled Scope

  • Compositions and metadata
  • Sequences and transitions
  • Caption display and transcription
  • Audio/video trimming
  • Charts and 3D in Remotion
  • Effects and typography

Next